The use of tablets and mobile phones to browse the Web is increasing each day. For an ideal user experience, a website must offer content easily read on different screen sizes, with links and buttons easily mouse-clicked or finger-tapped. There are two ways to do this: responsive layouts and dedicated website versions.
A website can be designed and built in HTML and CSS so that its layout changes automatically based on the screen’s width. For example, three columns become two or one, the navigation changes to an interactive button, images resize, buttons reshape so that a finger can tap them, etc.
See how it works: resize your browser
This website is responsive! On a desktop or laptop computer, resize the width of your browser and see how the layout rearranges itself. (Internet Explorer 9+ and latest versions of Chrome, Firefox, and Safari.)
Dedicated website versions
There are several situations where it is better to create two or three dedicated versions of a website—desktop, small tablet, mobile phone—each with its own user interface design and content structure.
- The website has a complex navigation system.
- It has a very large number of pages.
- The content elements cannot easily be reorganized in a new layout.
- The total download size slows down a page’s rendering on a mobile network or penalizes users with limited data plans.
Often the phone and tablet versions can be limited to basic information with references to the desktop website for more details.
See examples of responsive and mobile website designs in my portfolio.