Mobile Website Design
We now live in a mobile-dominant world, in which the majority of search traffic now comes from mobile devices. This has transformed the marketing world, making mobile websites an absolute marketing necessity.
In general, there are three possible configurations for serving mobile content:
- Responsive design: fluid, proportion-based grids that shrink or grow, depending on the viewport being used to access the data.
- Adaptive design: this serves the same urls, but different HTML code, depending on which device is accessing the data.
- Separate mobile site: this method hosts a completely separate mobile version (different URLs and content) on a subdomain of the desktop site’s URL.
With increasing importance placed on mobile sites, Move Ahead Media often uses a mobile-first design approach. This means designing from the outset to make sure that mobile pages aren’t bogged down by long load times, and heavy-loading graphics. More importantly, users should not need to zoom in and out to read!
Best mobile design practices
No matter which approach you decide to take when making a mobile version of your site, the following Move Ahead Media mobile design standards are worth adhering to.
Make a simple and concise menu structure
Mobile users can’t be expected to scroll through large menus or click through multiple sub-menus. Therefore, it is important that mobile menus provide a broad overview of products and services, which allows users to gradually narrow down to the specifics of what they are looking for.
Ideally, a mobile menu should have around 5 menu items, which should provide enough options for users to drill down through. In terms of style, the hamburger menu is the industry standard.
Design short and simple forms
Completing forms on mobile devices can be a drag, a risk that might compel user to opt out and search anew using a PC. Therefore, when designing mobile forms, it’s important to only ask for the absolute minimum amount of information.
For example, newsletter signups should never ask for more than a name and an email. Even on payment forms, try to keep the form fields to a minimum, or else risk losing sales.
A good way to test the ideal form length is to set up an A/B test, to gauge the success or failure of different configurations.
Design compelling calls to action (CTA)
Calls-to-action are especially important on mobile. In contrast to desktop PC users, mobile users generally have a clearer idea of what they are looking for. Therefore, placing CTAs in valuable spots on the site can be very effective. For example, CTAs are more easily detected by users when placed above the fold, using contrasting colours and striking fonts.
Make the contact form easily accessible
For business websites, providing customers an easy means to get in touch is essential. On mobile devices, this means having a click-to-call feature displayed prominently on the site. Accessible from the contact form, it is also a good idea to set up an FAQ page to answer common questions – if users need to know more, they can then reach out.
On the contact form, also consider embedding s responsive Google map with the location of your business – users can zoom in, find directions and easily find your location when they need to.