Responsive web design has been emerging as a way forward over the past two years. Simon Collison's personal website was one of the first to head off down this route and is a great demonstration of what can be achieved with an adaptive design - well worth a visit. Following on from that lead I have now implemented a Responsive Web Design on this, my personal website.
This site now uses responsive web design - go on, resize you browser!
Until you look at a website on several different platforms you may have no idea that it is using responsive webdesign. However you will know pretty quickly if it doesn't - if your on a small screen and you have to zoom or scroll horizontally then it's not responsive.
The creation of the 960 grid was a great leap forward for mass web design, allowing designers to utilise traditional grid structures for easy page layout, but with the emergence of smart phones and tablets website needs changed quickly and 960.gs wasn't flexible enough - although a flexible version has since emerged. Standardisation is what lifts a cottage piece work into industrial strength production and we are going through the early stages of the digital revolution in much the same way that the Georgians and Victorians went through in the Industrial Revolution. There is still a place for the individually crafted website but our industry is moving toward mass production - that's not a bad thing. Have a look at the sites now using 960.gs - and you will see its not the leading edge web designers but the big multi nationals. Standardisation rules!
The idea that your website should look the same on all browsers was been shot down a long time ago and the same has existed a long time for platforms but previously most sites that have catered for mobile have used platform detect methods to deliver different CSS layouts. That's not ideal especially as today we are seeing an emergence of a huge range of screen sizes because of all the iPad killer tablets coming out. Despite desktop screen getting huge these days we actually now have to cater for a bigger range of window sizes then ever before and we also need to double that number because most mobile devices now orientate the screen to the way the user is holding it. Therefore we really do need a standard design grid and ways of working that are truly flexible.
For the simoncox.com version 6.4 website I have used the Skeleton grid for my responsive design - though truth be told there is a lot to do design wise of this skeletal look and feel! Hat tip to MrQwest for finding Skeleton. It may not be what I am using in 12 months time but it has the level of complexity that I needed to make the transition.
On resizing your browser (I am supposing you are on a desktop/laptop) you will notice that the site goes through several sizing transitions. It snaps to predefined minimum and maximum column sizes retaining a semblance of the proportional grid layout. Order of content in the html is vital as when you get to the smallest size, to accommodate mobiles, the order really shows - there is one column with content blocks vertically following each other.
Twisting the orientation around on the iPad you might not even notice that the grid has changed due to the way that Skeleton changes the layout according to the available viewport/window size. This is all relatively straight forward but one item that is going to royally burger up your responsive layout is images. Normally images are a set height and width as they are rasterised images based on pixels. Enlarge them too much and the pixels show - not nice - shrink them too much and you are wasting bandwidth - you could make the image much smaller than what you need it for. This poses a bit of a problem. I turned to Ethan Marcotte’s Fluid Images article (hat tip to the Mr Rutter) for the answer and all seems well.
As ever the design you see today probably isn’t quite the one that was live when I wrote this piece which is why I have started numbering them. Version 6.4 is a rough guess at the many versions of this site since 1996. I constantly tweak the design, layout and back end when I really should be writing articles worth reading!
and there's more! - an update
8th June 2011 and Eathan Marcotte's Responsive Web Design has been published by A Book Apart. Whilst most of what he has written is not new to me I think I will be using this book as a reference point for a few years to come - it's superb, very well written and marks a sea change point in approaches to designing and building websites. There is a great article, part of the book, on A List Apart - Fluid Images and I encourage anyone thinking of building a new website to read this and then the book (which incidentally I have been reading on my iPhone, iPad and iMac as an eBook).
9th June 2011 I have finished reading Responsive Web Design and the big take away is design for the small screen first and then add on additional content and layout as the screen sizes go up. Very interesting read and a wholly new approach to web site design. OK reasonably new approach as some folk have been expounding on mobile first for quite some time but I suspect that most of us think of mobile versions of websites, this method uses the same site and content for all devices though it is complex and I would like to see some emerging best practices that don't rely on putting html code in JavaScript to display to those with JavaScript - it works really well in the fact that it degrades well for those without JavaScript but is clunky way to implement. I am thinking on how to deliver more content based on media type with ExpressionEngine as it would be better to keep the alternative html in separate template files pulled into the JavaScript. Anyone with any ideas on this comment or tweet me please!
20th June 2011 I changed the intro text as Simon Collison's website is in fact an Adaptive design, not a Responsive design - though it's a subtle but important difference
22nd July 2011 John Faulds writes about responsive images and how to make it happen in Expressionengine - over at johnfaulds.com.
Gallery
- iPhone by Simon Cox - Tue, May 31, 2011: Croydon
iPhone screen capture showing how the responsive content layout reflows to the smaller screen size
0 comments
I think the design is a very good job, it is both challenging, also can inspire people’s thinking. Designers have to a lot of ideas, that his design will have a lot of window. Designers should know how to innovation.
Having spent most of my life in copywriting and on the fringes of graphic design, when the world wide wobbly hit us with a big wake-up stick in the mid ‘90s, I was fortunate enough to see the huge potential. Of course, at that stage, I don’t think anyone realised that what began its life as an “information super highway” would evolve rapidly into a must have commercial medium, and more latterly, a social networking arena.
The old ways are certainly being challenged and all web designers should try to adapt to changing trends and techniques. However, the responsive web design community seems to be relatively small when compared to web designers using more traditional methods. Yet, responsive web design pundits tend to be scathing of designers still using the ‘960 grid’ and I lean towards thinking this is just elitism at its creative worst. In my opinion there is still a place for traditional PC based web design, so why decry it so vehemently? There are, for instance, companies whose marketing strategy is still more traditional because their product or service may be so. They may be marketing to businesses only, perhaps even government or local authorities, and most businesses and public services are still office (and therefore PC) based. So, to coin a cliché, why deviate from a winning formula?
I love the idea of responsive web design, although I think that currently, design itself tends to suffer in the process (and I mean design as a visual aid). That said, I readily admit I have a lot to learn if I’m ever going to get there. I readily admit I’m one of those who has not adapted well to the trends of the past 5 years perhaps seeing them more as fashion; i.e. here today gone next season. All in all, responsive web design is a technique web designers should be au fait with, but I wish pundits would be a little less unforgiving of designers who believe in the aesthetics of design as opposed to the information overload which tends to kill the readability of many of the responsive websites I have seen thus far.
I think there is a place for everything and everything in its place… with the proviso that whatever is done is done well, and for the right reasons.
James - your right. No web designers should be looking down their noses at people using what is considered old techniques - table layouts for example are still more effective in email than on the web.
However we are looking at frontiers here and this is why there is so much debate at the moment about RWD. It was the same for WebStandards a few years ago and that is now considered best practice though not everyone uses webstandards.
This site currently (this post will be here longer than this site design) uses a 960 grid BTW and it responds to the viewport.
A really good post and I agree with you! Design of website should be responsive, so that everyone should come and share their thoughts about such web design. A good design will show your thoughts.
You are invited to comment
You are invited to post comments about this article. I will publish any comments that I think actively further the conversation and I reserve the right to filter out any comments. Comments on this site are free for general discussion but not for promoting businesses. If you wish to link to a commercial business you are welcome to do so and there is a charge of £10.00 per link per day, payable in advance, with a minimum of 30 days. Enjoy the discussion.
×