Responsive Design Challenge: Content Prioritization

September 27, 2014/ Evan Kirkwood / Uncategorized / 1 comment

Determining what content is most important and how to arrange it to reflect priority is a challenge in web design for any device, but becomes even more difficult when considering a responsive web design.

A site designed with Responsive Web Design techniques dynamically changes layout depending on the screen size and orientation of the device being used to view it. The fundamental techniques, as described in Ethan Marcote’s Responsive Web Design – proportion-based grid layout, flexible images and media, and CSS3 media queries – may appear to be the perfect recipe to design for a wide range of devices, from smartphones to large-screen displays. A single website delivered to a range of devices is not, however, without it’s challenges.

Differences in device sizes and interaction techniques, and use in different contexts with varying motivations add additional parameters that are not addressed by the fundamental Responsive Web Design techniques alone. Consider a typical rearrangement of content on a responsive site when viewed on a desktop versus a smartphone:

The content sequence remains consistent, with the columns arranged from right-to-left on on the desktop view becoming stacked top-to-bottom on a smartphone-sized display. On the desktop, the content block on the right side of the page (block number 4 above) is highly visible on the screen, and would be suitable for high-priority content. On a smartphone, a user would need to scroll through several screens before reaching this content, making this a less than ideal placement for important information.

A mobile-first approach to content prioritization can be an effective starting point to counter these challenges. Thinking about the importance of information in mobile use cases – what should be the most easily discoverable, what could possibly be hidden by default, and what may not be needed at all – can guide positioning content for optimal mobile user experience. Mobile device users expect equivalent functionality and content, however, so it’s important to avoid the temptation of eliminating content and over-simplifying the mobile interface.

Collapsing content, or moving it to secondary screens can make content available while reducing the amount of information a user needs to scan on one screen. The example from Wikipedia, below, illustrates this – the first, summary section is displayed, but each secondary section is collapsed under its heading. The easily scanned list of headings allows a user to quickly understand the content that is included in the article, and the content is never more than one tap away.

If context of use changes enough between desktop and mobile use cases, it may be desirable to rearrange content. This can be achieved with the CSS3 Flexbox. For example, the following CSS could be used to order content blocks laid out in columns left to right on a wide display:

#container {
    display: flex;
}
#content1 {
    order: 1;
}
#content2 {
    order: 2;
}
#content3 {
    order: 3;
}

Now, let’s say we want to rearrange the order of our content blocks in a smartphone-sized view so that the content from the third column on a wide display appears second, and therefore higher on the page when the content blocks are stacked vertically. We can use the order properties inside a media query targeting smaller displays:

@media only screen and (max-device-width: 480px) {
    #content2 {
        order: 3;
    }
    #content3 {
        order: 2;
    }
}

Simply by changing the order property on the content elements, we can reposition the content for an ordering that is more appropriate to the mobile experience.

A word of caution on CSS3 Flexbox – the implementation of this feature has undergone an interesting evolution, and although current browsers support the new specification (with a prefix in the case of Safari), implementations in older versions vary, and IE had no support at all until version 10. Mobile browser support is generally good, though, so a strategy of laying out content according to desktop priority, and rearranging for mobile can be effective. CSS-Tricks provides a “Complete Guide to Flexbox” that goes into all the gory details for browser support, and even provides a convenient SASS mix-in to help out with browser specific prefixes.