As we approach the third decade of the 21st century, everyone understands how websites display on desktop computers. We’re all familiar with top menu bars and hyperlinks, and the full-screen appearance of landscape web pages is comfortingly familiar.
Mobile website design is rather more challenging. Because sites are often designed on desktop computers, mobile compatibility has to be engineered separately. This is often an unintuitive process. And although most web traffic is now accessed on handheld devices, entrepreneurs and first-time site-builders can’t be expected to understand the nuances and complexities of ensuring a website looks dynamic on a smartphone screen measuring less than three inches in width. That’s especially true since the same site has to look stylish on bigger monitors, too.
Fortunately, mobile website design isn’t a mysterious process. No longer does it involve a separate m.dot site – those stripped-down platforms apologetically presented with prominent “click here to view our desktop site” hyperlinks. These are our tips for ensuring a new website looks equally good on an iMac or an iPhone…
1. Adopt a responsive template.
This automatically resizes web pages to suit the screen resolution of the output device, compressing menu bars into drop-down hamburger buttons and resizing images. Using UK2’s dedicated Website Builder tool offers hundreds of templates that will look equally slick on a Samsung Galaxy, for example.
2. Use large buttons.
The precision of a desktop mouse is replaced by the clumsiness of a fingertip and on screens a fraction of the size. Large and well-spaced buttons are an essential component of successful mobile website design. Always simplify the process of returning to the last page, in case people tap the wrong part of the screen.
3. Minimise code.
While desktop computers generally connect to broadband routers via Ethernet or WiFi, mobile devices often rely on flaky 4G connections. Every custom font and CSS will slow loading times even more. Strip out unnecessary code and minimise the use of plugins on WordPress in mobile website design to slash loading times.
4. Keep pages short.
More content displays on a desktop web page than on a phone screen, forcing mobile audiences to do a lot of scrolling. Slabs of text elongate pages, so structure your content like a journalist. Put key points at the top, and crop unnecessary content off the bottom, with navigation at the top. Avoid single-page sites altogether.
5. Eliminate floating content.
Search engines have begun downgrading websites that use hover buttons or interstitial adverts, ranking sites on the basis of these pop-ups rather than what lies beneath. This ruins SEO performance. Exit pop-ups don’t incur the same penalties, but should also be approached with caution.
6. Use large, readable fonts.
Phones and tablets often download content over sluggish connections, so avoid bespoke fonts requiring installations. Maximise readability with sans-serif fonts of 14pt or higher, and beta test the site on multiple devices to ensure text displays legibly. Stick to Sentence case rather than writing in capital letters.
7. Compress graphics.
A normal smartphone JPG will be several megabytes, while BMP files are an order of magnitude larger. Compressing graphics by up to 90 per cent won’t affect their presentation even on a Retina display, while mobile templates resize images to suit output display resolution. Also, do not allow video content to autoplay.
8. Simplify navigation.
In the absence of peripherals such as a keyboard and mouse, site navigation is often tricky on small screens. Ensure that the homepage is always one finger-tap away, and let ecommerce customers return to browsing rather than being trapped in checkouts. Use short, concise and unambiguous page titles and menu headings.