Information: This post is written by Fredrik Strömberg, Creative Director at Bonnier Tidskrifter, and continues the last post about why media sites are broken with taking a look at how to fix them. The posts are written in english, not least for all our collagues around the world.

The product design process for the new sites have been really traditional – since we have a product out on the market today we have a solid foundation of usage data to stand on and to create a joint understanding from. So, by combining the route we want to take, which the previous post is all about, with what we know (or at least what we found out) about today’s user behavior it was really a task of putting the pieces together in a very methodical way.

The device fragmentation challenge is the one putting the strictest demands on the very foundation of the site, the grid. Since we know that responsive sites are the way to go right now we have to create a grid that really is mobile first and expands in a constructive way. And since we also know that we want to create a controlled environment that lends itself to much more relevant data collection about user behavior and content effiency it also stresses the fact that the grid must be super-structured.

Boxes on white paper – a grid that works

s

Grid basics/desktop

We had to combine a responsive and flexible grid with the standards of the advertising world. And as luck (no, it’s not luck of course) will have it these things actually go together perfectly. The 980 width business standard ad format and the 960 grid system works well together. A small mistake that a lot of media sites have been doing is padding the 980 format to create sites that are 1000 or perhaps 1020 wide. And that messes up all internal divisions of the grid. Since we are going for full width ads – 980 hits the outer markers of the site and with 10px gutters we’re in that comfortable 960 place.

One-column content pages

One of two defining characteristics of this new grid is the one-column content page. Yes, that’s right – for all break points we are presenting all content in a one column layout. This has two implications: It makes the chosen content really stand out, and the reader can be served a great content experience. Also, it makes it a breeze to make this equally good at all break points.

Responsive/tablets and smartphones

The video shows a bit about removing unused content and the how the grid transfers between break points.

Even if the ”mobile first” ethos is one we adhere to we actually start the grid work, as stated above, with the desktop. Why? Because there really are no challenges with a smartphone grid – since it’s almost exclusively a one-column affair. But what is worth mentioning here – and that’s a lesson everyone building responsive sites that are actually meant to be a business, not the ones building repsonsive sites per se. Don’t give a damn about what happens when geeks (like us) are resizing the browser window to see how everything scales and moves between break points. Care about the break points that matter. In this case: smartphones and vertical oriented tablets (horizontally orientated tablets gets the full blown version). This makes up, ehhh, 100% of the mobile market. So, design where the action is.

Everything that is surfaced on the grid exists on all break points – we don’t remove any parts of the site on any break point and all ad spaces exist on all break points. This ensures us that we are giving the user the ”same” product regardless of what device they’re using.

We’re doing really simple stuff with the responsive design: scaling and re-shuffling, so to speak. What is vertical row of teasers in the 980 grid break point may become a ordered in a column in the 320 grid break point. We try to avoide too much ”card-stacking” of content into swipe areas, that is really popular. For some types of content it makes sense, like an array of blog teasers. But for most instances it’s a really strange UX, why should I swipe if I don’t have the slightest idea of what is next, which could be the case of swipeable teaser areas.

Horizontal AND vertical teaser grid

The other thing that makes this grid different from most media sites today is the fact that all start pages and start page sections reside on a vertical grid, with fixed height elements. This is something web design on media sites usually shy away from, with regards to flexibility and work load. We think it usually has the effect of making everything more or less look like shit – and that should be reason enough to do it differently. It is really not that hard to make a headline the correct length or an intro to fit into a certain space.

What the vertical grid gives us is a lot more full width spaces, both for content and for advertising. It also makes for a much more controlled environment where follow-up and analysis of ad creatives and editorial content effiency becomes simpler.

No double commercialization

The anatomy of a Bonnier Tidskrifter banner – king of the screen.

One important task with the grid is also to make sure that we’re not double commercializing any screens. An ad should not have to compete with another ad. This is not so much a structural decision as it is a business one – but none the less the grid has to be constructed around such decisions.

Made for infinite scrolling – adapted for pages

One really important thing about this grid is that it’s really made for a site that does not rely on page views as a proxy for advertising inventory, instead it’s mainly constructed around the two central concepts of teasers and content. If you want to see more of what content exists on the site, you should just continue to scroll, with ”infinite pages”, lazy loading and ad deliveries ”on demand” we could ensure an amazing user experience whenever the market is ready to go to that kind of business proposal.

