A lot of articles have been written about Responsive Design, especially in the last couple of months. The term responsive in fact means that design and development should adapt to the user’s behavior and environment based on screen size, platform and orientation.
This buzz around Responsive Design all started more than a year ago with Ethan Marcotte’s Article about Responsive Design in A List Apart. This article shows us that Responsive Design is a way to make your website look and work perfectly across all the new devices out there without creating and maintaining parallel mobile websites. Instead, you serve up the same website but use media queries (CSS3 technique that enables responsive design) to adapt the page’s layout to the device it’s being displayed on.
Nowadays mobile and tablet browsing is going through the roof, and almost every month new records are being broken. Yet, most websites look and work poorly on these new devices because they were designed to be experienced on a desktop computer with a mouse, .. and Responsive Design just could be the answer to this problem?
What is Responsive Design?
As mentioned earlier, the most vital element of responsive design is a flexible grid system that adapts to different screen sizes. In other words, screen size is the obvious place to start.
In the larger sense, responsive design is not only about fluid grids, it’s about how you (re-)arrange your content based on the screen size of your reader to give people what they really want, namely information. Re-arranging your content is also important to guarantee that your visitors have the best experience no matter what device they might use.
Every site is different and without giving proper thought to your content, you’re not going to have an effective website.
“Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.” Trent Walton
Instead of being the ‘next blog’ giving you the same code snippets and examples how to use media-queries, etc., I would like to bring a recent Article on Smashing Magazine to your attention: Responsive Web Design Techniques, Tools and Design Strategies. Definitely a must-read if you want to get started with Responsive Design ..
Why did I use Responsive Design for the gonzoblog.nl
I really just wanted to offer an iPhone friendly version of the gonzoblog.nl for my blog articles, but I wanted to use the same HTML/CSS and content (i.e. not serving up a separate mobile website). And Responsive Design seemed to be the best solution for my problem; The idea to be able to show a website on all available devices sounded like an UX orgasm, an ode to semantic CSS and just pure visual magic!
‘Good design’ should be all about not only putting content first, but making that content also easy to read and to navigate — giving people the information they’re looking for. What I especially like is that Responsive design picks up where ‘good design’ leaves off.
You just think about this for a sec: If we had an abundance of good, content-driven design on the interweb, we wouldn’t need tools or services that strip out superfluous visual distractions (like Readability or Instapaper) and give people just what they want — written information.
The biggest argument against Responsive Design is the notion that this method doesn’t really work for the portable web due to the fact that items are hidden rather and are still therefore downloaded. In terms of hiding content, you could try to adopt Luke Wroblewski’s approach of designing for mobile first so there is less junk to hide.
How I did it (the Short Version)
Begin this year I started reading articles and tuts about Responsive Design, and also started to experiment with media queries, fluid grids, flexible images, HTML5 and the lot. But first I needed to streamline my website and focus on the content rather than on the sidebar(s) and/or other (visual) distractions.
For this specific redesign I used 4 media-queries: resolutions bigger than 1024px (max-width: 1100px), resolutions smaller than 1024px (iPad landscape), resolutions smaller than 880px and the last one, resolutions smaller than 620px.
I also used HTML5 and HTML5Shiv (HTML5 IE enabling script), scripted by Remy Sharp, to make things work in IE without having to target IE7 and IE8-users with a specific designed Style Sheets. In IE9 everything works fine (or: SHOULD work fine), so even on Windows-based smartphones and tablets the design adapts quite nice!
As mobile and tablet browsing keeps growing, ignoring this fact could harm your brand and business more and more. The future of the web is clearly one where websites adapt to the devices that are accessing them .. and that future may already be here?
- § -
What are your thoughts about Responsive Design, I’d like to know your point of view ..?