going mobile first with drupal

140
Going mobile first with Drupal

Upload: jesper-woldiche

Post on 27-Jan-2015

110 views

Category:

Technology


1 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Going Mobile First With Drupal

Going mobile first with Drupal

Page 2: Going Mobile First With Drupal

This session

Page 3: Going Mobile First With Drupal

This is a workshop.

You will do the <del>hard</del> interesting work, not me.

Page 4: Going Mobile First With Drupal

Jesper Wøldiche Rahkonen Municipality of Aarhus

designer / markup marine / project lead /

woeldiche on twitter / quora / linkedin / etc.

About me

Page 5: Going Mobile First With Drupal

About you.

Page 6: Going Mobile First With Drupal

Slides available online.

Page 7: Going Mobile First With Drupal
Page 8: Going Mobile First With Drupal

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.

Page 9: Going Mobile First With Drupal

Part 0: RWD

Page 10: Going Mobile First With Drupal

This workshop

Page 11: Going Mobile First With Drupal

Mobile first in a responsive web design context.

This workshop

Page 12: Going Mobile First With Drupal

Mobile first in a responsive web design context.

Mobile first does not necessitate responsive web design.

This workshop

Page 13: Going Mobile First With Drupal

Mobile first in a responsive web design context.

Mobile first does not necessitate responsive web design.

Alternatives later.

This workshop

Page 14: Going Mobile First With Drupal
Page 15: Going Mobile First With Drupal

Aim for universal access.

Page 16: Going Mobile First With Drupal

Make no assumptions.Or try not to.

That goes for accesibility too.

Page 17: Going Mobile First With Drupal

Design and build for everything in between.

Page 18: Going Mobile First With Drupal

Design and build for everything in between.

Including the next device.

Page 19: Going Mobile First With Drupal

Case: Lancaster U.

Page 20: Going Mobile First With Drupal

Wide screen

Page 21: Going Mobile First With Drupal

Narrow

Page 22: Going Mobile First With Drupal

Tablet sized

Page 23: Going Mobile First With Drupal

Smartphone

Page 24: Going Mobile First With Drupal

Why use RWD?

Page 25: Going Mobile First With Drupal

Reduced costs for multiple platforms.

Benefits

Page 26: Going Mobile First With Drupal

Reduced costs for multiple platforms.

Sustainable.

Benefits

Page 27: Going Mobile First With Drupal

Reduced costs for multiple platforms.

Sustainable.

Future proof.

Benefits

Page 28: Going Mobile First With Drupal

Reduced costs for multiple platforms.

Sustainable.

Future proof.

Works on iPhone 5.

Benefits

Page 29: Going Mobile First With Drupal

Todd

lers

love

iPho

ne 5

Page 30: Going Mobile First With Drupal

One article = one url.

RWD solves challenges.

Page 31: Going Mobile First With Drupal

One article = one url.

Update content once.

RWD solves challenges.

Page 32: Going Mobile First With Drupal

One article = one url.

Update content once.

Maintain one platform only.

RWD solves challenges.

Page 33: Going Mobile First With Drupal

SD

Page 34: Going Mobile First With Drupal

34% more buzzwords per project.

Nah, not really. But your boss loves it anyway.

Page 35: Going Mobile First With Drupal

How?

Page 36: Going Mobile First With Drupal

A combination of techniques and web standards

Page 37: Going Mobile First With Drupal

Flexible grids

Responsive webdesign

Page 38: Going Mobile First With Drupal

Flexible grids

+ media queries

Responsive webdesign

Page 39: Going Mobile First With Drupal

Flexible grids

+ media queries

+ adaptive media

Responsive webdesign

Page 40: Going Mobile First With Drupal

Flexible grids

+ media queries

+ adaptive media

+ web standards

Responsive webdesign

Page 41: Going Mobile First With Drupal

“But he started it...”

Page 42: Going Mobile First With Drupal

Adaptive webdesign?

Fluid or fixed columns doesn’t make a difference for a mobile first approach.

Page 43: Going Mobile First With Drupal

Part I: Why Mobile First?

Page 44: Going Mobile First With Drupal

Overview: Part I

What

Why

Alternatives

What is mobile first?

Page 45: Going Mobile First With Drupal

Overview: Part I

What

Why

Alternatives

The benefits of mobile first.

Page 46: Going Mobile First With Drupal

