Putting the 'Art' into Article

Since its initial brief, the challenge for The Economist’s web app (https://app.economist.com) was to present the same slick interface as the newspaper’s existing iOS and Android apps, using just web technologies. As the project matured and we began to support a wider variety of device sizes and capabilities, we realised we were making significant compromises to the quality of the presentation, and indeed the legibility of the text. For a news publication with a loyal user-base and strong visual identity, this was not great.

With the application of a series of clever algorithms, a move to a constraint-based layout system, and a more mature relationship between the design, editorial and development teams, we were able to make drastic improvements to the layout and typography of the article view, and thus the immersive, tailor-made experience for the user.

Slide notes:

1. I’m a front-end engineer at the Financial Times. Going to be talking about a scheme of work I did earlier in the year which greatly improved the reading experience for one of our products

2. Spend most of my time working on the FT web app

3. Until recently, also the lead developer of the Economist’s web app
which launched four years ago.

4. https://www.dropbox.com/s/deiv9xv33melntf/Economist%20app%20demo.mov?dl=0. Working on the two projects side-by side allowed cross-pollination of ideas and technologies

5. At the FT, we've thought hard about what exactly an app is, and how that ap...

Transcript

1. Putting the ‘Art’ into Article @georgeocrawford https://github.com/georgecrawford
2. http://app.ft.com
3. https://app.economist.com
4. https://app.economist.com
5. http://labs.ft.com/2012/06/what-exactly-is-an-app/ • an immersive experience for the user • should work offline • An icon on the homescreen • No ‘browser-like’ elements, chrome or page loading behaviour • An interface designed for touch, with gesture interaction • Should seem tailor-made for the device, perfectly filling the screen What is an app?
6. the measure
7. http://www.historicpages.com/ http://designshack.net/articles/layouts/practical- tips-for-utilizing-columns-of-text-in-your-layouts/ http://www.garciamedia.com/blog/ financial_times_a_classic_redesign_for_the_digital_age
8. Wall Street Journal The Economist https://itunes.apple.com/gb/app/the-wall-street-journal./id364387007 https://app.economist.com New York Times The Guardian https://itunes.apple.com/gb/app/nytimes-for-ipad-breaking/id357066198 https://itunes.apple.com/gb/app/the-guardian/id409128287
12. https://en.wikipedia.org/wiki/The_Economist 1846 Print Digital
13. http://caniuse.com/#feat=multicolumn CSS Multi-column Layout
14. http://codepen.io/georgecrawford/pen/zGpdQN
19. https://github.com/ftlabs/ftcolumnflow FTColumnflow
22. https://github.com/ftlabs/ftcolumnflow
33. © Sarah Werner http://collation.folger.edu/wp-content/uploads/2012/03/Folger-Printing-22.jpg
34. http://dev.labs.ft.com/george/moltenleading/
35. http://georgecrawford.github.io/font-baseline/demo/metrics.html
41. • Images sized and placed appropriately • Save bandwidth • Balance of images and text on each page • Distribution of images through the article • Avoid monotony • Keep images near the text which references them • Allow editors and designers some control
42. • Use a ‘fuzz’ multiplier to account for uneven line-breaks • Estimate the length of the article text, in columns
43. • Original image dimensions • Aspect ratio • Max width & height setting • Max upscale/downscale setting • Estimate the length of the article text, in columns • Determine ‘ideal’ size of each image
44. • Minimum horizontal/vertical gap • Avoid collisions • Minimum column height • Random placement to avoid monotony • Maps & charts close to the text which references them • Different rules for first article page • Estimate the length of the article text, in columns • Determine ‘ideal’ size of each image • text + images = total number of columns required • Determine ‘ideal’ position for each image
45. • Estimate the length of the article text, in columns • Determine ‘ideal’ size of each image • text + images = total number of columns required • Determine ‘ideal’ position for each image • Position the header • Find best-fit position for each image • Run ColumnFlow over the body text
50. http://www.w3.org/TR/css-regions-1 http://blogs.adobe.com/cantrell/archives/2012/07/css-regions-arent-just-for-columns.html CSS Regions
51. http://www.w3.org/TR/css-regions-1 http://blogs.adobe.com/cantrell/archives/2012/07/css-regions-arent-just-for-columns.html CSS Regions
52. https://figures.spec.whatwg.org/ CSS Figures
53. http://dev.w3.org/csswg/css-line-grid/ http://dev.w3.org/csswg/css-align-3/ CSS Line Grid
54. https://dev.opera.com/articles/houdini/ Project Houdini
55. https://wiki.css-houdini.org/ Project Houdini • Font Metrics API • Custom Layout • Parser API • Property and Value Extensions API • Custom Paint
56. http://thegrid.io https://gridstylesheets.org/ Grid Style Sheets
57. Thanks @georgeocrawford http://app.economist.com http://app.ft.com