Going Mobile First With Drupal

Building Drupal sites mobile first with lazy loading, responsive media and Varnish - without driving anyone insane. A combined session, technical overview, and outlined solution.

Transcript

1. Going mobile first with Drupal
2. This session
3. This is a workshop. You will do the <del>hard</ del> interesting work, not me.
4. Jesper Wøldiche Rahkonen Municipality of Aarhus designer / markup marine / project lead / woeldiche on twitter / quora / linkedin / etc. About me
5. About you.
6. Slides available online.
8. Overview 0: RWD 1: Mobile First 2: Challenges 3: Requirements 4: Solution A quick peak at RWD What and why mobile first?. Lazy loading, images, resources. Requirements for a solution. Outline of a Drupal solution.
9. Part 0: RWD
10. This workshop
11. Mobile first in a responsive web design context. This workshop
12. Mobile first in a responsive web design context. Mobile first does not necessitate responsive web design. This workshop
13. Mobile first in a responsive web design context. Mobile first does not necessitate responsive web design. Alternatives later. This workshop
15. Aim for universal access.
16. Make no assumptions. Or try not to. That goes for accesibility too.
17. Design and build for everything in between.
18. Design and build for everything in between. Including the next device.
19. Case: Lancaster U.
20. Wide screen
21. Narrow
22. Tablet sized
23. Smartphone
24. Why use RWD?
25. Reduced costs for multiple platforms. Benefits
26. Reduced costs for multiple platforms. Sustainable. Benefits
27. Reduced costs for multiple platforms. Sustainable. Future proof. Benefits
28. Reduced costs for multiple platforms. Sustainable. Future proof. Works on iPhone 5. Benefits
29. To d d lers love iPhone 5
30. One article = one url. RWD solves challenges.
31. One article = one url. Update content once. RWD solves challenges.
32. One article = one url. Update content once. Maintain one platform only. RWD solves challenges.
33. SD
34. 34% more buzzwords per project. Nah, not really. But your boss loves it anyway.
35. How?
36. A combination of techniques and web standards
37. Flexible grids Responsive webdesign
38. Flexible grids + media queries Responsive webdesign
39. Flexible grids + media queries + adaptive media Responsive webdesign
40. Flexible grids + media queries + adaptive media + web standards Responsive webdesign
41. “But he started it...”
42. Adaptive webdesign? Fluid or fixed columns doesn’t make a difference for a mobile first approach.
43. Part I: Why Mobile First?
44. Overview: Part I What Why Alternatives What is mobile first?
45. Overview: Part I What Why Alternatives The benefits of mobile first.
46. Overview: Part I What Why Alternatives A look at alternatives.
47. What is mobile first?
48. “Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.” - Luke Wroblewski
49. The traditional way
50. Design/build a desktop version The traditional way
51. Design/build a desktop version Port things to mobile - maybe. The traditional way
52. Design/build a desktop version Port things to mobile - maybe. Or ‘responsive’. Hide content - after loading it. The traditional way
53. Mobile first design
54. Mobile first is a design method. But not the focus of today’s session.
55. Mobile first ties into responsive web design. And device experiences, RESS and desktop-only.
56. A development process
57. Design mobile version first. A development process
58. Design mobile version first. Even if you are not planning on doing a mobile. A development process
59. Design mobile version first. Even if you are not planning on doing a mobile. Build and build on top of mobile. A development process
60. Design mobile version first. Even if you are not planning on doing a mobile. Build and build on top of mobile. Add & adapt content going up. A development process
61. Design the mobile version first. Even if you don’t plan on building it.
62. Benefits
63. Growth Creative contraints Performance New capabilities Benefits of mobile first
64. Mobile is exploding.
65. Mobile is personal.
66. SD
67. Mobile provides constraints. You know those are a good thing, right?
68. Small screen enforces focus.
69. Small screen enforces focus. Allows you to prioritize.
70. Constraints inspire creativitity.
71. SD
72. Enforce performance conciousness.
73. Enforce performance conciousness. Benefits all platforms. (if done correctly)
74. Advanced capabilities
75. Location Advanced capabilities
76. Location Device orientation Advanced capabilities
77. Location Device orientation Cameras Advanced capabilities
78. Location Device orientation Cameras Touch Advanced capabilities
79. Alternatives
80. Alternatives. To responsive web design. But mobile first regardless :-)
81. Part III: Challenges
82. Overview: Part II Performance The challenge Adaptive media Aproaches
83. It’s about performance.
84. ‘Performance test of 347 responsive web sites (in 2012!) reveals absolute train wreck of mobile-last, display:none “strategies”.’ - Stephanie Rieger
85. ‘Only 3% of responsive sites had a much smaller performance footprint on small screens than on large screens #bdconf’ - Brad Frost, @bradfrost
86. The performant mobile site Smaller images, lower bandwidth media
87. The performant mobile site Smaller images, lower bandwidth media Fewer graphics
88. The performant mobile site Smaller images, lower bandwidth media Fewer graphics Progressive loading of JS and resources.
89. The performant mobile site Smaller images, lower bandwidth media Fewer graphics Progressive loading of JS and resources. Less content up front (progressive disclosure)
90. The performant mobile site Smaller images, lower bandwidth media Fewer graphics Progressive loading of JS and resources. Less content up front (progressive disclosure) Sensible defaults
91. The Challenge
92. Progressively enhance (transform?) a performant mobile website into a full size, full experience large- screen website.
93. Lazy, asynchronous loading of content and resources. Two (three) issues
94. Lazy, asynchronous loading of content and resources. Adaptive images and media. Two (three) issues
95. Lazy, asynchronous loading of content and resources. Adaptive images and media. Modular, progressive loading of resources. Two (three) issues
96. Lazy loading
97. Let’s talk lazy loading.
98. Serve core content as HTML
99. Load in additional content with js as dimensions, context and capabilities dictate.
100. Use well defined, streamlined, extendable patterns. For defining and loading additional content.
101. Bonus: With only one request
102. Adaptive media
103. Lots of existing solutions. Some of them good.
104. drupal.org/project/responsive_images drupal.org/project/resp_img drupal.org/project/adaptive_image drupal.org/project/ais drupal.org/project/cs_adaptive_image A few Drupal modules
105. Part III: Requirements
106. Requirements gathered in workshop. Thanks for contributing. Slide on...
107. Choices Drupal 7 unpatched core. Must work with Varnish, CDNs. Works well with anonymous users.
108. Load regions based on mediaquery. Cacheable for anymous users. Attempt reduce number of bootstraps Serve core content as HTML Configurable Reusable Each region targetable with URL. Requirements for solution
109. Part IV: Solutions
110. An outline for general, configurable Drupal 7 solution for lazy loading.
111. Configuration and admin interface. Template files. Client-side JS. JSON response from server. The four components
112. An extendable contrib module. One admin page. Rewrites page output. Sends JSON output based on URL parameters.
113. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’). Configuration component.
114. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’). Select core region(s). Output as HTML. Configuration component.
115. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’). Select core region(s). Output as HTML. Select additional, js-loaded regions for each preset. Configuration component.
116. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’). Select core region(s). Output as HTML. Select additional, js-loaded regions for each preset. Define media queries for each preset (width, height for starters). Configuration component.
117. page.tpl.php includes <?php print $region; ?> for all regions as normal. Template component
118. page.tpl.php includes <?php print $region; ?> for all regions as normal. Conditionally set [‘#access’] = FALSE; for optional regions based on query-string in URL in hook_page_alter(). Template component
119. page.tpl.php includes <?php print $region; ?> for all regions as normal. Conditionally set [‘#access’] = FALSE; for optional regions based on query-string in URL in hook_page_alter(). Output optionally include a link to full version. Template component
120. SD
121. Adds an admin page (see above). Server-side component
122. Adds an admin page (see above). Returns optional regions as JSON in 1 request. Server-side component
123. Adds an admin page (see above). Returns optional regions as JSON in 1 request. Based on appended “responsive=true” & preset (eg. preset=narrow). Server-side component
124. Adds an admin page (see above). Returns optional regions as JSON in 1 request. Based on appended “responsive=true” & preset (eg. preset=narrow). Or renders optional regions as HTML on ‘responsive=false&preset=desktop’ (for testing). Server-side component
125. Module grab all required regions, return as a json array using drupal_json_output() Server-side component 2
126. Module grab all required regions, return as a json array using drupal_json_output() Include information about target (#siderbar-right) to JSON. Server-side component 2
127. Module grab all required regions, return as a json array using drupal_json_output() Include information about target (#siderbar-right) to JSON. Return page with all regions using query Server-side component 2
128. SD
129. Client-side JS loaded on page-load. Client-side component
130. Client-side JS loaded on page-load. First page load includes lists of presets and mediaqueries in drupal.settings. Client-side component
131. Client-side JS loaded on page-load. First page load includes lists of presets and mediaqueries in drupal.settings. JS requests additional content and includes relevant preset and URL. Client-side component
132. Client-side JS loaded on page-load. First page load includes lists of presets and mediaqueries in drupal.settings. JS requests additional content and includes relevant preset and URL. Server sends additional regions as JSON - including information on targets. Client-side component
133. Client-side JS loaded on page-load. First page load includes lists of presets and mediaqueries in drupal.settings. JS requests additional content and includes relevant preset and URL. Server sends additional regions as JSON - including information on targets. JS inserts region content from JSON into DOM. Client-side component
134. You don’t need notes Baggrund Målsætninger Strategi Løsningsforslag
135. ‘Responsive Webdesign’, Ethan Marcotte. ‘Mobile First’, Luke Wroblewski. ‘A New Canon’, Mark Boulton. ‘Reponsible Responsive Images’, Jeremy Keith. ‘Responsive IMGs’, Jason Grigsby. Links online. More sources
136. Thank you. slideshare.net/woeldiche
137. Links http://www.abookapart.com/products/responsive-web-design http://www.alistapart.com/articles/responsive-web-design/ http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think- that-word-means-what-you-think-it-means/ Responsive web design
138. Links http://www.lukew.com/ff/entry.asp?933 http://www.lukew.com/ff/entry.asp?1137 http://www.lukew.com/ff/entry.asp?1393 http://www.abookapart.com/products/mobile-first Mobile first
139. Links http://2011.newadventuresconf.com/audio/mark.html http://vimeo.com/29991675 http://www.netmagazine.com/interviews/in-depth/mark-boulton-layouts- and-grid-systems A New Canon
140. Links http://adactio.com/journal/4997/ http://blog.cloudfour.com/responsive-imgs/ http://blog.cloudfour.com/responsive-imgs-part-2/ http://blog.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/ http://www.alistapart.com/articles/responsive-images-how-they-almost- worked-and-what-we-need/ Responsive Images