Explaining Responsive Web Design to mums! Beware: No technical details included!
In the last few years the market share of smartphones has significantly increased. It is probably safe to say that you own a smartphone that has become essential to your life. Besides using it for traditional tasks such as calls and text messages, you'll be browsing the web too. In fact smartphones have become our favorite tool to look for information online, just check Luke Wrobleski's blog post.
Since most mobile devices have a different screen size, it's apparent that the traditional desktop approach to web design cannot provide a satisfactory mobile experience. And this is where Responsive Web Design comes in. Responsive Web Design automatically adapts the content of a website to the screen size of your iPad, iPhone, dektop screen or even a huge flatscreen TV.
When did responsive design go mainstream? With Ethan Marcotte's groundbreaking article ‘Responsive Web Design’. He demanded a rethink. We have to stop making the web behave like print design. Despite the fact that there are many similarities between print and the web as media, we have to bear in mind that “the web is inherently an unstable medium”, with one specific characteristic: it does not own a fixed size.
Brad Frost has genuinely visualized the problem
Image by Brad Frost
Having said all that, it might be help to show a few examples. Take the following websites and check if they are responsive is by resizing the browser window. Grab the bottom-right corner and move it around with your mouse.
- Ethanmarcotte.com: of course the first website I would like to mention is Ethan Marcotte’s website, coiner of the phrase “Responsive Web Design” in 2010. A simple and straight to the point responsive website.
- The Boston Globe: the Boston Globe is the largest responsive website to date. It manages loads of content easily, keeping it intuitive and accessible from any kind of device.
- Steve Fisher: Steve is a user experience designer. His website shows how you can play around with a responsive website. For example, have a look at Steve’s face from the different devices!
- Amazee Labs: last but not least, our wonderful website is also responsive! Therefore you can easily access it from your computer at work, from your mobile device or ipad/tablet.
Responsive Web Design teaches us that rows can become columns and viceversa; a menu bar can become a drop down bar, and videos and pictures can be resized depending on the size of the screen we access the website. Of course there is some technical magic behind all these features, but it’s all worth it!
Going back to our mobile devices, Gartner has predicted that in 2013 they will soon overcome desktop devices as the most common place to access the web. According to Sam, we need to keep Responsive Web Design principles in our mind and start treating the web as its own medium, designing for mobile first and building our sites progressively. Only in this way we will be able to build websites that are best viewed in any web enabled device.