Sidepodcast // All for F1 and F1 for all

Next race: Russian Grand Prix, Sochi

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.

Buy from Amazon - Pocket F1 Handbook: Guide to the 2015 Grand Prix Season

365 F1 stories

Which driver was killed during qualifying for the 1973 US Grand Prix, held on this day at the Watkins Glen circuit?

F1 team launches
McLaren HondaOnline29 Jan
Sauber F1 TeamOnline30 Jan
Scuderia FerrariOnline30 Jan
Scuderia Toro RossoJerez, Spain31 Jan
Infiniti Red Bull RacingJerez, Spain1 Feb
Mercedes AMG Petronas F1 TeamJerez, Spain1 Feb
Williams Martini RacingJerez, Spain1 Feb
Lotus F1 TeamJerez, Spain2 Feb
Sahara Force India F1 TeamOnline25 Feb
F1 test schedule
Circuito de JerezSpain1 Feb
Circuito de JerezSpain2 Feb
Circuito de JerezSpain3 Feb
Circuito de JerezSpain4 Feb
Circuit de Barcelona-CatalunyaSpain19 Feb
Circuit de Barcelona-CatalunyaSpain20 Feb
Circuit de Barcelona-CatalunyaSpain21 Feb
Circuit de Barcelona-CatalunyaSpain22 Feb
Circuit de Barcelona-CatalunyaSpain26 Feb
Circuit de Barcelona-CatalunyaSpain27 Feb
Circuit de Barcelona-CatalunyaSpain28 Feb
Circuit de Barcelona-CatalunyaSpain1 Mar

On this day in F1 history