Explaining Responsive Web Design! 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.

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, desktop 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.

 

As an example take this website and grab the bottom-right corner and move it around with your mouse.

​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, some have has predicted that in 2013 they will soon overcome desktop devices as the most common place to access the web. According to Google, 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.

Posted in Web Development.

Leave a Reply

Your email address will not be published. Required fields are marked *