Considering Content in a Responsive Web

The web is more accessible than ever. We now access websites from hundreds of different devices; everything from web-enabled HDTVs to tiny smartwatches. Our canvas to create media is now infinitely more scalable! We’ve talked about writing content for the web vs. print before, but now we’re going to specifically address how the flexibility of the responsive web space affects how we craft content.

Layout

More than half of all internet traffic is from mobile devices. Most of the time, your users are viewing your content in a single column. Is the information you present with text and images still understandable in a single column? When a grid layout begins to simplify, is the content still in the right order?

There is a design philosophy of Mobile First web development, where the needs of a mobile user are considered first, and the larger views are considered a bonus. You don’t need to fully subscribe to a Mobile First strategy, but be sure to consider the mobile experience as just as important as the desktop views.

Tip: Before entering your content into your webpage, plan it in a Word document. Put everything in a single column and use proper headings and lists. Then take it into your website’s page editor and add any additional responsive formatting as needed, without changing the order of elements.

Text Wrapping

Unlike those who work with print media, web content creators cannot control where lines break, or how text wraps around images. In a responsive design, the width of the text’s container adapts to the width of the webpage, which means the text area will be different sizes on different screens. On some screens, your text will fit neatly onto four lines. On others, it will spill over onto five or six.

The same thing can occur when text wraps around an image. Depending on the size of the image and the length of words in the text, words could wrap in ways that leave unsightly gaps.

Tip: Create page layouts that can accommodate any amount of text. Then, once the page is published, test it on a couple of different devices or by resizing your browser window. There are some web coding techniques that can mitigate text-wrapping issues, or perhaps simply rearranging content will produce a more consistent experience.

The Key

It all boils down to flexibility. Strict content layouts that rely on exact word counts or pixel values can hinder a page's ability to respond. Content that does not adapt properly can distract from your intended message and limit your audience. Broaden your reach and communicate more effectively by keeping flexibility in mind.

If you need help or have any questions about responsive web, contact us today!