Call and Respons(iv)e: Responsive User Design

2013 will not be known as the Year of the Snake. Nor is it a year until the 2014 World Cup in Brazil or the Winter Olympics in Sochi. It also isn't the year of my 31st birthday. Ok... it is ALL those things but more importantly according to Mashable, 2013 is...

 “The Year of Responsive Design” 

If you’re not familiar with the term responsive design, in simple terms, it means creating websites that adapt to whichever medium it’s being viewed on.

Responsive design has come about as the usage of devices with various dimensions - smartphones and tablets have increased. You'll see that in less than two years, Smartphone usage increased from 29% to 50%. This increase in smartphones has also been accompanied by tablet sales looking to overtake PC and notebook sales. 

This means that companies designing websites for just the PC are going to bring a poor user experience to their customers, unless you love the  annoyance of scrolling left and right just to read a page.

 Above is the website for the video game developer Square - Enix. The website delivers a pretty dull - useful but dull - utilitarian user experience. On paper, it should be a great site. It has sections for community news, social media feeds, even a section to find concert locations where music from their games will be performed. In reality... not so much. To be fair, it does have a floating left scroll bar but that's hardly cutting-edge responsive design.

To get a real sense of how responsive a website is, you need to move from PC/laptop to phone & tablet browsing.

Now here is the same page as viewed from phone browser... sigh...

The website on the phone is identical to the browser version. You must scroll up/down/left/right to view the page in its entirety. This is a poor example of responsive design. There are no differences between browser and phone. For this to be a true responsive design, the site should have been minimized for the phone, banner head picture shrunk and made to one fewer column.

What few things the browser page had going for it have gone out the window with the mobile page. You still have the floating scroll bar with the mobile navigation but everything else remains the same. This site becomes even less useful when trying to view it from a mobile device.

It is becoming easier and easier for companies to create response sites so the fact that sites do not make it becomes that much more egregious. Companies, get with the picture!

Do you have any favorite examples of good/bad responsive design?