Overview: Part I

What

Why

Alternatives A look at alternatives.

Page 47: Going Mobile First With Drupal

What is mobile first?

Page 48: Going Mobile First With Drupal

“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

Page 49: Going Mobile First With Drupal

The traditional way

Page 50: Going Mobile First With Drupal

Design/build a desktop version

The traditional way

Page 51: Going Mobile First With Drupal

Design/build a desktop version

Port things to mobile - maybe.

The traditional way

Page 52: Going Mobile First With Drupal

Design/build a desktop version

Port things to mobile - maybe.

Or ‘responsive’. Hide content - after loading it.

The traditional way

Page 53: Going Mobile First With Drupal

Mobile first design

Page 54: Going Mobile First With Drupal

Mobile first is a design method.

But not the focus of today’s session.

Page 55: Going Mobile First With Drupal

Mobile first ties into responsive web design.

And device experiences, RESS and desktop-only.

Page 56: Going Mobile First With Drupal

A development process

Page 57: Going Mobile First With Drupal

Design mobile version first.

A development process

Page 58: Going Mobile First With Drupal

Design mobile version first.

Even if you are not planning on doing a mobile.

A development process

Page 59: Going Mobile First With Drupal

Design mobile version first.

Even if you are not planning on doing a mobile.

Build and build on top of mobile.

A development process

Page 60: Going Mobile First With Drupal

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

Page 61: Going Mobile First With Drupal

Design the mobile version first. Even if you don’t plan on building it.

Page 62: Going Mobile First With Drupal

Benefits

Page 63: Going Mobile First With Drupal

Growth

Creative contraints

Performance

New capabilities

Benefits of mobile first

Page 64: Going Mobile First With Drupal

Mobile is exploding.

Page 65: Going Mobile First With Drupal

Mobile is personal.

Page 66: Going Mobile First With Drupal

SD

Page 67: Going Mobile First With Drupal

Mobile provides constraints.You know those are a good thing, right?

Page 68: Going Mobile First With Drupal

Small screen enforces focus.

Page 69: Going Mobile First With Drupal

Small screen enforces focus.

Allows you to prioritize.

Page 70: Going Mobile First With Drupal

Constraints inspire creativitity.

Page 71: Going Mobile First With Drupal

SD

Page 72: Going Mobile First With Drupal

Enforce performance conciousness.

Page 73: Going Mobile First With Drupal

Enforce performance conciousness.

Benefits all platforms.(if done correctly)

Page 74: Going Mobile First With Drupal

Advanced capabilities

Page 75: Going Mobile First With Drupal

Location

Advanced capabilities

Page 76: Going Mobile First With Drupal

Location

Device orientation

Advanced capabilities

Page 77: Going Mobile First With Drupal

Location

Device orientation

Cameras

Advanced capabilities

Page 78: Going Mobile First With Drupal

Location

Device orientation

Cameras

Touch

Advanced capabilities

Page 79: Going Mobile First With Drupal

Alternatives

Page 80: Going Mobile First With Drupal

Alternatives.

To responsive web design. But mobile first regardless :-)

Page 81: Going Mobile First With Drupal

Part III: Challenges

Page 82: Going Mobile First With Drupal

Overview: Part II

Performance

The challenge

Adaptive media

Aproaches

Page 83: Going Mobile First With Drupal

It’s about performance.

Page 84: Going Mobile First With Drupal

‘Performance test of 347 responsive web sites (in 2012!) reveals absolute train wreck of mobile-last, display:none “strategies”.’

- Stephanie Rieger

Page 85: Going Mobile First With Drupal

‘Only 3% of responsive sites had a much smaller performance footprint on small screens than on large screens #bdconf’

- Brad Frost, @bradfrost

Page 86: Going Mobile First With Drupal

The performant mobile site

Smaller images, lower bandwidth media

Page 87: Going Mobile First With Drupal

The performant mobile site

Smaller images, lower bandwidth media

Fewer graphics

Page 88: Going Mobile First With Drupal

The performant mobile site

Smaller images, lower bandwidth media

Fewer graphics

Progressive loading of JS and resources.

Page 89: Going Mobile First With Drupal

The performant mobile site

Smaller images, lower bandwidth media

Fewer graphics

Progressive loading of JS and resources.

Less content up front (progressive disclosure)

Page 90: Going Mobile First With Drupal

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

