Sidepodcast - All for F1 and F1 for all

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.