Responsive Web: Now and Next

Screenshots of different Apple devices displaying the Hicksdesign website

Recently, web designers have rallied under a new banner: ‘responsive web design’. The term coined by Ethan Marcotte and popularised by his book of the same name has caused something of a renaissance as to how we view the web. We always knew it was capable of fluid designs and that it wasn’t the same as print, but only now are we beginning to discover the full potential of what it means to make a website.

What is responsive web design?

A brief primer for the uninitiated: responsive web design is about shifting, omitting or adding content depending on the size or orientation of the display. For an example of this—and one of the first to do it before it had a name—was the ever-brilliant Jon Hicks. Resize your browser window and see how the columns remove themselves, the navigation re-positions itself, the logo scales proportionally; in short, it’s beautiful. To achieve this, Jon uses CSS media queries which are surprisingly well established.

So responsive web design, from a non-technical perspective, means more websites will be better optimised for your screen real estate than before as more designers use it. My real aim, though, is to talk to you about a lesser-talked-about technique that I believe falls under the same banner.

Context-aware browsing

Increasingly, sites will drop the navigation bar to follow you down the page. A couple of examples are TechCrunch and Creep Fest. I was trying to think of a name for this technique and did think context-aware browsing summed it up quite nicely, it knows where you are on the page and reacts accordingly until it dawned on me: This is another example of responsive web design!

An insightful overview of what’s currently happening to the web was described in Mike Driscoll’s Node.js and the JavaScript Age, we are transitioning from an age of static web pages to “a global digital nervous system”. I adore this analogy, HTML is the skeleton, content the organs, CSS the skin, and JavaScript the nervous system. With a combination of CSS and JavaScript, pages react to what the user does and where the user is, both geographically and within itself.


  • CSS media queries have a wide, standardised implementation. Even if the mobile browser you’re using doesn’t support it, it will support percentages in your CSS, so, if you’re using a grid system, simply drop 960px to 80% and you’ll have a fluid website at least.
  • Your site will be more accessible to mobile device users. We know there are large shifts away from desktop usage and offering a streamlined experience, I believe, is a big part of that. Mobile users generally have different priorities to desktop users. On the B&W Meet website we decided that people would be looking for a map and location details so we made this a priority on the small-version of the site.
  • Platform agnostic. It doesn’t matter if you’re using a Symbian browser or the latest Mobile Safari, it’ll behave the same lending itself to the “write once, deploy everywhere” paradigm.
  • You have full control over the content positioning. There is no ‘magic’ attached to this, you simply use pure CSS to position content as you would in any other site.


  • More technical knowledge is required. To use techniques like navigation bars that stick to the top of the page past a certain point, JavaScript is essential.
  • ‘The full experience’. Some believe that by providing an optimised view, that they are missing out on important content. Sometimes, this is the case; someone may make an editorial decision and decide that some content is superfluous for mobile users. I’m not convinced these people are using responsive web design ‘correctly’. It’s all about giving as similar experience as possible and prioritising content, not losing out on it.

Where next?

I believe this age of Responsive Web Design will see innovators playing with not only websites that respond, but online UIs too. Mobile users have different needs and priorities to desktop users and I believe many conventions can be taken from native mobile apps in this sense by taking these considerations into account. Next time you’re browsing TechCrunch or any other responsive website, ask yourself, ‘does this benefit me?’ and if so, ‘how’s it done, could it be executed better?’

Got any good or bad examples? Let us know!

This entry was posted in Internet, Programming and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. Posted 18/10/2013 at 7:26 AM | Permalink

    Usually I do not read post on blogs, however I would like to say
    that this write-up very forced me to check out and do
    it! Your writing taste has been amazed me. Thanks, quite nice post.

  2. Posted 05/09/2017 at 11:34 AM | Permalink

    Russian girl 18 years
    Here, the girls undress and show themselves completely free of charge, you want to pay you want to pay

  3. Posted 22/09/2017 at 4:16 AM | Permalink

    Maintaining a professional image whilst working out of your home can be challenging. But it is a challenge that can be overcome with a small planning. You will need to create a expert “mental image” and, as a lot as possible, a professional physical area.

    This new technology not only saves you 50 to sixty percent on your month-to-month phone bill. It also offers a host of solutions the telephone company can’t. 1 of these – a “get virtual sms number” — can get rid of long length costs to buddies and family members who want to call you. Right here’s how it functions.

    It is essential that you develop a method for organizing your digital information so that you can find them effortlessly. 1 approach is to utilize a grasp folder that then consists of numerous sub-folders of information.

    Which delivers up updating the app; unfortunately with Side-loading it’s a onetime set up, you can’t update this way. But ideally by then Amazon will have it integrated into their catalog. the only remark I have on that is they have apps already in the catalog asking to be up to date that are not even available yet. Amazon requirements to step up their app library game fairly badly. I can’t even buy a non-totally free edition of Indignant Birds.

    This has a lot of benefits that you may not understand at initial. Even if the other person is utilizing a regular fax device, the service converts the fax that they send into a structure that can be viewed on a computer. This provides you with an automatic digital backup duplicate of every fax that you receive. You never have to lose a fax once more, simply because you can organize them and back again them up digitally. You can place them into folders in your email account or in the fax services account you get from the services provider. You can download your files and burn them to disc.

    Since the early 00′s VoIP service companies have come a lengthy way in the audio quality and reliability of their solutions. These days, new systems are at any time increasing in speed and the price at which they come out. Plus, there are no costs for incoming phone calls ever and you don’t require a computer, just a phone cable achieving from your VoIP box to your phone. Pretty quickly, virtual telephone numbers will dominate the VoIP scene. This indicates that your region code is virtual – your lengthy distance friends, colleagues and company partners can dial you as although you had been a nearby number. With all of these exciting changes, what much more purpose do you need to switch? These tips should assist you consider all of the proper steps to start making quicker, less expensive telephone phone calls these days!


Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Welcome to TechRant…

    We are a group of techies from emerging students to full blown professionals who are enthusiastic about technology related subjects. Everyone has opinions and feelings about things, sometimes stronger than others. On TechRant, we will be sharing those opinions, and have a good ol' rant! We may also do non ranting type articles, like news, reviews, tutorials, tips and tricks, how-tos and even the odd interview.

  • Authors

  • Categories

  • Archives