Content First

Andy recently published 320 and up, a fork of Mobile Boilerplate that inverts his previous boilerplate media queries i.e. now it starts with the small-screen styles and layers on the styles for larger widths, rather than beginning with larger-width styles and nullifying them for smaller screens.

This is definitely the best way to apply width-specific styles, be it with media queries or with JavaScript. But I get a little nervous when I see pixel values that correspond to specific device widths: 320 pixels, 480 pixels, etc.—it’s certainly an improvement on relying on one mythical width like 960 pixels, but I worry that it still means crafting the display of content to match the dimensions of currently fashionable viewports. This is what Mark describes as the “canvas in” approach:

It’s my belief that in order to embrace designing native layouts for the web – whatever the device – 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.

Now it may well be that your content is pixel-based—images or video perhaps—and the dimensions happen to correspond to the viewport widths of specific devices, but in my experience most of the content I deal with is still very much of the written word variety …and pixels aren’t necessarily the best unit for dealing with text. That’s one of the reasons why I tend to use em-based media queries.

My basic point is that it should be the content that dictates the media queries. For some sites, it might be appropriate to only serve up a linearised layout to very small screens while applying a columnar layout for slightly larger devices like tablets. For other sites, tablet-sized screens should get a linearised layout—it all depends on the content.

One of my favourite examples of content-out thinking is Dan’s article on type-inspired interfaces. 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. Likewise in the world of wireframing and information architecture, when we should be concentrating on the content we often gravitate towards designing the menus and navigation first.

This is something that Luke talked about with Jared recently, mentioning his design principle of “content first, navigation second.”

Luke Wroblewski — Designing Mobile Web Experiences » UIE Brain Sparks on Huffduffer

Luke has famously advocated a mobile first approach to web development, which is a great way of focusing on what’s most important to deliver to the user. But don’t take it too literally. In some ways it would be equally viable to try out “print-stylesheet first” or any other “non-desktop environment first” strategy. The key point is that you’re thinking about the content first and foremost:

Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters most.

That isn’t to say that you can’t serve up some extra nice-to-have content to wider screens, but that should be added on—possibly with conditional lazy loading—rather than having everything including the kitchen sink thrown in from the start.

Mobile web design has already established a number of excellent best practices whereas traditional “desktop” web design has become the domain of laziness and complacency. The result is a web of bloated documents with buried content, as documented in Merlin’s Flickr set, Noise to Noise Ratio:

Sure. There’s definitely some excellent original work in there — in the middle of all those ads and self-links and chrome and value-added “journalism.”

Yeah. Keep looking. No, seriously. There’s gotta be something in there.


NTNR - All Things Chrome Inspiration, of a kind

There’s a general agreement that the “mobile” user is not to be trifled with; give them the content they want as quickly as possible ‘cause they’re in a hurry. But the corollary does not hold true. Why do we think that the “desktop” user is more willing to put up with having unnecessary crap thrown at them?

Unnecessary page cruft is being interpreted as damage and routed around with tools like the Readability bookmarklet, Safari’s Reader functionality, and Instapaper. These services exist partly to free up content from having a single endpoint but they also serve to break content free from the shackles of stifling overwrought containers. This isn’t anything new, of course; we’ve been here before with RSS. But the existence of these new reader-empowering tools should be taken as a warning …and a challenge—how can we design for our content in such a way that the reader won’t need or want to reach for Readability or Instapaper?

Some of the worst offenders in creating bloated content-crushing designs—often news sites—have separate mobile versions, usually at an m. subdomain. There the content is served up without the frills, cruft and pagination of the “desktop” version. I’ve started noticing that when people are sharing links—via Twitter, email, or whatever—it’s often these leaner m. versions that are getting passed around …precisely because they are often easier to read, no matter what device you’re using.

We’ve been here before, as I pointed out in a comment to Paul’s misguided post on mobile design:

In the bad ol’ days, it was common practice to create a “separate but equal” text-only site for screenreader users. It ghetto-ised those users and it was, frankly, a cop out. These days, it’s understood that screenreader users should get the same content as everyone else, but that the site should be built the right way to begin with. (interestingly, some sites noticed that “regular” non-screenreader users were choosing to go to the “accessible” version because it was faster and simpler—there’s a lesson to be learned there for those who still think of desktop and mobile sites as different things)

Needless to say, I disagree completely with this proclamation from Jakob Nielsen:

Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile.

I’m perplexed by the reasoning that concludes that if a website is suffering from clear usability issues, the solution is to create a splinter site for some users while leaving everyone else to suffer on. Note that I’m not suggesting that everyone get the same experience—far from it. Thanks to progressive enhancement (and let’s face it, responsive design done right is a perfect example of progressive enhancement) we can serve up the content that people want and display it to the best ability of any particular device.

That’s the key difference: start with the content, not the device.

This is a really exciting time for web design. The increasing diversity of devices is throwing into sharp relief just how complacent and wrong-headed our traditional fixed-width bloated desktop-centric approach has been. As with any period of change, there’s plenty of nervousness too. People are scrambling to figure out how best to deal with mobile devices:

  • “Should I be learning Objective-C?”
  • “Should I be mastering HTML5?”
  • “Should I be learning a mobile app framework?”

