2015 is the year when mobile becomes the preferred way to get online, with the desktop well on its path to being relegated to a relatively small niche in everyday computing. Google also continues to adapt its algorithms in order to deliver a better experience to users of mobile devices by rewarding mobile-friendly websites with greater visibility in mobile searches. Every business website must offer excellent mobile usability for the sake of enhanced search engine exposure, increased conversion rates and more. Consider the following ways to improve mobile usability:
1 – Use a Responsive Theme
If you use a content management system, such as WordPress, Drupal or Joomla, the quickest and easiest way to make your website mobile-friendly is simply to install a responsive theme. There are many such themes available, and most of them are free and highly customisable. However, while a responsive theme is fine for an informational website, it will rarely be good enough for a full-scale e-commerce website. For an online shop, you’ll usually be better off having a completely separate mobile version of the website.
2 – Use a Flat Design
For the last few years, flat, minimalistic designs have been the trend in the world of user interfaces, and websites are no exception. A flat design might not look as imaginative as a skeuomorphic design made to give the impression of a real-world object, but it does emphasise a focus on usability which, after all, is far more important. Flat, minimalistic designs tend to provide a better user experience across all devices, particularly when it comes to the touchscreens of smartphones and tablet computers, and such websites are often faster too.
3 – Configure a Mobile Viewport
One way to make a webpage responsive so that it scales correctly on the small screens of mobile devices is to define the viewport in the page’s HTML code. Without a viewport being defined, the webpage will simply be scaled down so that everything is smaller, and this quickly causes problems with readability and usability. You can configure viewports for different screen resolutions and window sizes by using the viewport meta tag. You can find a list of optimal viewport sizes for various mobile devices at viewportsizes.com.
4 – Increase Text Size
When Google analyses your website for mobile usability, they also take into account the fonts sizes that you use. Note that the viewport setting also determines how text is scaled down on mobile devices. Google recommends that you use a font size of 16 CSS pixels for the bulk of the content on your website, although you’ll obviously want significantly larger text for more important elements, such as titles and calls to action. For best results, stick to using the default, ‘medium’ value for the CSS font-size attribute, since this should be fine for content displayed on most devices.
5 – Keep Important Content near the Top
When it comes to landing pages in particular, it is essential that your visitors see the most important information as well as your call to action first. They should never have to scroll down to view essential content, and due to the smaller screens of mobile devices, there are significantly more restrictions in this regard. By using CSS layouts, you can keep your content arranged in order of priority as such that the most important content stays at the top, while the bulk of the page automatically stacks beneath it as the page is scaled down to fit the screen or window.
6 – Use Intuitive Icons
Icons are an important part of website navigation, particularly with regards to mobile devices where on-page space is at a premium. On the other hand, your navigational buttons also need to be large enough to be tap-friendly, so will need to find the right compromise between size and functionality. It is also important to make sure that your icons are intuitive and meaningful in such a way that visitors immediately understand what they do. Always use widely recognised symbols, and stick to flat icon designs to further improve functionality.
7 – Optimise Your Images
Browsing the Internet on a mobile device can still be a sluggish experience, particularly when connected to older 3G networks or busy shared WiFi networks. Additionally, the processing power of mobile devices is orders of magnitude lower than it is with desktop and laptop computers. To ensure that the user experience is not harmed by poor performance, make certain that your images are optimally compressed, and be wary of using high-resolution background graphics and other bandwidth- and processor-intensive visuals.
8 – Avoid JavaScript
Using JavaScript for your website’s navigation, like Flash, does nothing more than introduce a whole raft of problems, and it is completely outdated. Mobile devices are largely incompatible with such user interfaces, making content programmed in it completely inaccessible to mobile browsers. Additionally, the search engines are unable to index online content programmed in Flash or JavaScript, so your visibility in the search results will be minimal too. Always stick to HTML, since it provides device-wide compatibility as well as a great deal of versatility.
9 – Limit Text Input
Entering text on a mobile device is still a pain, in spite of great improvements in input methods over the last few years. When mobile users stumble upon a website that requires them to enter any unnecessary information, they’ll quickly turn away, and excessively long signup forms are a number-one reason for shopping cart abandonment. Keep the required text input down to an absolute minimum at all times, and both mobile and desktop users will thank you. Similarly, a shorter Web address can also help to increase traffic.
10 – Test Everything
Last, but not least, you should thoroughly test your website across a range of devices, including both tablet computers and smartphones. Google’s mobile-friendly test is a good place to start, but there are many other online testing services that allow you to see how your website appears in specific mobile operating systems and on difference device models. However, there is no substitute for thoroughly testing your website on an actual mobile device. Be sure to test multiple mobile browsers and operating systems to determine your website’s usability across all devices.
Leave a Reply
You must be logged in to post a comment.