The Namibia Economist

Hard facts on software -Responsive Design

Just when we thought we’d seen it all in web design, it gets more complex! The reason is the proliferation of screen sizes out there today. I am sure that you have suffered from non-responsive design on your mobile phone lately. But what is this phenomenon really?
Let’s look at an Introduction to Responsive Web Design Posted on www.themobilewebdesignblog.com on 18 June 2012.
“In a nutshell, responsive web designs change and adapt to fit different browser sizes. They are a good way of making sites look good on mobile devices or tablets without having to create a separate mobile site.”
Have a look at http://thinkvitamin.com/”. Take a quick visit and play around with the browser size to see it in action, i.e. squeeze the browser window to be very small to see the effect of how the site changes and adapts to the smaller screen size.
In the past, designers would create a specific miniature copy of the website for mobile devices, but this approach is futile, since for example HTC alone offers more than 10 different screen sizes. Also users often would be locked into the limited functionality of the mobile site when browsing on their phone with no option to go to the full site (careless design!). Another route was to build specific apps for different platforms, but again this means doing a lot of work multiple times.
“The purpose of responsive design is to present the website and its content in the best possible way for the device the user is viewing it on – Desktop users get one view, mobile users get another view, etc. This is done using media queries, which essentially tells the browser which design styles only apply to screens. You would generally use a few of these media queries to identify several different screen sizes that you would then write different design rules for.
Also, any width measurements are changed to percentages, rather than pixels, to enable the design to stretch and contract with the browser window. Images and Fonts are an entire topic of their own, but in short they are given special design properties to ensure they resize correctly for different screen sizes.”
Bottom line, all this jargon means that the site is designed with vertical bands in mind. The wider the screen, the more of these bands can appear and the content is then arranged accordingly.
“Designers often write media queries for particular screen sizes, so they know their designs will look good on specific devices with those screen dimensions.
However, it is not ideal to have to keep updating your site with new media queries when new phones and tablets are released with different screen dimensions. Therefore, designers now often use another approach whereby they start with a ‘mobile first’ design and then work upwards. For example, a designer will begin the process with a design for smaller screens and then they will expand the browser window until the design breaks or starts to look weird or unusable. This helps them find the ‘breaking points’ of the design, and this is where the media queries are added.
This approach essentially future-proofs a website, ensuring it will work on any device of any size.
You can view more responsive designs atmediaqueri.es.
Finally, for a much more in-depth look at responsive web design, we suggest reading Responsive Web Design by Ethan Marcotte at www.abookapart.com/products/responsive-web-design.
This book is probably the key text to understanding the topic of responsive design and it details, step by step, how to turn your static websites into fully responsive ones that look great and work well on all kinds of devices and screen sizes.
Like we used to say: “Never a dull moment!” Until next time then – Keep it (A)fresh.

• < Prev
• Next >