Responsive design

July 28th 2012 - Web Design

Once upon a time web design / interface design was simply the act of taking a portrait designed brochure and turning it on its side to create a landscape layout with buttons stuck on to make it cool and new media.

There wasn’t a convention of what constituted good or bad web layout, semantic mark up or even screen width. Everything seemed to change depending on who was designing / coding the said site.

Not even the web browsers could agree on how to display the HTML code you had written, lousy doc-types, browser specific code which forced you to create / support sometimes two or three different sites and a lovely little button to tell you “This website is best viewed in…”.

It was a hard time for designers. Most of our tradition views on good aesthetic design were thrown out of the window to be replaced with HTML tables. There were a lot of tables. With images in them of rounded corners and spacer gifs to position everything exactly.

And that’s where the problem lied. We had been trained to create fixed pixel perfect layouts in controlled environments like Photoshop. Except the web browser wasn’t perfect and as a designer you didn’t have control. User interface design relies solely on the user’s environment which you can’t control. This is why technologies like Flash were popular amongst designers as it created an experience dictated by the designer/developer and not the user. And the user needed a plug-in.

It seemed like two worlds. You were either user centric and had a bland table based interface or you were design focused, loved by your peers (and plug-in manufacturers) but hated by your users.

As browsers started to support CSS more and more things started to change. Website experiments like CSSzenGarden showed the industry that it was possible to create good design with semantic mark up. Although we still had browser differences, for the first time it felt like you could actually design something that was useable.

Then in 2010 a A-bomb was dropped on the industry in the form of an article on A list Apart by Ethan Marcotte and like cssZenGarden before it forced the industry to look at itself.

Marcotte argued that we are essentially information designers and thus should be creating things that sit naturally inside any environment. It was the user who dictated the monitor size or device they chose to use while using your site / application and as nothing was really fixed in a browser then why should the design be treated as static?

So what is responsive web design?

By using CSS Media Queries and JavaScript onresize()we can develop sites and applications that react to the users’ interaction by resizing the web browser and detect the current medium they are viewing our site/app in order to give them the best possible user experience. Also using JavaScript libraries such as Modernizr we can detect supported features in the browser and progressively enhance the user experience utilising newer CSS3/HTML5 techniques.

For example if a user were to view the BBC site on a PC with an average resolution of 1024 x 768 they will most likely be accessing, navigating and interacting with a mouse. They will probably have a PC that can process information and interactive elements quickly and have a decent internet connection in order to download this media.

If that same user then viewed this site on a mobile device chances they will have a smaller screen and using touch screen as a navigation tool. So what we do is serve the same site / mark up, but load a different CSS document suited for their device: we style larger buttons, hide large images from view or resize them to fit the mobile screen and perhaps show even smaller excepts of articles and set the widths of the page to a percentage. Now we have a fluid design that responds to the user and not force a user to our own constraints.

With that said there are some problems in this approach. Media Queries aren’t supported in Microsoft IE8 and below although there are some JavaScript libraries that can fix this.

Also CSS served is still downloaded by default so if you have a lot of large background images in your CSS, even if they are hidden for small mobile screens they will still be downloaded regardless, possibly causing a slow sluggish load which equals bad user experience. Again this can be solved with either if statements loading CSS depending on screen size or using a technique called Mobile First, where your default styles are set for a mobile device and these are over written with a PC specific style sheet.

Despite these woes it does seem like the industry is going full throttle with this new method of web creation. Even the British Government is getting in on the act and Web applications seem to be winning the war over Native applications. For example the Financial Times launched it’s a web application last year and it is already more popular than its native iOS apps.

Responsive Design and or Mobile First design does seem to be the future of our creative industry and should be taken in to consideration when designing and developing our next generation of sites/applications.

Well at least for the time being anyway, as the online industry does have a tendency to create new paradigms in order to sell more books, write more training courses and justify client redesigns, “AAA Compliant” sites being the most famous one of them all.

10 comments to...“Responsive design”

Great web site. Plenty of useful info here.
I’m sending it to several pals ans additionally sharing in delicious. And certainly, thanks for your sweat!


My partner and I agree with your data and definitely will anxiously look ahead to your next updates. Merely declaring many thanks will never merely end up being sufficient, for your exceptional lucidity in your writing. I am going to directly get your rss feed to keep informed with any revisions. Solid effort and much results in your online business efforts! Cheerio!


Avatar long island

You need to be a part of a contest for one of the greatest sites on the net.
I’m going to recommend this web site!


Actually i’m one regarding who got confused throughout putting the particular image in the layer mask!!! i wish i possibly could complete this specific tutorial: / definitely magnificent.


Avatar burberry

You made some respectable points there. I regarded on the web for the issue and located most people will go along with along with your website.


Great Stuff, do you have a flickr profile?


I sure do, http://www.flickr.com/designtoday


Avatar my blog named kip

you are in point of fact a good webmaster. The website loading pace is incredible.
It seems that you are doing any unique trick. Moreover, The
contents are masterwork. you’ve done a wonderful activity on this matter!


For the reason that the admin of this site is working, no uncertainty very shortly it will be renowned,
due to its feature contents.


Avatar Elaine

Can I simply just say what a comfort to uncover someone that really knows
what they are talking about on the net. You definitely realize how
to bring an issue to light and make it important.
More people need to look at this and understand this side of the
story. I was surprised you aren’t more popular since you definitely have the gift.