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.
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.
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
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.
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
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
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
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.
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).
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.
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).
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
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.