Content First: I want the good stuff and I want it now

The term 'Content First' has been bandied about for a couple of years now and over that time it has come to mean different things to different people. A common driver behind these variations is the concept of mobile first design. At least as far as thinking about how best to deliver content to smaller devices with limited screen real estate. Whilst there is certainly a confluence between these two approaches, I'll concentrate on the former here and write up a separate article on the latter.

Some of the different takes on content first that I have encountered include:

• Designing layout and interface with the actual content, i.e. not Lorem Ipsum.
• Prioritising content over navigation.
• Focusing the main content and removing superfluous sidebox content.

In my opinion they each bring some value to the table, and a combination of them all can bring yet more value.

Says who?

As far as I can trace back, this concept began with a blog post from Mark Boulton entitled A Richer Canvas. Mark points out that whilst there have been unquestionable principles for content layout in use for hundreds of years, these rules and methods begin with paper. "Paper that has edges, ratios that can be repeated." Designing for the web does not of course provide us with the luxury of a defined 'canvas' or repeatable page. Mark suggests:

"...we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out."

Shortly after, Jeremy Keith made a follow up post and coined the term 'Content First'. Jeremy talks mostly about layout here and in particular how that content can be presented differently on different devices. He goes on to say:

"I think there's a general agreement amongst web designers that we should be designing from the content out but there's still an over-reliance on canvas-in tools like predefined grids."

Regarding the limitations of screen size on mobile devices Luke Wroblewski, the originator of Mobile First, tells us:

"There simply isn't room for any interface debris or content of questionable value. You need to know what matters most."

Luke is also the coiner of 'content first, navigation second'. Which is to say, prioritise your content up front on smaller screens and minimise the navigation.

So what can we do about it?

From the off, start thinking about how you can deliver an optimal experience for users of smaller devices, phones, tablets, phablets (I guess it sounded better than 'tones'?), etc. This doesn't mean just thinking about your layout and navigation (although these are obviously important elements). It also means thinking about your content and specifically which content is important. This means finding the right balance of what you want to push out to your readers and what your users actually want. A little research here can go a long way!

Get your ruthless head on and cut the crud! Bin all that fluff that doesn't really need to be there other than for the purpose of filling a space on larger screens. Warning! As the power surges through your newly liberated self, carving through your content like a hot knife through butter...try not to get too carried away. If a side bar provides truly useful supporting information, then fine...it gets to live and see another day.

Once you have your optimised content, let's help your users to access this goldmine of information in an efficient way. When I load up a website on my mobile browser, I don't want to have to scroll down through swathes of site header artifacts like logos, taglines, search boxes, and let's not forget your all important site navigation. I want the 'good stuff' and I want it now! Or in other words, prioritise your content. There are various tried and tested methods of minimising the valuable screen estate used by your site navigation whilst providing a more meaningful user experience appropriate to that device. I'll get to that later in a Mobile First article.

The variations in layout and presentation that we have referred to here are possible through another much talked about design approach, Responsive Web Design. One of the key principles of RWD is the use of CSS media queries which allow us to define different styles that are 'triggered' when a condition is met such as a particular screen size. A lot of folk create these 'breakpoints' in their design based on common device screen sizes like 320px, 480px, etc. This however, has nothing to do with the content. It is the content itself that should dictate when the design needs to change as a screen becomes larger. Test how your content looks as you increase the screen size, and when it starts to look crap, insert a breakpoint and change your presentation to something more appropriate.

In summary, de-cluttering your content can really help you focus on what is important to your readers/customers/target audience and, more importantly, allow them to access this content more efficiently. Defining the breakpoints in your layout where the design fails the presentation of your content is more useful than just following assumed device dimensions.