You could be doing any or all of those things. But don’t skimp on the content strategy.

Reminder: the usual caveat applies.

Have you published a response to this? :


Heinz Wittenbrink Web teacher and blogger, living in Graz and sometimes in Dubrovnik.

Die FH Joanneum will im kommenden Jahr mit einem neuen Auftritt ins Web gehen; wir sind intensiv bei den Vorbereitungen. Grundlegend ist eine Content-Strategie, für die vor allem Brigitte Alice Radl schon sehr viel gearbeitet hat (Präsentationen hier). Klar ist auch, dass wir der Devise Mobile first! folgen werden. Viel zu spät bin ich auf eine Linie im Webdesign gestoßen, die man am besten mit Content first! überschreiben kann. Contentstrategie und Priorität für das mobile Web kommen in ihr zusammen.

Aus den Texten, mit denen ich mir einen ersten Überblick verschafft habe, habe ich eine kleine Leseliste zusammengestellt (bei Readlists hier; dort können die Texte als E-Book heruntergeladen werden). Sie umfasst vor allem einführende und programmatische Texte. Zu den Details gibt es inzwischen erste Bücher.

Der Schlüssel zum Thema waren für mich die Session Notes for Jeffrey Zeldman’s Ten Commandments of Modern Web Design, die viele Links enthalten. Zeldmans Vortrag selbst kann man sich hier anschauen und anhören. Es geht darin um viele Themen, aber im Mittelpunkt stehen die Priorität für den Inhalt, das device-unabhängige Design und die Abkehr von dem Gedanken, dass in einer Website Inhalte in ein fixes Gerüst eingepasst werden, das eine komplizierte Navigation als Wegweiser braucht.

Zeldman selbst verweist auf A Richer Canvas von Mark Boulton als grundlegenden Text. Boulton fordert darin ein Design, dass nur von den Formaten der Inhalte ausgeht und sich völlig unabhängig von bestimmten Screengrößen macht. Man könnte auch sagen: Es geht um ein Design, dass die Orientierung an der Seite endgültig aufgibt. Es ist klar, dass ein solches Design es vor allem mit Typographie zu tun hat.

Content First von Jeremy Keith formuliert die Forderung nach dem Primat des Inhalts ausdrücklich als Programm und Devise. Das Wort Inhalt bezieht sich dabei nicht nur auf die semantische Ebene von Texten, Bildern und anderen Medien, sondern auf ihre visuelle Gestalt. Der Inhalt steuert die Container, in denen er präsentiert wird. Die User sollen so viel wie möglich mit den Inhalten zu tun haben, die sie auf Geräten mit einem Touch-Bildschirm direkt manipulieren können.

In die Tiefe geht der Dialog Designing Mobile Web Experiences zwischen Jared Spool und Luke Wroblewski. Hier wird explizit formuliert, dass bei einem Content first!-Design die Navigation eine sekundäre Rolle spielt. Die Interaktion mit Texten und anderen Inhalten soll so wenig wie möglich durch andere Interface-Elemente gestört werden.

Luke Wroblewski hat Jeffrey Zeldmans Keynote Content First knapp und thesenartig zusammengefasst. Eines der zentralen Statements:

How can we create designs that don’t get in the way of content but still communicate a personality? This is the challenge for designers working on the Web today.

Hier in Österreicht bekennt sich Jürgen Liechtenecker zu Content First statt Mobile First—bisher der einzige deutsche Text auf meiner Liste. Auch Jürgen stellt die Verbindung zur Content-Strategie her.

Wie sieht die Entwicklung einer größeren Website aus, wenn man der Devise Content first! folgt? Zwei Blogposts zeigen die Vor- und auch einige Nachteile aus der Sicht der Agenturpraxis: Designing With the Real Deal von Ross Berenson und Content-First Website Development: A Real World Experiment von Paul Chamberlain. Hier wird Content first zeitlich verstanden: Die Inhalte sind da, bevor der Designprozess beginnt. Beide Posts sind ermutigend.

Noch ein praktisches Beispiel: Media Query-less Design, Content-based Breakpoints & Tweakpoints von Dave Olsen. Olsen zeigt in einer sehr leicht nachvollziehbaren Weise, wie Content-basierte Stylesheets aussehen können. Olsen beschäftigt sich übrigens intensiv mit mobilen Strategien für Hochschulen.

Abschließend noch ein Hinweis auf das Buch Mobile First von Luke Wroblewski. Ich werde mich zunächst dort und bei Dave Olsen weiter zum Thema informieren.

Previously on this day

11 years ago I wrote All Our Yesterdays

Opening up Bamboo Juice 2009.

13 years ago I wrote POSH Patterns

Not everything has to be a microformat.

13 years ago I wrote The Dunbar number of the beast

My invisible friend has a bigger Dunbar number than your invisible friend.

14 years ago I wrote Natural language hCard

You can use the hCard microformat in plain English sentences.

16 years ago I wrote Irish spring break

I’m back in Brighton after my short break in Ireland. For those of you uninterested in travelogues and holiday snaps, look away now.

17 years ago I wrote About this site

I’ve updated the "About" section of this site to include a new page about this site and how it was made.

18 years ago I wrote surRealpolitik

Ah, France.