Responsive, Mobile Friendly Web Design
Jakob Jenkov |
As more and more mobile devices (smart phones and tablets) are being used to browse the web in addition to desktop computers, our websites increasingly need to be viewable on these mobile devices. The websites have to be mobile friendly, so to speak. Mobile devices often have a much smaller screen than a desktop computer, and are often operated via touch instead of a mouse and keyboard.
One early solution was to make a separate, mobile friendly website optimized specifically for mobile phones and tablets. The advantage of this approach is that you can optimize the website just for mobile devices. But this approach has some drawbacks too. First of all you need to program every function twice. Second, some mobile websites left out features that were present on the desktop website. That meant that some users got a bad user experience looking for features on their mobile which they had seen on the desktop version of the website, but which had been left out of the mobile version. Third, having two websites with the same content can be bad for SEO (Search Engine Optimization), since Google may punish websites with duplicate content.
Responsive web design is an alternative to having two versions of your website. Instead of having two versions optimized for different devices, you have a single website that adapts itself (responds) to the device it is being viewed on. This saves you the trouble of developing the website twice, gives a more consistent user experience since all features are present (unless you explicitly hide them on some devices), and it is better for SEO.
A responsive web, mobile friendly web design relies on a set of core principles:
- Fast Loading
- Viewable
- Touchable
- Actionable
Mobile devices often have limited bandwidth. That means, that if your website is slow to download, users will get annoyed and will perhaps not use it. Therefore you need to think about making your website fast to download.
On both desktop and mobile devices it is natural for users to scroll vertically, but annoying to scroll horizontally. This is even more true for mobile devices. Therefore you have to make sure that your website's content is viewable with little or no horizontal scrolling. Mobile devices have smaller screens than desktop computers which means you will have to resize and stack the content on mobile devices to make it fit their smaller screens.
A mobile friendly website has to be touchable. Links and buttons have to have a size that is easy to hit with a finger. Smaller links, icons, buttons are not a problem to hit using a mouse, but it can be really hard with a finger.
In addition to being easy to touch, the most common actions must be easy to perform without too much clicking and scrolling around. That is what it means that the website has to be actionable. This is especially a challenge on the smaller mobile devices.
All of these principles will be discussed in more detail in their own texts in this tutorial trail (see top-left part of the page for a list of pages in this trail).
Responsive Web Frameworks
There exist some CSS / JavaScript frameworks already which can help you create your responsive website design. Some of the popular of these frameworks are:
I am also working on my own JavaScript based framework for responsive web design, but it is still too early to tell if it will work well in practice. It seems to work fine for my current prototypes though.
| Tweet | |
Jakob Jenkov | |
