Quantcast

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.

Advantages

  • 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.

Limitations

  • 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.

One Comment

  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.

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