- Published Date
- Immo Bohm
- Hits: 848
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.
- Articles In This Category
- ColumnsOne of the most important goals of the Government of Namibia is to alleviate poverty by creating maximum employment for its citizens. In order to...Hardfacts on Software - Gartner identifies the top 10 strategic technologies for 2012 - the cloud (861 hits)ColumnsAh – the year is really kicking off now – if you haven’t made plans yet what to do this year you might as well start planning your next...Innovation - Open Innovation – Part 1 (591 hits)ColumnsBackground I have covered the total innovation process from defining the challenge, generating ideas and through to commercialisation. The...ColumnsI am done with exams and my mind can again enjoy the freedom of dwelling on random thoughts. No more reciting of chapters when I go to bed. Au revoir...ColumnsNurses are regarded as the protectors of the ill, the caretakers of those that are bedridden and the caring people who took an oath to serve the sick...This week in the Khuta - Be proudly Namibian (1418 hits)ColumnsLast year, the government launched a campaign “My country, My pride.” It was a good campaign, and I commend the government for doing so. But...ColumnsThose of your who read my blog last week know that I started quoting www.privacyrights.org on their excellent article on what to think about when...Innovation - Campaign based idea management (873 hits)ColumnsBackground In the previous article I discussed creative thinking and touched on some idea generation techniques. There is much more to say...ColumnsLast week, a 29 year old woman made headlines when she placed an advert in a local daily offering her baby for sale. Has poverty hit our people so...ColumnsRain is in the air! Who would have thought that our small rainy season would simply not be there this year? After all the good rains we had over the...
- Related Articles
- ColumnsLast time we looked at the benefits of online shopping this holiday season – well – it is also necessary to look at the potential risks. To deal...Special FocusImported products are giving local manufacturers a run for their money as these products are not only cheaper, but also more easily accessible unlike...ColumnsWe just had a phenomenal event here in Johannesburg. The interest in e-commerce is now greater than ever and there is a profusion of ideas floating...ColumnsThose of you who have not been following my column have missed out on many tips and tricks that ensure a safe online shopping experience. But don’t...ColumnsYou will probably be surprised that there are even more things to consider when shopping safely online. There are plenty! This week we deal with...
- Latest Articles
- Spanish navy ship “Rayo” visits Lüderitz (250 hits)General NewsThe Spanish Navy Ship “Rayo” paid a visit to Luderitz this week. This is the first time this brand new ship, an ocean patrol vessel, entered...Conference in the North launched (580 hits)HeadlinesIts official, the Economist Businesswomen Club this week launched the 14th edition of its annual Businesswomen Conference in the North when...Govt urged to restructure energy (553 hits)HeadlinesThe business community has called for the restructuring of the local energy sector to allow for more players in the sector in order to guarantee...Trade with UK falls 28% (517 hits)HeadlinesThe decision by the world’s leading diamond company De Beers to move its diamond sorting operations from London to Botswana has seen a 28% drop in...The winter of our energy discontent (94 hits)Editors DeskWith the first portent of another winter arriving during the week, energy is again on everybody’s mind. And it is not only the dreaded fear of an...