One of the latest trends in web design is responsive templating. Responsive layouts use the finest techniques to arrange page elements according to screen size. In this way a web page should perfectly fits any screen resolution from a mobile phone to HD TV displays.
I’ve seen some nice responsive layouts so far, for example Simon Collison web site looks simple and beautiful both on my laptop and my ipod. But I believe responsive layout is not an elegant solution for many web sites.
From September 2011 Boston Globe web site started using a responsive layout, it switches from 3 columns to 1 depending on the device. It’s the first example of broad audience web site using this technique. In my opinion the final result is not good at all. Regarding page design the web site looks poor, I usually like clean pages but the Globe looks to me as it is missing something (I don’t know how much the visual appearance was influenced by the responsive layout but I guess they had to sacrifice some details). The need to have the same information at different page widths means it is not optimized for any screen resolution. At 1280px the 3 columns do not seems well balanced, it looks too stuffed. On the contrary it renders nicely on small screens (Tested on ipod and on my 240×320px android phone) the horizontal space is well used but I find the page too long, there is too much information for a mobile home page.
From a usability point of view the idea of having different rendering with different devices do not helps in having a consistent user experience. It does not allow to use spatial memory to find an element you have previously seen in another device. It is much better to display the full layout even on smaller devices such as ipad in portrait mode and 7″ tablets. Both ios and android do a great job at rendering 1024px wide web pages.
I believe the best approach in designing a web site nowadays is adopting solutions relevant to the content. It can be a good idea to have a fluid layout for image galleries but does a newspaper really need all of users screen width? Fluid layouts works well on a limited range (for ex. 980px to 1440px wide) they fit a wide range of devices, from 7″ tablets to 27″ screens (usually people with HD screens do not use their browser at fullscreen). Sometimes the 980px wide layout can be used even on mobile phones, the smart zoom allows smooth navigation and reading ability.
In most situations having a mobile version of the web site is ideal. Mobile version means mobile layout and a mobile information architecture. Think about the context in which mobile browsers are used. As many guidelines suggest having a “full version” link is a good practice, as I explained before, people usually rely on spatial memory to retrieve information.
To sum up, I don’t think responsive layouts are overall bad, they can be used successfully for simple page structures, for example one column designs and web sites with not much content. Responsive templates can also be fine for general purpose blog templates, usually people using them do not have enough tools or time to take care of screen resolution issues, they need a one-size-fits-all solution. Custom designed web sites, newspapers, magazines and content rich web sites better have 2 different web sites (standard and mobile).
At http://designmodo.com/responsive-design-examples/ you will find a rich gallery of responsive web sites.