Going mobilefirst with Drupal
This session
This is a workshop.You will do the <del>hard</del> interesting work, not me.
About meJesper Wøldiche RahkonenMunicipality of Aarhusdesigner /markup marine /project lead /woeldiche on twitter / quora ...
About you.
Slides available online.
Overview0: RWD             A quick peak at RWD1: Mobile First    What and why mobile first?.2: Challenges      Lazy loadin...
Part 0: RWD
This workshop
This workshopMobile first in a responsive web designcontext.
This workshopMobile first in a responsive web designcontext.Mobile first does not necessitateresponsive web design.
This workshopMobile first in a responsive web designcontext.Mobile first does not necessitateresponsive web design.Alterna...
Aim for universal access.
Make no assumptions.Or try not to.That goes for accesibility too.
Design and build foreverything in between.
Design and build foreverything in between.Including the next device.
Case: Lancaster U.
Wide screen
Narrow
Tablet sized
Smartphone
Why use RWD?
BenefitsReduced costs for multiple platforms.
BenefitsReduced costs for multiple platforms.Sustainable.
BenefitsReduced costs for multiple platforms.Sustainable.Future proof.
BenefitsReduced costs for multiple platforms.Sustainable.Future proof.Works on iPhone 5.
rs   le     d  5   d o e eT v n  lo ho    iP
RWD solves challenges.One article = one url.
RWD solves challenges.One article = one url.Update content once.
RWD solves challenges.One article = one url.Update content once.Maintain one platform only.
SD
34% more buzzwords perproject.Nah, not really.But your boss loves it anyway.
How?
A combination of techniquesand web standards
Responsive webdesignFlexible grids
Responsive webdesignFlexible grids+ media queries
Responsive webdesignFlexible grids+ media queries+ adaptive media
Responsive webdesignFlexible grids+ media queries+ adaptive media+ web standards
“But hestarted it...”
Adaptive webdesign?Fluid or fixed columns doesn’tmake a difference for a mobilefirst approach.
Part I: Why Mobile First?
Overview: Part IWhat           What is mobile first?WhyAlternatives
Overview: Part IWhatWhy            The benefits of mobile first.Alternatives
Overview: Part IWhatWhyAlternatives   A look at alternatives.
What is mobile first?
“Designing for mobile first not onlyprepares you for the explosive growthand new opportunities on the mobileinternet, it f...
The traditional way
The traditional wayDesign/build a desktop version
The traditional wayDesign/build a desktop versionPort things to mobile - maybe.
The traditional wayDesign/build a desktop versionPort things to mobile - maybe.Or ‘responsive’. Hide content - after loadi...
Mobile first design
Mobile first isa design method.But not the focus of today’ssession.
Mobile first ties intoresponsive web design.And device experiences,RESS and desktop-only.
A development process
A development processDesign mobile version first.
A development processDesign mobile version first.Even if you are not planning on doing a mobile.
A development processDesign mobile version first.Even if you are not planning on doing a mobile.Build and build on top of ...
A development processDesign mobile version first.Even if you are not planning on doing a mobile.Build and build on top of ...
Design the mobile versionfirst. Even if you don’t planon building it.
Benefits
Benefits of mobile firstGrowthCreative contraintsPerformanceNew capabilities
Mobile is exploding.
Mobile is personal.
SD
Mobile providesconstraints.You know those are a goodthing, right?
Small screenenforcesfocus.
Small screenenforcesfocus.Allows you to prioritize.
Constraintsinspire creativitity.
SD
Enforce performanceconciousness.
Enforce performanceconciousness.Benefits all platforms.(if done correctly)
Advanced capabilities
Advanced capabilitiesLocation
Advanced capabilitiesLocationDevice orientation
Advanced capabilitiesLocationDevice orientationCameras
Advanced capabilitiesLocationDevice orientationCamerasTouch
Alternatives
Alternatives.To responsive web design.But mobile first regardless :-)
Part III: Challenges
Overview: Part IIPerformanceThe challengeAdaptive mediaAproaches
It’s about performance.
‘Performance test of 347responsive web sites (in 2012!)reveals absolute train wreck ofmobile-last, display:none“strategies...
‘Only 3% of responsive sites had amuch smaller performance footprinton small screens than on large screens#bdconf’        ...
The performant mobile siteSmaller images, lower bandwidth media
The performant mobile siteSmaller images, lower bandwidth mediaFewer graphics
The performant mobile siteSmaller images, lower bandwidth mediaFewer graphicsProgressive loading of JS and resources.
The performant mobile siteSmaller images, lower bandwidth mediaFewer graphicsProgressive loading of JS and resources.Less ...
The performant mobile siteSmaller images, lower bandwidth mediaFewer graphicsProgressive loading of JS and resources.Less ...
The Challenge
Progressively enhance(transform?) a performantmobile website into a fullsize, full experience large-screen website.
Two (three) issuesLazy, asynchronous loading of contentand resources.
Two (three) issuesLazy, asynchronous loading of contentand resources.Adaptive images and media.
Two (three) issuesLazy, asynchronous loading of contentand resources.Adaptive images and media.Modular, progressive loadin...
Lazy loading
Let’s talk lazy loading.
Serve core content as HTML
Load in additional contentwith js as dimensions,context and capabilitiesdictate.
Use well defined,streamlined, extendablepatterns.For defining and loadingadditional content.
Bonus:With only one request
Adaptive media
Lots of existing solutions.Some of them good.
A few Drupal modulesdrupal.org/project/responsive_imagesdrupal.org/project/resp_imgdrupal.org/project/adaptive_imagedrupal...
Part III: Requirements
Requirements gatheredin workshop.Thanks for contributing.Slide on...
ChoicesDrupal 7 unpatched core.Must work with Varnish, CDNs.Works well with anonymous users.
Requirements for solutionLoad regions based on mediaquery.Cacheable for anymous users.Attempt reduce number of bootstrapsS...
Part IV: Solutions
An outline for general,configurable Drupal 7 solutionfor lazy loading.
The four componentsConfiguration and admin interface.Template files.Client-side JS.JSON response from server.
An extendablecontrib module.One admin page.Rewrites page output.Sends JSON output based onURL parameters.
Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).
Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).Select core region(s). Output a...
Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).Select core region(s). Output a...
Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).Select core region(s). Output a...
Template componentpage.tpl.php includes <?php print $region; ?>for all regions as normal.
Template componentpage.tpl.php includes <?php print $region; ?> forall regions as normal.Conditionally set [‘#access’] = F...
Template componentpage.tpl.php includes <?php print $region; ?> forall regions as normal.Conditionally set [‘#access’] = F...
SD
Server-side componentAdds an admin page (see above).
Server-side componentAdds an admin page (see above).Returns optional regions as JSON in 1 request.
Server-side componentAdds an admin page (see above).Returns optional regions as JSON in 1 request.Based on appended “respo...
Server-side componentAdds an admin page (see above).Returns optional regions as JSON in 1 request.Based on appended “respo...
Server-side component 2Module grab all required regions, return as a jsonarray using drupal_json_output()
Server-side component 2Module grab all required regions, return as a jsonarray using drupal_json_output()Include informati...
Server-side component 2Module grab all required regions, return as a jsonarray using drupal_json_output()Include informati...
SD
Client-side componentClient-side JS loaded on page-load.
Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupa...
Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupa...
Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupa...
Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupa...
You don’t need notesBaggrundMålsætningerStrategiLøsningsforslag
More sources‘Responsive Webdesign’, Ethan Marcotte.‘Mobile First’, Luke Wroblewski.‘A New Canon’, Mark Boulton.‘Reponsible...
Thank you.slideshare.net/woeldiche
Responsive web designLinkshttp://www.abookapart.com/products/responsive-web-designhttp://www.alistapart.com/articles/respo...
Mobile firstLinkshttp://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?1137http://www.lukew.com/ff/entry....
A New CanonLinkshttp://2011.newadventuresconf.com/audio/mark.htmlhttp://vimeo.com/29991675http://www.netmagazine.com/inter...
Responsive ImagesLinkshttp://adactio.com/journal/4997/http://blog.cloudfour.com/responsive-imgs/http://blog.cloudfour.com/...
Going Mobile First With Drupal
Going Mobile First With Drupal
Upcoming SlideShare
Loading in...5
×

Going Mobile First With Drupal

8,113

Published on

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.

Published in: Technology, Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,113
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
112
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Going Mobile First With Drupal

  1. 1. Going mobilefirst with Drupal
  2. 2. This session
  3. 3. This is a workshop.You will do the <del>hard</del> interesting work, not me.
  4. 4. About meJesper Wøldiche RahkonenMunicipality of Aarhusdesigner /markup marine /project lead /woeldiche on twitter / quora / linkedin / etc.
  5. 5. About you.
  6. 6. Slides available online.
  7. 7. Overview0: RWD A quick peak at RWD1: 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.
  8. 8. Part 0: RWD
  9. 9. This workshop
  10. 10. This workshopMobile first in a responsive web designcontext.
  11. 11. This workshopMobile first in a responsive web designcontext.Mobile first does not necessitateresponsive web design.
  12. 12. This workshopMobile first in a responsive web designcontext.Mobile first does not necessitateresponsive web design.Alternatives later.
  13. 13. Aim for universal access.
  14. 14. Make no assumptions.Or try not to.That goes for accesibility too.
  15. 15. Design and build foreverything in between.
  16. 16. Design and build foreverything in between.Including the next device.
  17. 17. Case: Lancaster U.
  18. 18. Wide screen
  19. 19. Narrow
  20. 20. Tablet sized
  21. 21. Smartphone
  22. 22. Why use RWD?
  23. 23. BenefitsReduced costs for multiple platforms.
  24. 24. BenefitsReduced costs for multiple platforms.Sustainable.
  25. 25. BenefitsReduced costs for multiple platforms.Sustainable.Future proof.
  26. 26. BenefitsReduced costs for multiple platforms.Sustainable.Future proof.Works on iPhone 5.
  27. 27. rs le d 5 d o e eT v n lo ho iP
  28. 28. RWD solves challenges.One article = one url.
  29. 29. RWD solves challenges.One article = one url.Update content once.
  30. 30. RWD solves challenges.One article = one url.Update content once.Maintain one platform only.
  31. 31. SD
  32. 32. 34% more buzzwords perproject.Nah, not really.But your boss loves it anyway.
  33. 33. How?
  34. 34. A combination of techniquesand web standards
  35. 35. Responsive webdesignFlexible grids
  36. 36. Responsive webdesignFlexible grids+ media queries
  37. 37. Responsive webdesignFlexible grids+ media queries+ adaptive media
  38. 38. Responsive webdesignFlexible grids+ media queries+ adaptive media+ web standards
  39. 39. “But hestarted it...”
  40. 40. Adaptive webdesign?Fluid or fixed columns doesn’tmake a difference for a mobilefirst approach.
  41. 41. Part I: Why Mobile First?
  42. 42. Overview: Part IWhat What is mobile first?WhyAlternatives
  43. 43. Overview: Part IWhatWhy The benefits of mobile first.Alternatives
  44. 44. Overview: Part IWhatWhyAlternatives A look at alternatives.
  45. 45. What is mobile first?
  46. 46. “Designing for mobile first not onlyprepares you for the explosive growthand new opportunities on the mobileinternet, it forces you to focus andenables you to innovate in ways youpreviously couldn’t.” - Luke Wroblewski
  47. 47. The traditional way
  48. 48. The traditional wayDesign/build a desktop version
  49. 49. The traditional wayDesign/build a desktop versionPort things to mobile - maybe.
  50. 50. The traditional wayDesign/build a desktop versionPort things to mobile - maybe.Or ‘responsive’. Hide content - after loading it.
  51. 51. Mobile first design
  52. 52. Mobile first isa design method.But not the focus of today’ssession.
  53. 53. Mobile first ties intoresponsive web design.And device experiences,RESS and desktop-only.
  54. 54. A development process
  55. 55. A development processDesign mobile version first.
  56. 56. A development processDesign mobile version first.Even if you are not planning on doing a mobile.
  57. 57. A development processDesign mobile version first.Even if you are not planning on doing a mobile.Build and build on top of mobile.
  58. 58. A development processDesign 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.
  59. 59. Design the mobile versionfirst. Even if you don’t planon building it.
  60. 60. Benefits
  61. 61. Benefits of mobile firstGrowthCreative contraintsPerformanceNew capabilities
  62. 62. Mobile is exploding.
  63. 63. Mobile is personal.
  64. 64. SD
  65. 65. Mobile providesconstraints.You know those are a goodthing, right?
  66. 66. Small screenenforcesfocus.
  67. 67. Small screenenforcesfocus.Allows you to prioritize.
  68. 68. Constraintsinspire creativitity.
  69. 69. SD
  70. 70. Enforce performanceconciousness.
  71. 71. Enforce performanceconciousness.Benefits all platforms.(if done correctly)
  72. 72. Advanced capabilities
  73. 73. Advanced capabilitiesLocation
  74. 74. Advanced capabilitiesLocationDevice orientation
  75. 75. Advanced capabilitiesLocationDevice orientationCameras
  76. 76. Advanced capabilitiesLocationDevice orientationCamerasTouch
  77. 77. Alternatives
  78. 78. Alternatives.To responsive web design.But mobile first regardless :-)
  79. 79. Part III: Challenges
  80. 80. Overview: Part IIPerformanceThe challengeAdaptive mediaAproaches
  81. 81. It’s about performance.
  82. 82. ‘Performance test of 347responsive web sites (in 2012!)reveals absolute train wreck ofmobile-last, display:none“strategies”.’ - Stephanie Rieger
  83. 83. ‘Only 3% of responsive sites had amuch smaller performance footprinton small screens than on large screens#bdconf’ - Brad Frost, @bradfrost
  84. 84. The performant mobile siteSmaller images, lower bandwidth media
  85. 85. The performant mobile siteSmaller images, lower bandwidth mediaFewer graphics
  86. 86. The performant mobile siteSmaller images, lower bandwidth mediaFewer graphicsProgressive loading of JS and resources.
  87. 87. The performant mobile siteSmaller images, lower bandwidth mediaFewer graphicsProgressive loading of JS and resources.Less content up front (progressive disclosure)
  88. 88. The performant mobile siteSmaller images, lower bandwidth mediaFewer graphicsProgressive loading of JS and resources.Less content up front (progressive disclosure)Sensible defaults
  89. 89. The Challenge
  90. 90. Progressively enhance(transform?) a performantmobile website into a fullsize, full experience large-screen website.
  91. 91. Two (three) issuesLazy, asynchronous loading of contentand resources.
  92. 92. Two (three) issuesLazy, asynchronous loading of contentand resources.Adaptive images and media.
  93. 93. Two (three) issuesLazy, asynchronous loading of contentand resources.Adaptive images and media.Modular, progressive loading of resources.
  94. 94. Lazy loading
  95. 95. Let’s talk lazy loading.
  96. 96. Serve core content as HTML
  97. 97. Load in additional contentwith js as dimensions,context and capabilitiesdictate.
  98. 98. Use well defined,streamlined, extendablepatterns.For defining and loadingadditional content.
  99. 99. Bonus:With only one request
  100. 100. Adaptive media
  101. 101. Lots of existing solutions.Some of them good.
  102. 102. A few Drupal modulesdrupal.org/project/responsive_imagesdrupal.org/project/resp_imgdrupal.org/project/adaptive_imagedrupal.org/project/aisdrupal.org/project/cs_adaptive_image
  103. 103. Part III: Requirements
  104. 104. Requirements gatheredin workshop.Thanks for contributing.Slide on...
  105. 105. ChoicesDrupal 7 unpatched core.Must work with Varnish, CDNs.Works well with anonymous users.
  106. 106. Requirements for solutionLoad regions based on mediaquery.Cacheable for anymous users.Attempt reduce number of bootstrapsServe core content as HTMLConfigurableReusableEach region targetable with URL.
  107. 107. Part IV: Solutions
  108. 108. An outline for general,configurable Drupal 7 solutionfor lazy loading.
  109. 109. The four componentsConfiguration and admin interface.Template files.Client-side JS.JSON response from server.
  110. 110. An extendablecontrib module.One admin page.Rewrites page output.Sends JSON output based onURL parameters.
  111. 111. Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).
  112. 112. Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).Select core region(s). Output as HTML.
  113. 113. Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).Select core region(s). Output as HTML.Select additional, js-loaded regions foreach preset.
  114. 114. Configuration component.Define named presets for layouts (eg. ‘narrow’,‘normal’, ‘mobile’).Select core region(s). Output as HTML.Select additional, js-loaded regions foreach preset.Define media queries for each preset (width,height for starters).
  115. 115. Template componentpage.tpl.php includes <?php print $region; ?>for all regions as normal.
  116. 116. Template componentpage.tpl.php includes <?php print $region; ?> forall regions as normal.Conditionally set [‘#access’] = FALSE; foroptional regions based on query-string in URLin hook_page_alter().
  117. 117. Template componentpage.tpl.php includes <?php print $region; ?> forall regions as normal.Conditionally set [‘#access’] = FALSE; foroptional regions based on query-string in URL inhook_page_alter().Output optionally include a link to full version.
  118. 118. SD
  119. 119. Server-side componentAdds an admin page (see above).
  120. 120. Server-side componentAdds an admin page (see above).Returns optional regions as JSON in 1 request.
  121. 121. Server-side componentAdds an admin page (see above).Returns optional regions as JSON in 1 request.Based on appended “responsive=true”& preset (eg. preset=narrow).
  122. 122. Server-side componentAdds 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).
  123. 123. Server-side component 2Module grab all required regions, return as a jsonarray using drupal_json_output()
  124. 124. Server-side component 2Module grab all required regions, return as a jsonarray using drupal_json_output()Include information about target (#siderbar-right)to JSON.
  125. 125. Server-side component 2Module grab all required regions, return as a jsonarray using drupal_json_output()Include information about target (#siderbar-right)to JSON.Return page with all regions using query
  126. 126. SD
  127. 127. Client-side componentClient-side JS loaded on page-load.
  128. 128. Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupal.settings.
  129. 129. Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupal.settings.JS requests additional content and includesrelevant preset and URL.
  130. 130. Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupal.settings.JS requests additional content and includesrelevant preset and URL.Server sends additional regions as JSON -including information on targets.
  131. 131. Client-side componentClient-side JS loaded on page-load.First page load includes lists of presets andmediaqueries in drupal.settings.JS requests additional content and includesrelevant preset and URL.Server sends additional regions as JSON -including information on targets.JS inserts region content from JSON into DOM.
  132. 132. You don’t need notesBaggrundMålsætningerStrategiLøsningsforslag
  133. 133. 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.
  134. 134. Thank you.slideshare.net/woeldiche
  135. 135. Responsive web designLinkshttp://www.abookapart.com/products/responsive-web-designhttp://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/
  136. 136. Mobile firstLinkshttp://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?1137http://www.lukew.com/ff/entry.asp?1393http://www.abookapart.com/products/mobile-first
  137. 137. A New CanonLinkshttp://2011.newadventuresconf.com/audio/mark.htmlhttp://vimeo.com/29991675http://www.netmagazine.com/interviews/in-depth/mark-boulton-layouts-and-grid-systems
  138. 138. Responsive ImagesLinkshttp://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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×