The same goes for content pages. There exists a fixed order of the content – why couldn’t we offer the reader the possibility of having a more laid back experience in the future, where they go from article to article if they choose so? There’s always the option of just going back to the teaser page anyway.)

Design choices for a changing world

s

Design in the box

The design process becomes kind of simple once you’ve settled on a responsive web site. When you, like us, run a lot of sites it’s even more important to keep the brand communicating design elements safe ”inside the box”, so to speak. Before we used to rely on passive, backdrop like, brand conveying elements, but with the responsive approach there exists nothing (or close to nothing) outside of the content carrying areas.

So now focus becomes more on typography and color choices in the small details, and we think we’re better off that way. The whole design becomes less cluttered and actual content – editorial and advertising – get the chance to shine.

Structure navigation for responsive design

One of the main challenges when doing responsive sites is to make the navigation simple enough to also be able to work in the mobile environment. Navigating through a hugely complex web site on your smartphone isn’t really what most of us wants. But the site structure is just one aspect – the other is more of a design issue and it’s how to create a navigation UI that can travel between break points easily. And also, how to create a navigation UI that in a, basically, one column layout can harbor more than one set of functionalities.

For us the solution to the latter problem was to create what we call a ”sticky contextual menu”, which is a sticky menu bar – pretty standard – that changes it’s content depending on where on a page you are – not so standard at all. What this means is that each page actually start with the main navigation for the site – but say for instance a search page has much more navigational options; filtering et cetera. Those pages actually get an additional menu bar, which docks to the top as the user is scrolling down towards that search result area of the page. Previously we would have stuck the search options and navigation in a left or right column – but now we’re substituting it in the top menu bar. In short this means that the navigation always reflects the content that it floats over.

Use contrast to create a dynamic environment

The human brain responds well to contrast, if we see something out of the ordinary we sharpen our senses and react. When everything becomes really one-note and dull, we tend to become bored and lose focus.

Creating dynamics is something we’re really good at in print, we play with size, color and wording. But online we tend not to – and attribute that to web technology and SEO matters, to scratch a bit on the surface. In reality it’s a bit more complex and a lot of it comes down to our muddled view of the distinction between product and process. But that’s a story for another time.

I have been toying a lot with the concept of ”false contrast” in the planning of these new sites – and what that is, is nothing more than editorial teaser details that makes you stop and look.

Think of them as virtual stop signs for your eyes. They are full width, one column teasers that design-wise deviate from the surroundings. We place them strategically – surrounding ads, for instance, to create that high-engagement surrounding.

Focus on reading – not clicking

s

Focus on consumption

The single most radical concept of this re-make is to try to switch both the product and the business model from a click-based product to a consumption-based product. The main question being: How can we make more money from people reading than from people clicking?

My best example on how this will play out are the image galleries, traditionally an amazing harvester of page views – and a crappy user experience. If we have a business model that doesn’t hinge on page views, we can instead present the images after each other on a scrollable page, right? And with  a one column layout this means we can give them ample room from the beginning without resorting to lightboxes and the likes. And the ad slots fit nicely between the images and captions – a native, nice and functioning user experience. Once again – with the focus on getting ads viewed, not just delivered, we create a better product for the reader.

Removing unpopular information

In order to make a clean, uncluttered and content focused product we need to edit – and edit hard. And with the web medium we really have a chance of doing that – since we know what people actually read, click and consume. And do you know what – when we look at what content (teasers, articles and the likes) that people really are consuming it’s dead obvious that almost anything that is ”machine made”; most read lists, most commented list and the likes are almost unused in our context. The same goes for too detailed navigation and for passive content, such as ”like us on Facebook” widgets. This is the stuff we’ve used to fill up all those other columns – and when we remove the columns, we can remove the unpopular content too – for a better and less cluttered user experience.

Plan content for maximum usage

When you start monetizing reading (the mechnical term will be scrolling) instead of clicking the focus from the editorial staff will also shift towards the actual performance of the content – not just how ”click-worthy” said content is. What this, hopefully, means is that we will get a better basis for describing editorial quality and not get caught in what creates the most mouthwatering teaser. What this could mean is that longer, more worked through material actually creates a better business than short, cheap pieces. This is not the case in online media today, far from it. And it all hinges on one thing and one thing only – our ambition to create a high performing ad environment. Remember – this is really a time when the advertiser’s needs and the reader’s wants are one and the same thing.