going mobile first with drupal

Going mobile first with Drupal

This session

This is a workshop.

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

Jesper Wøldiche Rahkonen Municipality of Aarhus

designer / markup marine / project lead /

woeldiche on twitter / quora / linkedin / etc.

About me

About you.

Slides available online.

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.

Part 0: RWD

This workshop

Mobile first in a responsive web design context.

This workshop

Mobile first in a responsive web design context.

Mobile first does not necessitate responsive web design.

This workshop

Mobile first in a responsive web design context.

Mobile first does not necessitate responsive web design.

Alternatives later.

This workshop

Aim for universal access.

Make no assumptions.Or try not to.

That goes for accesibility too.

Design and build for everything in between.

Design and build for everything in between.

Including the next device.

Case: Lancaster U.

Wide screen

Narrow

Tablet sized

Smartphone

Why use RWD?

Reduced costs for multiple platforms.

Benefits

Reduced costs for multiple platforms.

Sustainable.

Benefits

Reduced costs for multiple platforms.

Sustainable.

Future proof.

Benefits

Reduced costs for multiple platforms.

Sustainable.

Future proof.

Works on iPhone 5.

Benefits

Todd

lers

love

iPho

ne 5

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.

RWD solves challenges.

SD

34% more buzzwords per project.

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

How?

A combination of techniques and web standards

Flexible grids

Responsive webdesign

Flexible grids

+ media queries

Responsive webdesign

Flexible grids

+ media queries

+ adaptive media

Responsive webdesign

Flexible grids

+ media queries

+ adaptive media

+ web standards

Responsive webdesign

“But he started it...”

Adaptive webdesign?

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

Part I: Why Mobile First?

Overview: Part I

What

Why

Alternatives

What is mobile first?

Overview: Part I

What

Why

Alternatives

The benefits of mobile first.

Overview: Part I

What

Why

Alternatives A look at alternatives.

What is mobile first?

“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

The traditional way

Design/build a desktop version

The traditional way

Design/build a desktop version

Port things to mobile - maybe.

The traditional way

Design/build a desktop version

Port things to mobile - maybe.

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

The traditional way

Mobile first design

Mobile first is a design method.

But not the focus of today’s session.

Mobile first ties into responsive web design.

And device experiences, RESS and desktop-only.

A development process

Design mobile version first.

A development process

Design mobile version first.

Even if you are not planning on doing a mobile.

A development process

Design mobile version first.

Even if you are not planning on doing a mobile.

Build and build on top of mobile.

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.

A development process

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

Benefits

Growth

Creative contraints

Performance

New capabilities

Benefits of mobile first

Mobile is exploding.

Mobile is personal.

SD

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

Small screen enforces focus.

Small screen enforces focus.

Allows you to prioritize.

Constraints inspire creativitity.

SD

Enforce performance conciousness.

Enforce performance conciousness.

Benefits all platforms.(if done correctly)

Advanced capabilities

Location

Advanced capabilities

Location

Device orientation

Advanced capabilities

Location

Device orientation

Cameras

Advanced capabilities

Location

Device orientation

Cameras

Touch

Advanced capabilities

Alternatives

Alternatives.

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

Part III: Challenges

Overview: Part II

Performance

The challenge

Adaptive media

Aproaches

It’s about performance.

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

- Stephanie Rieger

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

- Brad Frost, @bradfrost

The performant mobile site

Smaller images, lower bandwidth media

The performant mobile site

Smaller images, lower bandwidth media

Fewer graphics

The performant mobile site

Smaller images, lower bandwidth media

Fewer graphics

Progressive loading of JS and resources.

The performant mobile site

Smaller images, lower bandwidth media

Fewer graphics

Progressive loading of JS and resources.

Less content up front (progressive disclosure)

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

The Challenge

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

Lazy, asynchronous loading of content and resources.

Two (three) issues

Lazy, asynchronous loading of content and resources.

Adaptive images and media.

Two (three) issues

Lazy, asynchronous loading of content and resources.

Adaptive images and media.

Modular, progressive loading of resources.

Two (three) issues

Lazy loading

Let’s talk lazy loading.

Serve core content as HTML

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

Use well defined, streamlined, extendable patterns.

For defining and loading additional content.

Bonus:

With only one request

Adaptive media

Lots of existing solutions. Some of them good.

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

Part III: Requirements

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

Choices

Drupal 7 unpatched core.

Must work with Varnish, CDNs.

Works well with anonymous users.

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

Part IV: Solutions

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

Configuration and admin interface.

Template files.

Client-side JS.

JSON response from server.

The four components

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

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 as HTML.

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.

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

Configuration component.

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

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

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.

Template component

SD

Adds an admin page (see above).

Server-side component

Adds an admin page (see above).

Returns optional regions as JSON in 1 request.

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

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

Server-side component

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

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.

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

Server-side component 2

SD

Client-side JS loaded on page-load.

Client-side component

Client-side JS loaded on page-load.

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

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.

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.

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.

Client-side component

You don’t need notes

Baggrund

Målsætninger

Strategi

Løsningsforslag

‘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

Thank you.

slideshare.net/woeldiche

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

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

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

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