When designing a responsive website, you can’t just think of the way it looks. You also have to design the content. When the page display shifts when viewed on different device sizes, so too does the content layout. That’s what you also have to design for and test: how does the content display on each device size, and how does a person review it?

Here are some tips for planning content on a WordPress website. I’m sure this could apply to all sites.

Widgets

One of the best features of WordPress is the ability to add widgets. It’s an excellent way to add functionality to a site. There’s a caveat, though, for mobile access as well as some tablets. Keep it in mind as you design your site or are updating the content. While widgets may appear as left or right columns on a larger screen, they may not display until after all other content on a phone or tablet.

Sidebar Widgets

In many designs, these will end up at the bottom of your screen on a phone. You don’t have the right side of the screen. For all intents and purposes, on your phones, the right column doesn’t exist. This may also be the case for tablets, or for portrait vs. landscape viewing. It also depends in part on the theme or design you’re using.

When determining what content should go where, keep that in mind. You probably don’t want to overload a footer widget area, as people then need to scroll down. I used to put more information in sidebars, but have cut back for this reason.

Think about that: your sidebar widgets may ultimately end up at the bottom of your page on the phone. Sidebar widgets appear first, then footer widgets. If there’s something you want to display first that’s in a sidebar, consider putting it in the main page content area.

Footer Widgets and Bottom of Page

Add a navigation menu at the bottom of your site. This gives people a quick way to visit other pages on your site without having to scroll back up. Or, add another call to action in the footer.

Determine the Content Order

Because the sidebar and footer information will be at the bottom of the screen in some instances, you really have to plan the sequence in which content is displayed. If you have multiple sections, you may need to have just a few items from each section so people can scroll through everything.

It depends on what you want to share. Have the most important content appear first. Is it your latest posts? A newsletter signup form? What do you want visitors to see first? What will encourage them to keep exploring the site or scrolling down the page on their phone?

To plan this, set up your site so that the most important content is in the main area of the site. That’s what displays first. Determine the number of items to include in sections in the main area.

Images

Images are now used in multiple ways.

Navigation

Think about using images instead of text for your navigation. Check on varied devices to see how the images resize.

Background

Images that fill the screen as the background is becoming more the norm. Large photos or background extending across the page is another common option. In responsive design, these resize well. They have much impact visually and enable you to showcase some aspect of your business. It can be tricky to find the right picture, though. Find one that resizes well on varied devices and works well with the other content on the page. Don’t assume that you can put any picture up and that it will just work.

Content on Pages

Less is more.

Websites use a much cleaner, lighter design now. They’re light on content, too.  Many have quite a bit of white space. That can result in a bit more scrolling, but the design is such that it’s not much to wade through.

Chunking

For readability purposes, it’s best to keep sections short. That’s particularly true for mobile phones. Here are some tips:

• Break content up into smaller “chunks”
• Keep sections short in length
• Use subtitles
• For blog posts, use summaries

Summaries

For blog posts, use summaries on website pages. It enables you to include more posts and is in a smaller chunk format. People can scroll more easily on a phone. Some themes are optimized for this type of display. News themes in particular make use of this. As I mentioned earlier, it’s important to determine the order of content. By using summaries, people can see more content.

Planning

There are many considerations for content. If you have questions about planning and designing content to work on all devices, contact me! I can help.