What Makes a Good Mobile Website Design

Mobile-first refers to an initial focus on mobile UX, which is then adapted for the web. The method is considered less buggy than a top-down approach where the order is reversed.

There’s a reason the mobile-first approach has become the ideal. Smartphones are ubiquitous and by 2020 they will number 6.1 billion according to research conducted by Ericsson.

Mobile use is increasing year by year. Four years ago Google recognized this by making mobile-friendliness a ranking signal. The search engine actually provides a tool to help designers test how mobile-friendly web pages are. But before you can do that, there are some things you ought to know.

Factors to Consider

Above all else, a good mobile design reflects on your workplace. It helps establish trust between potential customers and your business. A healthy website, on a subconscious level, infers to users a reliable business and healthy workplace.

Screens

Mobile website design has to take smaller screen sizes and limits to full site navigation into account. Texts should be easy to read. Buttons should be big enough to tap and far apart enough to not cause frustration. MIT recommends a minimum button size of 10mm x 10mm. Experts recommend a distance of 10 pixels between buttons.

There are hundreds of different smartphone models and various kinds of tablets. Responsive web design is a way to counter this. Responsive websites are built to adapt to the devices they’re being accessed on and are consistent across platforms.

But consistency doesn’t necessarily mean they’re optimal. For example, with a mobile-first approach, zooming in is not necessary like it tends to be with responsive sites. Font sizes use points instead of pixels.

It’s also worth noting and accommodating websites that are accessed via mobile devices without a touch screen.

Data Costs Outside Your Home and Workplace

Leave the confines of your home or workplace and reliable WiFi may be hard to come by. Data costs money. More so in some countries than in others, but a considerable amount nonetheless. Don’t even get started on roaming charges. Loading large websites and complex media elements can burn a hole in the same pockets where people keep their phones.

Mobi Site Necessities

Speed

Mobile users can be relaxing on a couch or they can be, well, mobile. When they’re on the move, searches are often for the hyper-local. The address of a place they want to go to, or reactions to things they see in their environment which they want to comment on or buy. There’s an expectation of speed in these moments which designers have to cater for.

• Fewer page loads help, as do compressed images and files. If you can, leave out the videos and animations altogether. Whatever you do, don’t use Flash videos.
• Install caching plugins, and free CDNs to provide only relevant content.
• Install SSL certificates. The HTTPS protocol not only secures your site, but it also serves as a ranking signal and boosts speed.
• Install WordPress plugins to minify HTML and CSS.

Simplicity

Mobile UX prompts companies to figure out which content is vital. If your website exists before your mobile site, you might need to do some chopping and changing. Mobi sites need to be similar to their web counterparts – we don’t want to make people completely relearn the lay of the land when they switch from one asset to the other. But they don’t need to be identical in terms of layout or extraneous content. The aim is a clean but effective design.

• Simplify navigation. Visitors need to be able to find important information and respond to calls to action without much effort. They also like being able to get back to the homepage easily.
• Copying and pasting phone numbers and email addresses between screens is annoying and can affect your conversion rates. Google recommends using click-to-call/contact links so that reaching out to businesses is as easy as pie.
• Typing on mobile devices is usually more tiring than on desktops, so streamline forms. Where possible, cut down on the number of fields and inputs that need to be made. If your form can’t be shortened, break it up into approximately three separate steps for submission. Even if a visitor aborts the mission, each submission will provide lead information. And remember, autofill is a boon – use it where you can.

Spacing

Smartphones have gotten bigger and bigger over the last five years. Where a thumb might once have reached all parts of a screen with ease, it can now only replicate that ease in central parts of screens. Position core content accordingly, preferably above the fold. Build swiping in where it’s more convenient than tapping buttons.

Remove your navigation bar if you find it’s taking up a disproportionate amount of the screen. A lot of mobile sites condense and move nav bars to the top left of the screen.

Place ads towards the bottom or sides of your screen. There shouldn’t be hurdles for visitors to dodge when they’re seeking information. Interstitials and pop-ups are discouraged for the same reason. They can negatively impact your SEO.

Scrolling

Horizontal scrolling is anathema to mobile-friendliness. Avoid this scenario. Don’t say we didn’t warn you. Be sure to work within the ambit of a single column.

Selling

Search boxes should be visible and not tucked away in menus. The same goes for filters to help users narrow down results in eCommerce stores with many products.

Provide high quality, expandable product images, particularly for clothing and apparel. People want to know exactly what they’re spending their money on. There’s nothing worse than anticipating the arrival of something only for it to look different to expectations. Your products are the endgame, the bread, and butter. If they don’t look good, what’s the point of refining other elements?

Study

Put your design to the test. Don’t just run the site through software to test for mobile-friendliness. Get actual humans to use it to spot flaws that might have sprouted up due to designer myopia. Test out the UX on different devices and operating systems, on Chrome and on Internet Explorer (for the 3% of internet users who still use this browser). It goes without saying that you should carry out these tests before you ever show finished sites to clients.