Have you given a little thought to how important layouts are? After reading this post, consider any changes you’ll need to make on blogs, newsletters, websites, MailChimp emails, and other visual communication in order to help your readers see your most important content.

Above the Fold

Think of your blog or newsletter as if it is a newspaper. In general, your most important content needs to be “above the fold.” Your regular visitors will probably stay with you, scrolling below the fold, but what would you want first-time or casual visitors to see on your site? For passers-by, a clear summary of what your site is and a “call to action” is enough. (Don’t cram the area above the fold with too much.) Your call to action may be to subscribe to your MailChimp news or to donate to your ministry.

Reading is not that simple these days, with readers using computers or mobile devices of various sizes. “The fold” could be in several different locations, depending on the device. Don’t worry, you won’t have to own various tablets and phones to find out how your website looks on other devices. With my easy tip, you’ll check how your content is doing with “above the fold” on multiple devices just by using Chrome on your laptop or desktop.

Check Other Devices

Not sure if your site is mobile-friendly? To find out if your content is displayed correctly, here’s a simple few steps to view your site in various screen sizes.

If you know you’re using a mobile-friendly MailChimp template or mobile-friendly blog theme (also called a “responsive “theme), the developers have already taken various sizes into consideration for you. If you’re still curious, use the following steps as well. (I just used these steps to change the placement of a photo in this post before publishing.)

The Steps

Open your blog or website in Chrome (and even try this on your online version of your MailChimp email).

Right-click anywhere on the page and select “Inspect”.

Two windows open. The default view in the left window is your desktop / laptop view. Click the device icon in the right-side window (blue arrow).

After clicking, the left window now displays your page as if you were looking at it on another device. Choose any of a number of devices from the dropdown menu (red arrow). The following screenshot shows my results when I did this for eQuipping for eMinistry, choosing an iPad view.

Look at your site on a few different device views, scrolling through them to see what the experience is for any of your readers on their individual phones and tablets.

The Letter F Pattern

In addition to the “above the fold” issue, another layout consideration is the “letter F pattern.” Researchers have followed eye movements of readers and picked up a distinctive F pattern as their eyes move across a page. The author of F-shaped Pattern for Reading Web Content encourages you to:

• write the most important content in the first two paragraphs (that is, the two horizontal lines of the “F”)
• pack information into the first two words of the remaining paragraphs, subheadings, or bullet points as your reader scans down the stem of the “F”

I would also recommend a heading for the second bar in the “F” which will help increase your SEO, or Search Engine Optimization. (Choose headings that repeat a key word as well to improve your post’s visibility in search engines.)

Another good article is How to Make Content Scanners Happy with the F-pattern? by Monster Post with examples of layouts that work and those that don’t.

More about Layouts

In general, try to have at least your most important content appear on the screen before any scrolling. Scrolling is also preferred over paging. Be careful about sending your readers to other locations, especially outside of your website. They might not come back! So, decide carefully how to present a post with a lot of content. Would a series be better?

IMPORTANT: If you were scrolling left-to-right in the above steps, you really must upgrade to a mobile-friendly blog theme or MailChimp template. Your readers will also have this problem if they’re trying to read a PDF newsletter on a mobile device. See From PDF to MailChimp: Supercharge Your eNewsletters for my advice to switch from PDF attachments to MailChimp emails.

Additional Recommendations: 

• Is Above the Fold Really that Important? from CXL
• F-shaped Pattern for Reading Web Content from the Nielsen Norman Group
• Are People Browsing or Reading Your Content? by eQuipping for eMinistry

NOTES:

• If you’re working on a printed newsletter also be careful that any folds do not fall across faces in a photo.
• Over 80% of readers’ viewing time was spent “above the fold”. If you need to keep writing below the fold, have interesting content and writing style to keep them reading “below the fold.” See “How to Write with Flair by Cru staff, Heather Holleman.”
• What about Hebrew or Arabic? The studies applied to most languages. They didn’t thoroughly study languages which read right to left.
• Here’s a few easy tips for SEO help on eQuipping for eMinistry
• The photo of newspapers by Stefano Corso is available on Wikimedia Commons.