Tuesday, July 17, 2012

Responsive Design VS Mobile Websites

As said in a previous post mobile devices are becoming one of the largest internet/website market there is, and developers and designers must adapt to it.

(...) In 2010, Steve Jobs once again took the stage and expressed Apple’s vision of a new device that would exist between a smartphone and a computer. This device, Steve expressed, would need to do some tasks better than either a smartphone or a computer. Web browsing was the first of these tasks to be identified and Apple unveiled the iPad tablet to address this task.

Like smartphones, tablet devices are now becoming widespread and creating opportunities and challenges for website administrators. Tablet devices have mid-sized screens (between a smartphone and a desktop display) and rely on touch-based interfaces. (...)
in cmswire.com 

Back then (only 2 years ago!) emerged a new form of website, the Mobile Website. Witch is a different version of the same website that previously existed but optimized to these machines, that have less memory, processing power and screen resolution then the average machine. The user will not have to scroll (at least horizontally) to navigate, will have larger buttons press with his thumb and simpler input text's to fill. This may be the exact same website with (almost) the same functionality but with a completely different layout, behavior and Domain! Usually a mobile version of www.mywebsite.com would be m.mywebsite.com, this different version almost NEEDS a different domain (note: almost, because you can code around it) witch is, lets say, not scalable. There is another disadvantage of this technique: multiple devices. Yes we all know iPhone's resolution (and dpi) but the market its not iPhone, its ALL of them: iOS, Android, Blackberry and Symbian (and a few others). The mobile version of the website would be the same in all devices (regardless of the resolution) and in vertical and landscape mode, this means if your website is optimized to an iPhone it wouldn't look as good in an iPad and even worse in iPad in landscape.

The solution to these problems comes with Responsive Design!

What is Responsive Design?

Responsive design "responds" to the current resolution of your client: if it changes along the usage, the layout itself changes with it. This means that you have as many different layouts as many resolutions you want to cover: you can have two different layouts for an iPhone (vertical, and landscape), the same is true with the iPad! If you work with the largely used screen resolutions you have (almost) all possibilities covered, and your website will work fine in every device.

How to achieve this?

Media queries. These are CSS rules that define exceptions for the layout, it detects resolution changes and changes the other CSS rules to fit your goal: no horizontal scrolls. And stated previously it also may change the size of your buttons and input texts to fit usability challenges. A good technique using responsive design is to hide irrelevant content to increase the relevance of the important content, for example instead of a big logo you can crop the image (showing just PART of it but with the same relative size). This way you show everything there is to see in your website in a smaller screen with usability limitations (the user does not have a mouse and keyboard, only a touchscreen).

*In addition the the current tutorials I'll be posting some guides about Responsive Design and cross browsing with some basic techniques.

1 comment:

  1. Nice blog Tablet Press machine, Tablet Press, Rotary Tablet Press, Pharmaceutical machinery, Tablet Dies and Punches.