$30 off During Our Annual Pro Sale. View Details »

Putting the 'Art' into Article

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...

George Crawford

October 09, 2015
Tweet

More Decks by George Crawford

Other Decks in Technology

Transcript

  1. Putting the ‘Art’ into Article
    @georgeocrawford
    https://github.com/georgecrawford

    View Slide

  2. http://app.ft.com

    View Slide

  3. https://app.economist.com

    View Slide

  4. https://app.economist.com

    View Slide

  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?

    View Slide

  6. the measure

    View Slide

  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

    View Slide

  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

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. https://en.wikipedia.org/wiki/The_Economist
    1846 Print Digital

    View Slide

  13. http://caniuse.com/#feat=multicolumn
    CSS Multi-column Layout

    View Slide

  14. http://codepen.io/georgecrawford/pen/zGpdQN

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. https://github.com/ftlabs/ftcolumnflow
    FTColumnflow

    View Slide

  20. View Slide

  21. View Slide

  22. https://github.com/ftlabs/ftcolumnflow

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. © Sarah Werner http://collation.folger.edu/wp-content/uploads/2012/03/Folger-Printing-22.jpg

    View Slide

  34. http://dev.labs.ft.com/george/moltenleading/

    View Slide

  35. http://georgecrawford.github.io/font-baseline/demo/metrics.html

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  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

    View Slide

  42. • Use a ‘fuzz’ multiplier to
    account for uneven line-breaks
    • Estimate the length of the article text, in
    columns

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  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

    View Slide

  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

    View Slide

  52. https://figures.spec.whatwg.org/
    CSS Figures

    View Slide

  53. http://dev.w3.org/csswg/css-line-grid/
    http://dev.w3.org/csswg/css-align-3/
    CSS Line Grid

    View Slide

  54. https://dev.opera.com/articles/houdini/
    Project Houdini

    View Slide

  55. https://wiki.css-houdini.org/
    Project Houdini
    • Font Metrics API
    • Custom Layout
    • Parser API
    • Property and Value Extensions API
    • Custom Paint

    View Slide

  56. http://thegrid.io
    https://gridstylesheets.org/
    Grid Style Sheets

    View Slide

  57. Thanks
    @georgeocrawford
    http://app.economist.com
    http://app.ft.com

    View Slide