Web Wednesdays: Web Design For Mobile Devices

If it’s been a while since you last spent much time even contemplating the design of your site, you might’ve easily overlooked just how profoundly the user experience (UX) and search engine optimisation (SEO) landscape has shifted away from desktop, and towards mobile in recent times.

Indeed, it was way back in 2016 that Internet usage on mobile surpassed that on desktop for the first time. Furthermore, Google is among the many key players to have noticed and adapted to this change, with its shift towards ‘mobile-first’ indexing – in other words, ranking sites primarily on the basis of their mobile, rather than desktop sites.  

So, the very fact that Google is adapting to the mobile Internet change, means your firm needs to do the same with its own online presence. Indeed, such has been the shift in emphasis over the last few years, that web design for mobile devices can now be considered the most important aspect of designing a website.  

What Are The Key Features Of A Mobile Website Design? 

The fact of the matter is that today, all websites should be designed to be practical and aesthetically pleasing on all mobile devices – including the various different models and sizes of phones and tablets that have flooded onto the market over the past decade. 

So, here are some of the features that we would especially suggest being incorporated into a mobile web design. 

• A responsive design. A ‘responsive’ site is one that adapts to whatever size of screen it is viewed on. The idea is that the content and information on the site stays the same, but is displayed and arranged differently depending on the specific device used. Such a design is, therefore, one of the most profound things you can do to make your website more mobile-friendly, as it’ll enable your mobile visitors to enjoy all of the same content as desktop users. It’s also good news for your brand’s SEO, Google having described responsive design as its preferred format for mobile websites. 

• A hamburger menu. Now, this is an interesting one, because of the often widely varying opinions that prevail about the usefulness of this navigational element. A ‘hamburger’ menu is so-called because it visually takes the form of three horizontal lines resembling a hamburger, which the user can click or tap on to open up a more comprehensive menu. It’s often inadvisable on a desktop site because of how it can hamper the ‘discoverability’ of your site’s navigational options, with some visitors likely to not even notice such a modest little icon. On a mobile screen, though, where space is naturally at much more of a premium, a hamburger menu could be instrumental in ‘tidying up’ the design of your site. 

• Larger buttons. When you’re browsing a desktop site, it’s relatively easy to click on a button of basically any size. It’s a very different matter on the much smaller screen of a smartphone, though. As a mobile user, you might find yourself ‘missing’ smaller buttons on a website when you’re trying to tap on them, and if there are several small buttons next to each other on the given site, accidentally pressing the button next to the one you were aiming for can be especially annoying. So, think Duplo bricks with your mobile site’s buttons, rather than the traditional Lego bricks that might suit your desktop site. 

• Bigger font sizes. It can be much harder to read text on a mobile display than on a desktop monitor, so you’ll want the fonts that you use to be sufficiently large to be easily legible. Aiming for a font size of at least 14 pixels is a good rule of thumb, although we’d suggest that you test out how it looks, to assess whether an even bigger size may be preferable. It’s also advisable to use a standard font so that the visitor’s browser won’t have to download it, as well as to place dark text on a white background, rather than the other way round. 

• Compressed and flexible images. Images should always be a key consideration in web design for mobile devices, given that – if anything – mobile users tend to be more ‘on the go’ in nature than desktop users, and therefore less patient. So you won’t want your mobile site to be bogged down by uncompressed images that also serve to lengthen loading times. Also be sure to give your users the option to zoom or enlarge product images, so that they can get a better view; if you do, it’s more likely that they will be able to examine the product sufficiently to convince them to purchase from you. 

From the layout of your site’s pages, right through to its links, navigation and images, there are many aspects of web design for mobile devices that need to be carefully considered, not least given the impact on the given site’s UX and SEO prospects alike. 

Call the Success Local team today on 01788 288 800, and we’ll be able to work with you on many of these aspects to ensure your site delivers the best possible performance on both desktop and mobile.