“Mobile-friendless” is the word of the year for webmasters – well, it’s technically a compound a word. Google announced earlier this year that it had updated its search ranking algorithm to boost the ranking of websites that cater to mobile users. So in other words, if you have a mobile-friendly website that loads and functions on smartphones, you can expect to see a slight boost in your Google search ranking.
But designing a mobile-friendly website isn’t always an easy task. Just because a website functions properly for desktop users doesn’t necessarily mean that it will do the same for smartphone and tablet users. Mobile devices may feature different screen sizes, resolutions, operating systems, web browsers, and user preferences, all of which affect the rendering of webpages. So, what should you consider when designing a mobile website?
Separate Mobile Domain vs Responsive Web Design
One of the first things to consider when designing a mobile website is whether to use a separate mobile domain (e.g. mobi.yourdomain.com or yourdomain.mobi) or a Responsive Web Design. Many webmasters assume that a separate mobile domain is the best choice, simply because it separates the mobile and desktop version of their website. However, you have to remember that maintaining a separate mobile domain means the twice the work. Each time you create a new piece of content on your desktop website, you must do the same for the mobile domain version.
A smarter solution is to use a Responsive Web Design, which does not require a separate mobile domain. Responsive websites are built using a combination of CSS3 media queries and proportion grids to create a fluid, fully functional viewing experience on all devices, regardless of whether it’s a desktop or smartphone.
Layout and User Experience
What kind of layout do you plan to use for your mobile website? If the layout contains too many navigation bars, columns, and/or scrolling elements, it may deter mobile users from viewing it. According to the experts at Mashable.com, single-column layouts are generally the best solution for mobile websites. It eliminates unnecessary elements by optimizing the site’s usage of space in the best manner possible. Single-column layouts can also help with cross-device scaling, as well as alternating between portrait and landscape modes.
Layout is all about the user experience and with such a small design area prioritizing features and content is essential. As stated in UXMatters,
“For smartphones, the most popular screen resolution is 320×480. Therefore, it’s usually necessary to sacrifice some of a Web site’s features and content when designing a mobile version of the site, so users can easily find the ones they really need. You must give priority to the tasks and content users are most likely to use on a mobile device. “ It’s worth checking out their examples here: http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.php
Call-to-Action
The call-to-action (CTA) is arguably one of the most important elements of a website, mobile or desktop. This is essentially the button or form that you want visitors to click. When designing a mobile website, it’s recommended that you make the CTA as large as possible. You have to remember that most mobile users are using devices with a 5-6” screen on average; therefore, it can be difficult to tap small buttons.
In addition to making your mobile call to actions large, add:
- Color in order to make them stand out.
- Urgency like “pay now”
- Add “Click to Call” in case a customer has trouble during checkout.
Like all things online, the landscape changes dramatically with technology, which means that while these guidelines will help you in shaping a solid mobile experience, don’t forget to test your mobile site with different CTA’s or elements to improve your users’ experience.