Page 91: Going Mobile First With Drupal

The Challenge

Page 92: Going Mobile First With Drupal

Progressively enhance (transform?) a performant mobile website into a full size, full experience large-screen website.

Page 93: Going Mobile First With Drupal

Lazy, asynchronous loading of content and resources.

Two (three) issues

Page 94: Going Mobile First With Drupal

Lazy, asynchronous loading of content and resources.

Adaptive images and media.

Two (three) issues

Page 95: Going Mobile First With Drupal

Lazy, asynchronous loading of content and resources.

Adaptive images and media.

Modular, progressive loading of resources.

Two (three) issues

Page 96: Going Mobile First With Drupal

Lazy loading

Page 97: Going Mobile First With Drupal

Let’s talk lazy loading.

Page 98: Going Mobile First With Drupal

Serve core content as HTML

Page 99: Going Mobile First With Drupal

Load in additional content with js as dimensions, context and capabilities dictate.

Page 100: Going Mobile First With Drupal

Use well defined, streamlined, extendable patterns.

For defining and loading additional content.

Page 101: Going Mobile First With Drupal

Bonus:

With only one request

Page 102: Going Mobile First With Drupal

Adaptive media

Page 103: Going Mobile First With Drupal

Lots of existing solutions. Some of them good.

Page 104: Going Mobile First With Drupal

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

Page 105: Going Mobile First With Drupal

Part III: Requirements

Page 106: Going Mobile First With Drupal

Requirements gathered in workshop. Thanks for contributing. Slide on...

Page 107: Going Mobile First With Drupal

Choices

Drupal 7 unpatched core.

Must work with Varnish, CDNs.

Works well with anonymous users.

Page 108: Going Mobile First With Drupal

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

Page 109: Going Mobile First With Drupal

Part IV: Solutions

Page 110: Going Mobile First With Drupal

An outline for general, configurable Drupal 7 solution for lazy loading.

Page 111: Going Mobile First With Drupal

Configuration and admin interface.

Template files.

Client-side JS.

JSON response from server.

The four components

Page 112: Going Mobile First With Drupal

An extendable contrib module.One admin page. Rewrites page output. Sends JSON output based on URL parameters.

Page 113: Going Mobile First With Drupal

Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’).

Configuration component.

Page 114: Going Mobile First With Drupal

Define named presets for layouts (eg. ‘narrow’, ‘normal’, ‘mobile’).

Select core region(s). Output as HTML.

Configuration component.

Page 115: Going Mobile First With Drupal

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.

Page 116: Going Mobile First With Drupal

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.

Page 117: Going Mobile First With Drupal

page.tpl.php includes <?php print $region; ?> for all regions as normal.

Template component

Page 118: Going Mobile First With Drupal

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

Page 119: Going Mobile First With Drupal

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

Page 120: Going Mobile First With Drupal

SD

Page 121: Going Mobile First With Drupal

Adds an admin page (see above).

Server-side component

Page 122: Going Mobile First With Drupal

Adds an admin page (see above).

Returns optional regions as JSON in 1 request.

Server-side component

Page 123: Going Mobile First With Drupal

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

Page 124: Going Mobile First With Drupal

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

Page 125: Going Mobile First With Drupal

Module grab all required regions, return as a json array using drupal_json_output()

Server-side component 2

Page 126: Going Mobile First With Drupal

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

Page 127: Going Mobile First With Drupal

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

Page 128: Going Mobile First With Drupal

SD

Page 129: Going Mobile First With Drupal

Client-side JS loaded on page-load.

Client-side component

Page 130: Going Mobile First With Drupal

Client-side JS loaded on page-load.

First page load includes lists of presets and mediaqueries in drupal.settings.

Client-side component

Page 131: Going Mobile First With Drupal

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

Page 132: Going Mobile First With Drupal

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

Page 133: Going Mobile First With Drupal

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

Page 134: Going Mobile First With Drupal

You don’t need notes

Baggrund

Målsætninger

Strategi

Løsningsforslag

Page 135: Going Mobile First With Drupal

‘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

Page 136: Going Mobile First With Drupal

Thank you.

slideshare.net/woeldiche

Page 137: Going Mobile First With Drupal

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

Page 138: Going Mobile First With Drupal

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

Page 139: Going Mobile First With Drupal

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

Page 140: Going Mobile First With Drupal

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