Sidepodcast // All for F1 and F1 for all

Next race: Chinese Grand Prix, Shanghai

The shape of things to come // Magazine-like layout comes to the web

Published by Mr. C

If you upgraded to Apple's latest mobile offering iOS 7 yesterday, you may have spotted a couple of unique page layouts in use on Sidepodcast. We've been experimenting with some up-and-coming web standards to see how they might enhance content readability and this new software release means we can finally try them out in public.

A whole new angle

CSS Shapes allow text to follow irregular paths

The first design makes use of the ability to wrap content around a geometric shape (in this case a triangle). This seemingly trivial functionality has long been difficult to achieve on an internet where pages are largely described in grids and boxes.

A contoured layout works especially well on small screen devices where an image might normally span the full width of the screen, pushing text beneath it. Irregular shapes allow text to flow through non-essential parts of an image, while leaving focal points of interest free from clutter. This can provide context where previous there was a visual disconnect.

Wrapping text around arbitrary paths is something I've been very much looking forward to experimenting with and we already have a great long list of places where we could put this to use on the site, both within articles and elsewhere.

The new, old fashioned way

CSS Regions allow text to flow between blocks

The second of the new designs is a little more complicated to describe, but essentially replicates the type of page layout you traditionally might expect to find in a printed magazine. Text can now span multiple columns and flow through specifically defined areas aiding the readability of otherwise lengthy material.

Magazine-like layouts such as this will enable us to present content in ways previously unimaginable on a website. Text can be formatted in easily digestible chunks while key information can be emphasised in a way that makes sense to the context of the writing. I've long been envious of the printed magazine's ability to provide unique page layout for specific articles and now those same concepts are to coming to the online world.

There is of course much more still to come. Standards are clearly still in flux, planned features have yet to materialise and as of today only one browser engine on one platform is shipping this functionality.

Both Chrome and Opera browsers annoyingly have an even more advanced implementation in the works, but have frustratingly opted to hide it behind user-configurable switches, while Internet Explorer has a slightly different interpretation under development. The only hold out appears to be Firefox which will presumably play catch up as usual.

Credit for pushing this technology into the spotlight comes somewhat surprisingly from the Adobe Web Platform team, and if you're interested in the nuts and bolts of the implementation, their site is an invaluable resource.

The future of web layout is just starting to get interesting, and we very much look forward to helping make reading about Formula 1 all the more enjoyable.




  • You continue to make me jealous with your mad stylesheet skillz, Mr C :)

    Although it's a lot more in your face than the type of magazine-lite presentation you guys are creating in such a subtle way, I really like how Pitchfork goes for the same type of magazine feel with their main cover features. Look at this with Daft Punk for example - it's an absolute joy to behold as it feels like an interactive magazine at times.It all makes me very excited for what's capable with the advancement of HTML5 too and the fact you guys are total geniuses with your design.

    I think it works better though that in Sidepodcast's case it's all very... calm with the colours, if that makes sense. It all flows very nicely but the columns and the ever changing experiments in how you include images in different ways make for really nice variety too.

  • I really like how Pitchfork goes for the same type of magazine feel with their main cover features.

    oh yes. snow fall is another example that pushed the boundaries - www.nytimes.com/p…s/2012/snow-fall/

    i wouldn't discount us from doing something along those lines in the future either. the thing we can do now, that was impossible previoulsy, is to create a completely unique layout for a single article. spend hours, maybe days designing and tweaking it, then only use it one time.

    in the past, every change had to take into consideration 5,000 archived posts, to be sure we didn't break anything. we don't even have to think about that now and it's quite liberating :)

  • in the past, every change had to take into consideration 5,000 archived posts, to be sure we didn't break anything. we don't even have to think about that now and it's quite liberating :)

    The future is awesome! I wish Marty and Doc told us about all this fancy new coding lark.

  • So awesome to see these upcoming CSS features being used for real. Thanks for putting in the effort to build the articles progressively enhanced!

  • So awesome to see these upcoming CSS features being used for real. Thanks for putting in the effort to build the articles progressively enhanced!

    a pleasure :)

    our current fallback for older browsers isn't perfect, but we're keeping an eye on this polyfill ;)

    https://github.co…-regions-polyfill

Comments closed to new entries.