Top 10 Tips for Designing a Mobile-Friendly Website
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
According to Juniper Research, more than 577 million users access the Internet from their mobile phones – and this number is expected to increase to 1.7 billion by 2013. With so many visitors viewing your site on their mobile phones, you need to know how well your site works with today’s smartphones and other mobile devices.
Chances are, not so well. But don’t take my word for it, check it out yourself. Grab the nearest web-enabled mobile phone, fire up the web browser, and browse to your normal website. How’s it look? Not too good, probably; the home page is probably too wide and the elements too small to view comfortably. What fits comfortably on a big computer screen is overkill on a mobile screen.
It’s not just about looks, either. Website functionality needs to be different -- simplified, actually -- for mobile users. That’s because it’s more difficult to navigate a website on a cellphone than it is on a computer; you don’t have a mouse to move around with. For that reason, a mobile website has to be navigable with fewer clicks than a traditional site.
If you want your website to be usable by the millions – soon to be billions – of people using mobile devices, you need to create a version of your site that works with these mobile devices. But how do you do that?
It’s not difficult, especially if you can put yourself in the place of your mobile visitors. To that end, here are ten tips you can apply when designing the mobile version of your website. Your on-the-go visitors will thank you for it!
Tip #1: Orientation Matters
Pages on the traditional web have a landscape orientation with horizontal menu bars, as users typically have widescreen computer monitors. Cell phone screens, however, are more portrait or vertically oriented. This means you need to reorient your web pages to fit the format of the mobile screen.
Take, for example, BMW USA’s traditional home page. It has a lot of different elements, all organized to fit on a widescreen computer monitor; it’s definitely a landscape orientation.
Compare that to the company’s mobile page. The items on this page are presented in a vertical list, to match the vertical nature of the mobile phone screen.
)
Figure 1 BMW USA’s traditional home page -- horizontal content for widescreen viewing.
)
Figure 2 BMW USA’s mobile home page -- fewer elements, arranged vertically.