We use a responsive design for seattlechildrens.org. This means all content scales to the screen size of a device. Desktops and most tablets show the full desktop version of the site, and smartphones show the mobile version.
As content scales to fit the screen, elements on the right-hand side of a page shift to the center and move under all the content in the main body.
This scaling effect requires us to prioritize content in a new way so mobile users can find the most essential information they need. As a bonus, when you prioritize for mobile, you are also creating a better experience for desktop users.
Outside of the tips below, it’s always good practice to be direct and concise in writing.
Tips for Prioritizing Content
- Move essential information into the main body of the page, preferably at the top. This includes moving vital information out of the sidebar and documents such as PDFs.
- Avoid using tables. Most table styles used on desktop will not fit a standard mobile screen, and requires mobile users to move the table around to see the rest of the information. This in turn forces mobile users to rely on memory when trying to understand anything that’s not fully explained within the viewable space.
- Avoid information clutter. Evaluate whether related content items are necessary and directly related to the main content. Excessive content blocks can overwhelm and distract people.
- For content with bylines, put the byline at the bottom of the content unless the author is famous or has credentials that support its credibility.
Questions about optimizing your content for mobile? Contact email@example.com.