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.

Transcript

2. FTColumnflow and newspaper layout on the web A dying breed?
3. • George Crawford
4. • George Crawford • Developer at Financial Times
5. • George Crawford • Developer at Financial Times • @georgeocrawford
6. • George Crawford • Developer at Financial Times • @georgeocrawford • https://github.com/georgecrawford/
7. • George Crawford • Developer at Financial Times • @georgeocrawford • https://github.com/georgecrawford/ • http://app.ft.com and https://app.economist.com
8. New York Classical Review
9. New York Classical Review
10. http://apps.ft.com/
11. http://labs.ft.com/2011/06/ft-launches-first-major-html5-mobile-news-app/
12. http://labs.ft.com/2011/06/ft-launches-first-major-html5-mobile-news-app/
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?
14. http://www.historicpages.com/
15. http://designshack.net/articles/layouts/practical-tips-for-utilizing-columns-of-text-in-your-layouts/
16. http://www.garciamedia.com/blog/financial_times_a_classic_redesign_for_the_digital_age
17. http://labs.ft.com/articles/ft-columnflow/
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
19. https://app.economist.com 1846 Print Digital
20. https://app.economist.com
21. CSS Multi-column Layout
22. http://caniuse.com/#feat=multicolumn CSS Multi-column Layout
23. http://codepen.io/georgecrawford/pen/zGpdQN
24. http://codepen.io/georgecrawford/pen/zGpdQN
25. http://www.giga.de/apps/app-store/news/protest-gegen-app-store-financial-times-als-web-app/
32. FTColumnflow https://github.com/ftlabs/ftcolumnflow
33. https://app.economist.com
34. https://app.economist.com
35. https://app.economist.com
36. https://app.economist.com
37. http://ftlabs.github.io/ftcolumnflow/5.html
38. https://github.com/ftlabs/ftcolumnflow
39. https://github.com/ftlabs/ftcolumnflow
40. https://github.com/ftlabs/ftcolumnflow
41. https://github.com/ftlabs/ftcolumnflow
42. https://github.com/ftlabs/ftcolumnflow
43. http://ftlabs.github.io/ftcolumnflow/4.html
46. http://georgecrawford.github.io/font-baseline/demo/metrics.html
47. https://github.com/ftlabs/ftcolumnflow
48. https://app.economist.com
49. https://app.economist.com
55. Demo
56. A dying breed
57. 1. Should a web app emulate print? A dying breed
58. http://www.giga.de/apps/app-store/news/protest-gegen-app-store-financial-times-als-web-app/
59. http://app.ft.com/
60. A dying breed
61. 2. New CSS developments A dying breed
62. 2. New CSS developments A dying breed • CSS Regions • CSS Figures • CSS Line Grid • Project Houdini
63. http://blogs.adobe.com/cantrell/archives/2012/07/css-regions-arent-just-for-columns.html CSS Regions
64. http://blogs.adobe.com/cantrell/archives/2012/07/css-regions-arent-just-for-columns.html CSS Regions
65. https://www.chromestatus.com/features/5655612935372800 CSS Regions
66. https://figures.spec.whatwg.org/ CSS Figures
67. http://dev.w3.org/csswg/css-line-grid/ http://dev.w3.org/csswg/css-align-3/ CSS Line Grid
68. http://dev.w3.org/csswg/css-line-grid/ http://dev.w3.org/csswg/css-align-3/ CSS Line Grid
69. http://dev.w3.org/csswg/css-line-grid/ http://dev.w3.org/csswg/css-align-3/ CSS Line Grid
70. http://dev.w3.org/csswg/css-line-grid/ http://dev.w3.org/csswg/css-align-3/ CSS Line Grid
71. https://dev.opera.com/articles/houdini/ Project Houdini
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)
73. Project Houdini
74. Project Houdini • Parser API
75. Project Houdini • Parser API • Property and Value Extensions API
76. Project Houdini • Parser API • Property and Value Extensions API • Font Metrics API
77. Project Houdini • Parser API • Property and Value Extensions API • Font Metrics API • Custom Layout
78. Project Houdini • Parser API • Property and Value Extensions API • Font Metrics API • Custom Layout • Custom Paint
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