Designing content for the mobile-first index

You are here:

Face it: You’re not a literary author, and people aren’t hanging on to every word you write. Don’t get me wrong, it’s great to have comprehensive information on a web page, but users also don’t want to scroll forever — especially on mobile.

Content on mobile needs to make it easier for users to get to the main points without cutting out the content, as users might want to dig into the details more at times. More than ever, the structure of your content is important, and your content needs to be navigable, skimmable and digestible.

A table of contents is a great way to show how you have organized your content, and combined with HTML bookmarks, it allows users to quickly jump to sections of a page that may interest them. For instance, my table of contents for this article would be:

Table of contents
HTML headings
Expandable content
Tabs
Filters
Summary, highlights, TL;DR
Bullet points or lists
Bold or italic text
Highlight important points
What about desktop?

One of my favorite implementations of this is the Google Developer documentation, where you have the navigation right below the title and can quickly get to whatever section you need. They even made it expandable so it doesn’t overwhelm a user immediately.

HTML headings

HTML headings, or heading tags, help organize your content into sections, structuring your page in a logical manner with h1 – h6. The topical subheadings of this article are wrapped in h2 tags, while the article title itself is wrapped in an h1 tag. The heading tags make the content easily skimmable and are good targets for anchor links in a table of contents.

Expandable content

Expandable content areas (also known as “accordions”) are typically used for more details or FAQ sections. They are a great way to keep a page shorter and easier to navigate, while still enabling access to important information. Google Webmaster Trends Analyst Gary Illyes has stated that content hidden for UX reasons will be given full weight in the mobile-first index, whereas the desktop index slightly discounts this hidden content.

See how Lowe’s does this with the product description, specs, reviews, Q&A and documentation all there on one page — yet it’s not overwhelming, even to a mobile user. If they had all of this content expanded by default, I would be tired of scrolling before I got to the bottom of the page.

Tabs

Tabbed content is used less on mobile because of space limitations, but this is an alternative to expandable content. It serves the same purpose, which is to hide content that may not be needed right away. See how Staples lets you see the description, specs, and reviews while keeping the content all on one page.

Filters

Filters are an easy way to cut out large parts of the content that a user may not be interested in. By giving them the option to see only what they want to see, you are making it easier to find the information they are looking for without going through all the cruft to get there. One of my favorite implementations of this visually is Northcutt’s Google Ranking Factors.

Summary, highlights, TL;DR

Don’t have time to read a story? How about just taking in the main points of the article quickly? This helps on-the-go mobile readers quickly digest your content and determine if they want to read more in depth. I commonly see this being done on news, financial and sports websites, where the most important information can be summarized in a few points. Here’s one from CNBC: