Going Mobile First With Drupal
•
15 likes•5,932 views
Building Drupal sites mobile first with lazy loading, responsive media and Varnish - without driving anyone insane. A combined session, technical overview, and outlined solution. Includes the notes from the workshop at the end.
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to Going Mobile First With Drupal
Similar to Going Mobile First With Drupal (20)
More from Jesper Wøldiche
Recently uploaded
Recently uploaded (20)
Going Mobile First With Drupal
- 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. About me Jesper Wøldiche Rahkonen Municipality of Aarhus designer / markup marine / project lead / woeldiche on twitter / quora / linkedin / etc.
- 5. About you.
- 8. Overview 0: RWD A quick peak at RWD 1: Mobile First What and why mobile first?. 2: Challenges Lazy loading, images, resources. 3: Requirements Requirements for a solution. 4: Solution Outline of a Drupal solution.
- 9. Part 0: RWD
- 10. This workshop
- 11. This workshop Mobile first in a responsive web design context.
- 12. This workshop Mobile first in a responsive web design context. Mobile first does not necessitate responsive web design.
- 13. This workshop Mobile first in a responsive web design context. Mobile first does not necessitate responsive web design. Alternatives later.
- 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.
- 20. Wide screen
- 21. Narrow
- 22. Tablet sized
- 23. Smartphone
- 24. Why use RWD?
- 25. Benefits Reduced costs for multiple platforms.
- 26. Benefits Reduced costs for multiple platforms. Sustainable.
- 27. Benefits Reduced costs for multiple platforms. Sustainable. Future proof.
- 28. Benefits Reduced costs for multiple platforms. Sustainable. Future proof. Works on iPhone 5.
- 29. rs le d 5 d o e e T v n lo ho iP
- 30. RWD solves challenges. One article = one url.
- 31. RWD solves challenges. One article = one url. Update content once.
- 32. RWD solves challenges. One article = one url. Update content once. Maintain one platform only.
- 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
- 38. Responsive webdesign Flexible grids + media queries
- 39. Responsive webdesign Flexible grids + media queries + adaptive media
- 40. Responsive webdesign Flexible grids + media queries + adaptive media + web standards
- 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 What is mobile first? Why Alternatives
- 45. Overview: Part I What Why The benefits of mobile first. Alternatives
- 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
- 50. The traditional way Design/build a desktop version
- 51. The traditional way Design/build a desktop version Port things to mobile - maybe.
- 52. The traditional way Design/build a desktop version Port things to mobile - maybe. Or ‘responsive’. Hide content - after loading it.
- 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.
- 57. A development process Design mobile version first.
- 58. A development process Design mobile version first. Even if you are not planning on doing a mobile.
- 59. A development process Design mobile version first. Even if you are not planning on doing a mobile. Build and build on top of mobile.
- 60. A development process 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.
- 61. Design the mobile version first. Even if you don’t plan on building it.
- 62. Benefits
- 63. Benefits of mobile first Growth Creative contraints Performance New capabilities
- 66. SD
- 67. Mobile provides constraints. You know those are a good thing, right?
- 69. Small screen enforces focus. Allows you to prioritize.
- 71. SD
- 73. Enforce performance conciousness. Benefits all platforms. (if done correctly)
- 79. Alternatives
- 80. Alternatives. To responsive web design. But mobile first regardless :-)
- 82. Overview: Part II Performance The challenge Adaptive media Aproaches
- 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. Two (three) issues Lazy, asynchronous loading of content and resources.
- 94. Two (three) issues Lazy, asynchronous loading of content and resources. Adaptive images and media.
- 95. Two (three) issues Lazy, asynchronous loading of content and resources. Adaptive images and media. Modular, progressive loading of resources.
- 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. A few Drupal modules 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
- 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. Requirements for solution 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.
- 109. Part IV: Solutions
- 110. An outline for general, configurable Drupal 7 solution for lazy loading.
- 111. The four components Configuration and admin interface. Template files. Client-side JS. JSON response from server.
- 112. An extendable contrib module. One admin page. Rewrites page output. Sends JSON output based on URL parameters.
- 113. Configuration component. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’).
- 114. Configuration component. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’). Select core region(s). Output as HTML.
- 115. Configuration component. Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’). Select core region(s). Output as HTML. Select additional, js-loaded regions for each preset.
- 116. Configuration component. 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).
- 117. Template component page.tpl.php includes <?php print $region; ?> for all regions as normal.
- 118. Template component 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().
- 119. Template component 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.
- 120. SD
- 121. Server-side component Adds an admin page (see above).
- 122. Server-side component Adds an admin page (see above). Returns optional regions as JSON in 1 request.
- 123. Server-side component Adds an admin page (see above). Returns optional regions as JSON in 1 request. Based on appended “responsive=true” & preset (eg. preset=narrow).
- 124. Server-side component 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).
- 125. Server-side component 2 Module grab all required regions, return as a json array using drupal_json_output()
- 126. Server-side component 2 Module grab all required regions, return as a json array using drupal_json_output() Include information about target (#siderbar-right) to JSON.
- 127. Server-side component 2 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
- 128. SD
- 129. Client-side component Client-side JS loaded on page-load.
- 130. Client-side component Client-side JS loaded on page-load. First page load includes lists of presets and mediaqueries in drupal.settings.
- 131. Client-side component 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.
- 132. Client-side component 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.
- 133. Client-side component 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.
- 134. You don’t need notes Baggrund Målsætninger Strategi Løsningsforslag
- 135. More sources ‘Responsive Webdesign’, Ethan Marcotte. ‘Mobile First’, Luke Wroblewski. ‘A New Canon’, Mark Boulton. ‘Reponsible Responsive Images’, Jeremy Keith. ‘Responsive IMGs’, Jason Grigsby. Links online.