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

FTColumnflow and newspaper layout on the web: a dying breed?

FTColumnflow and newspaper layout on the web: a dying breed?

In this talk, George Crawford shares his experiences in developing mobile apps for the Financial Times and The Economist; both initially driven to mimic the print layout of their newspapers on the web. He will share the constraints and requirements which led to the development of FTColumnFlow [1], a polyfill for many of the missing features in the original CSS Multi-Column Layout module. ColumnFlow introduces great flexibility and can produce fantastic renderings, seemingly tailor-made for each device, but is this whole approach to layout an outdated concept?

As we have waited for simple missing features in CSS, a wide variety of new draft specifications have emerged: CSS Regions, Grids, Paged Media, Fragmentation, Generated Content, Line Grid, and Book Layout, as well as Multi-Column Level 2. But does the lack of basic features and the slow rate of progress in fact represent a lack of interest in this approach to layout on the web?

Future specs such as are being explored by the Houdini project might allow for use-case driven development of CSS standards using primitives and true CSS polyfills, just like the emergence of ServiceWorker for JavaScript.

George Crawford

June 29, 2015
Tweet

More Decks by George Crawford

Other Decks in Technology

Transcript

  1. View Slide

  2. FTColumnflow and
    newspaper layout
    on the web
    A dying breed?

    View Slide

  3. • George Crawford

    View Slide

  4. • George Crawford
    • Developer at Financial Times

    View Slide

  5. • George Crawford
    • Developer at Financial Times
    • @georgeocrawford

    View Slide

  6. • George Crawford
    • Developer at Financial Times
    • @georgeocrawford
    • https://github.com/georgecrawford/

    View Slide

  7. • George Crawford
    • Developer at Financial Times
    • @georgeocrawford
    • https://github.com/georgecrawford/
    • http://app.ft.com and https://app.economist.com

    View Slide

  8. New York Classical Review

    View Slide

  9. New York Classical Review

    View Slide

  10. http://apps.ft.com/

    View Slide

  11. http://labs.ft.com/2011/06/ft-launches-first-major-html5-mobile-news-app/

    View Slide

  12. http://labs.ft.com/2011/06/ft-launches-first-major-html5-mobile-news-app/

    View Slide

  13. http://labs.ft.com/2012/06/what-exactly-is-an-app/
    • Perfectly fills the screen
    • An interface designed for touch
    • No ‘browser-like’ elements, or ‘page loading’
    behaviour
    • Gesture interaction
    • An icon on the homescreen
    What is a web app?

    View Slide

  14. http://www.historicpages.com/

    View Slide

  15. http://designshack.net/articles/layouts/practical-tips-for-utilizing-columns-of-text-in-your-layouts/

    View Slide

  16. http://www.garciamedia.com/blog/financial_times_a_classic_redesign_for_the_digital_age

    View Slide

  17. http://labs.ft.com/articles/ft-columnflow/

    View Slide

  18. https://itunes.apple.com/gb/app/nytimes-for-ipad-breaking/id357066198?mt=8
    https://itunes.apple.com/gb/app/the-wall-street-journal./id364387007?mt=8
    https://itunes.apple.com/gb/app/the-guardian/id409128287?mt=8
    New York Times Wall Street Journal The Guardian

    View Slide

  19. https://app.economist.com
    1846 Print Digital

    View Slide

  20. https://app.economist.com

    View Slide

  21. CSS Multi-column Layout

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. http://www.giga.de/apps/app-store/news/protest-gegen-app-store-financial-times-als-web-app/

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

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

    View Slide

  33. https://app.economist.com

    View Slide

  34. https://app.economist.com

    View Slide

  35. https://app.economist.com

    View Slide

  36. https://app.economist.com

    View Slide

  37. http://ftlabs.github.io/ftcolumnflow/5.html

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. http://ftlabs.github.io/ftcolumnflow/4.html

    View Slide

  44. View Slide

  45. View Slide

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

    View Slide

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

    View Slide

  48. https://app.economist.com

    View Slide

  49. https://app.economist.com

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. Demo

    View Slide

  56. A dying breed

    View Slide

  57. 1. Should a web app
    emulate print?
    A dying breed

    View Slide

  58. http://www.giga.de/apps/app-store/news/protest-gegen-app-store-financial-times-als-web-app/

    View Slide

  59. http://app.ft.com/

    View Slide

  60. A dying breed

    View Slide

  61. 2. New CSS developments
    A dying breed

    View Slide

  62. 2. New CSS developments
    A dying breed
    • CSS Regions
    • CSS Figures
    • CSS Line Grid
    • Project Houdini

    View Slide

  63. http://blogs.adobe.com/cantrell/archives/2012/07/css-regions-arent-just-for-columns.html
    CSS Regions

    View Slide

  64. http://blogs.adobe.com/cantrell/archives/2012/07/css-regions-arent-just-for-columns.html
    CSS Regions

    View Slide

  65. https://www.chromestatus.com/features/5655612935372800
    CSS Regions

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. https://dev.opera.com/articles/houdini/
    Project Houdini
    “The most exciting thing was that nobody was arguing. We’ve wanted a lot of this since
    the 90s and now is the first time when someone hasn’t said “no” or “it can’t be done”.
    Peter Linns (TAG co-chair, CSS WG co-chair)

    View Slide

  73. Project Houdini

    View Slide

  74. Project Houdini
    • Parser API

    View Slide

  75. Project Houdini
    • Parser API
    • Property and Value Extensions API

    View Slide

  76. Project Houdini
    • Parser API
    • Property and Value Extensions API
    • Font Metrics API

    View Slide

  77. Project Houdini
    • Parser API
    • Property and Value Extensions API
    • Font Metrics API
    • Custom Layout

    View Slide

  78. Project Houdini
    • Parser API
    • Property and Value Extensions API
    • Font Metrics API
    • Custom Layout
    • Custom Paint

    View Slide

  79. View Slide

  80. Thanks!
    https://speakerdeck.com/georgecrawford/ftcolumnflow-and-newspaper-
    layout-on-the-web-a-dying-breed
    @georgeocrawford
    Come and join us: http://labs.ft.com/jobs

    View Slide