The design of a mobile website impacts its ability to rank in organic search results. Mobile design controls the availability and readability of text, the usability of navigational elements, and even access to entire pages critical to organic performance.
What follows are eight mobile design factors that impact organic search rankings.
Mobile Design
1. Template space for text. Each page template should contain areas for descriptive text. Examples include product pages, product grid or browse pages, parent category pages, and the home page.
Descriptive text helps communicate relevance to search engines. Without it, ecommerce pages are largely a collection of product names and links, which, by themselves, hinder your ability to rank for high-demand, non-branded keywords.
Mobile design controls the availability and readability of text and the usability of navigational elements critical to organic performance. This image shows a mobile wireframing process.
2. Text versus images. The words on your pages should be indexable text and not just embedded in images (Instead, float the text over images.) Your text can use brand-friendly fonts and still be indexable.
3. First-pageview visibility. Google downgrades the value of a page if visitors cannot immediately see the content. For example, text hidden in tabs or accordions that a visitor needs to click to read may be considered less valuable by search engines.
Conversely, these content-shortening elements help the user experience in some cases, such as with long frequently-asked-questions pages. Use your judgment. Don’t use these design elements if the primary benefit is to keep the content out of the first pageview. Instead, place the text in a less prominent location on the page.
4. Readability. Text should be visible and easily readable — large enough and high contrast compared to the page’s background colors. Moreover, all page elements should be visible within the device’s width without horizontal scrolling. For large tables and charts, provide a downloadable screen capture for detailed analysis.
5. Content engagement opportunities. Visual elements such as headings, lists, relevant images and diagrams, and tables and charts promote engagement with the page and make the content easier to absorb. Search engines are learning to detect engagement elements for use in their ranking algorithms.
6. Completeness. Navigational elements can be tricky to replicate on a mobile site, to the point that some ecommerce sites cut deeper navigation links out of the mobile site’s sitewide header altogether.
Unfortunately, because Google crawls the mobile version of your site like a smartphone browser would, if you leave links out of the top navigation, large swathes of the site don’t benefit from a sitewide header link. Whenever possible, include the entire header and footer navigation in your mobile site.
7. Finger taps. The width of the average finger is about .35 inches, or 9 mm. If buttons and clickable link elements are closer than this, shoppers will have trouble selecting the option they want. If it is too small, make the tap target larger or add space surrounding it.
8. Predictable click results. Make the result of clicking on a button, link, or image consistent with what users expect based on other sites. Consider also the action users will take after seeing the result of their click.
For example, when a shopper clicks on a product image using a mobile device, it should reliably open the product page. Don’t pop up a window with a tiny “x” to close it.
Test Usability
Remember that the mobile experience is already cramped and slow. Shoppers’ attention can be hijacked easily by other sites and apps. Any frustration on your site’s mobile experience could be their last.
To test your site’s mobile usability, visit Google’s Mobile-Friendly Test Tool.
