In mobile interfaces, a lag of a few seconds really does mean the difference between a customer or reader visiting your site and…going elsewhere. Responsive design became the law of the land just few years ago, but as of February 2016 we are also now faced with the Accelerated Mobile Pages standard. What’s a small business to do just to keep up? Here are the key points to know for the near future – or at least the next 10 minutes. SEO services can help identify what your site is doing well and what needs improvement.
The difference between mobile friendly and AMP
Mobile-friendly pages are those with responsive design, which most companies now sport. It is simply the same site served differently. However, we’ve all encountered those supposedly responsive sites that try, but fail, to display properly on a mobile device – think icons crashing over photos, text that doesn’t fit properly, or pages that require a ridiculous amount of scrolling.
Accelerated Mobile Pages is an open-source code initiative that blocks out certain elements of a site’s code in order to allow that site to load almost instantaneously. It is explained well on the AMP site itself, which also has good guides for developers and designers. So far, AMP is not being used as a ranking signal, so you won’t be ‘punished’ by Google for not incorporating it, but no one should be surprised if AMP-friendly sites start throwing their weight around in 2017.
AMP could be a huge benefit for online retailers, allowing customers to browse and complete their purchases quickly, but it means being extremely judicious in your choices for design and content.
Here are design and content tactics that make for a good mobile experience:
Choose the right font and background colour. Repeat: Readability is king! Fonts that have thin verticals or are narrow are not easy to read when writ small. Sans serifs have become the popular choice because they are no-nonsense, and you’ll want to choose one that has consistent weights horizontally and vertically. Further, use only left-aligned text (for Western language sites) – this makes it easy for readers to track and prevents the often awkward appearance of left- and right-justified text blocks.
Your tests prior to a launch or redesign should have readability as a focus. People read mobiles at much closer range than computers, so you should take that into account as well.
To make it easy on yourself and your developer, remember to always favour the user experience.
Make great meta. Get right to the point and stay within the character counts for meta titles and descriptions. Let readers know straight away what they’d see on the page from they’ve found in their search. The user experience starts with their search results.
Video no, good photography yes. Videos that don’t load – ie Flash on many mobile devices – annoy your prospective buyers, and AMP is really strict about how it allows for video. Make your product photography as clear as possible.
Size buttons correctly. Design buttons that aren’t too big or too small. Remember that screen sizes still vary widely, as do finger sizes. Again, consider the user experience: shoppers don’t want to accidentally choose the wrong colour or size or hit Buy Now when they don’t mean to.
Keep menus simple. Don’t create menus for mobiles that pop out of sub-menus. Generally, design menus that are easy to open and close, keep them under 10 lines long, and set them in a large and easy-to-read font.