Recently I have spoken at a few events about how we can start to reimagine how we design and build our responsive sites, focusing on two areas; content and performance. These two areas are interlinked in that we want to provide the best content we can for our users and deliver it to their devices as fast as possible. As the first of a few blog posts I intend to write, I want to explain how we can go about prioritising content across devices on a responsive site.

To start with, I want to explain why we should be focusing part of our time on our content and for this I will quote Bobby Anderson, a man who says it much better than myself:

“Content is king, it always has been and always will be. Content is why users visit your site, subscribe to your newsletters and follow you on social media. Content is the single most important aspect of your website…”

The original article this is from can be found on his blog. What Bobby’s quote tells us is that when embarking on a new project we should start by prioritising time to prepare and optimise our content. In practice this means we need to know our content before we can start to put our wireframes together, because our content informs the structure and design of our site. To do this you need to work with your sites stakeholders, whether this be your product owners, project managers, copy writers or client to ensure that you have your content up front.  While not always possible this is what you should strive to achieve.

When putting this content together, we need to be thinking about how our content will work across a wide variety of devices and upon bringing it all together we need to start prioritising our content. Typical responsive techniques have seen content prioritisation being considered as an overall piece rather than in the context of individual device types. In reality, what users are trying to achieve when on a site will likely differ based upon the type of device they are using.

Content Prioritisation in Practice {.p1}

A simple example of where the priorities of a user visiting our site differs across different devices is a restaurant. This is a good example because there are big differences in what users are trying to achieve when visiting a restaurants site. For the example we will use a fictional restaurant called NanChick, I apologise in advance for the designs as I am a developer not a designer.

As we typically build our sites mobile first, we will start with how the sites looks on a small device first. Typically on a mobile device the site is being used to get to the restaurant and/or to get in touch to cancel or make a booking. We therefore can prioritise these elements in our design, leading with the phone number as part of the header, and then providing clear call to actions which take the user to the parts of the site that provide directions and allow them to make a booking.

NanChick

On a larger device however, they are more likely wanting to research what the restaurant is about, looking at the atmosphere of the venue and the different kinds of food it offers on the menu. These shifted priorities mean we need to reorder the content of our site to put more of a focus on these areas, using imagery to convey the atmosphere of the restaurant and prioritising call to actions that link to the menus first.

nanchick-desktop

Hopefully this example has shown you how content prioritisation works in practice, in the next section of this article we will look at how we can implement this content prioritisation.

How do I implement content prioritisation?

To reorder content based on the type of device we use CSS Flexbox, which arrived on the web in the form of the CSS Flexible Box Layout Module Level 1 Specification. The Flexbox specification offers a lot when it comes to layout (if you want to learn about all the layout problems it solves check out Solved by Flexbox) but for content prioritisation we actually only need to use a small part of the spec that looks at how we order content.

To illustrate how to use Flexbox to order content we will take a very simple example where we have two blocks; one of which is more important for mobile and the other that is more important to desktop. The first thing we need to do is put together our HTML. For this we will will place our two blocks insider a wrapper. As we are building our site mobile first, we will place our mobile content first and then follow with our desktop content, the resulting HTML will look like this:

<div class="wrapper">
    <div class="better-content-for-mobile">
        I am more important on mobile
    </div>
    <div class="better-content-for-desktop">
        I am more important on desktop
    </div>
</div>

Having setup our HTML, we now need to reorder the blocks on larger devices. In order to do this we will first define a media query which targets devices with a minimum viewport width of 768px.

@media only screen and (min-width: 768px) {
}

Having defined our media query, the next step is to add the CSS for our wrapper. As we are using Flexbox we will need to set the display property to flex, this tells the browser that the wrapper is a flex element. The next thing we need to define is the direction in which our content is sorted, to do this we use the flex-direction CSS property. This property can have the values row, column, row-reversed, column-reversed and inherit. In the case of our example we want to stack our elements so we will set the flex-direction to column.

@media only screen and (min-width: 768px) {
    .wrapper {
        display: flex;
        flex-direction: column;
    }
}

The final step is to set the order on our content. Children of a flex item can have a property called order which allows us to specify the order in which the elements should be displayed, in this case we will set our desktop element to have an order value of 1, and the mobile element to have a order value of 2.

@media only screen and (min-width: 768px) {
    .wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .better-content-for-desktop {
        order: 1;
    }

    .better-content-for-mobile {
        order: 2;
    }
}

Browser Support

So what about browser support? When it comes to FlexBox browser support, the answer to this question is a bit more complicated than a simple yes or no. This is because Flexbox went through several versions with some browsers implementing older versions of the specification first. What this means to us as developers is we need to support both the old syntax and the new systax in our code to maximise browser support. So, all that said a quick look at Can I Use reveals that the following browsers have some kind of support for FlexBox:

  • Internet Explorer 10+
  • Google Chrome
  • Safari
  • Android Browser
  • Chrome for Android
  • Opera

I need to support old IE

As a developer, we will often be told by our clients we need to support specific versions of browsers, the most common example being support for Internet Explorer. Unfortunately as we saw earlier, Internet Explorer does not support Flexbox in versions 9 and below.

The reason many of us are building mobile first is that we are embracing progressive enhancement, mobile devices often more underpowered than larger devices and have the smaller screens. We can apply this progressive enhancement approach to prioritising content but when it comes to FlexBox our mobile devices are not the least capable but instead its our older browsers. We can therefore choose to treat our older browsers as the least capable and order our HTML in the order we want to achieve in our older browsers.

<div class="wrapper">
    <div class="better-content-for-desktop">
        I am more important on desktop
    </div>
    <div class="better-content-for-mobile">
        I am more important on mobile
    </div>
</div>

We can then use our media queries to reorder the content on smaller devices. In this case we are simply switching around our media query so it targets small devices and swapping over the order so mobile content is first.

@media only screen and (max-width: 767px) {
    .wrapper {
        display: flex;
        flex-direction: column;
    }

    .better-content-for-mobile {
        order: 1;
    }
    
    .better-content-for-desktop {
        order: 2;
    }
}

In Summary

So hopefully if you have got this far you will now understand how we can prioritise content differently on different types of device. In this tutorial we looked at using media queries which targeted the width of the device, however you could choose to prioritise content differently using other media expressions such as those for orientation and pointer.

If you found this useful please leave a comment.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more