Chris Wu
DrupalTaiwan.org

Drupal 8

&

RWD

me.info

Fliegen Creative Studio

DrupalTaiwan.org

Designer

F2E

CMS Builder

Hosting / VPS

Chocolate Design

...

RWD

CAPTAIN DRUPAL

We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.

- John Allsopp, "A dao of Web Design"

Adapt, Respond and Overcome

- Ethan Marcotte

Adapt -> Image

Respond -> Menu

Overcome -> Bandwith

Techniques

Pinkoi
@mike: Media queries, HTML5, RESS

Installation Artist
@even wu: SUSY

WTF about Drupal?

Why Drupal?

RWD in Core

HTML5

Fallback support

Breakpoint

Picturefill.js

Theme (Zen, AT, Bootstrap...etc)

Start with RWD

Setup

Admin Menu

Admin menu

That's all?

Not yet!

Self-Tooling

Responsive Preview(*Proposed)

Responsive Preview(*Proposed)

How about Drupal 7

Mobile Friendly Navigation Toolbar

Picture

Breakpoint

Recap

Responsive Web Design is in Drupal Core
Support HTML5
Preview RWD directly (proposed)

HTML 5

HTML 5 Initiatives

Fallback for non-support browser

HTML5 shiv

Support for new HTML elements.

Rich media elements: <video> and <audio>

Ability to select wrapper HTML tag
in the UI for Drupal's building blocks.

Interaction Matters

HTML 5 Markups

system_element_info()

text / search
tel
url
email
date

number
range
color
checkbox / radio
file

Interaction Matters

Email / Phone / URL

Theme

Basic Themes

Theme

HTML 5

CSS for Media queries

SASS

Grid system

Drush ( Drupal shell command )

Respond.js

HTML5 shiv

and More...

Bootstrap skeleton jQuery Mobile

GUI

GUI

Mobile/Desktop first? Disable?!

Recap

Popular native Drupal themes are in RWD
Developer also integrate popular frameworks
into Drupal theme
Good theme brings you to heaven!

Images

Recall

Adapt, Respond and Overcome

- Ethan Marcotte

Adapt -> Image

Respond -> Menu

Overcome -> Bandwith

Recall

Adapt, Respond and Overcome

- Ethan Marcotte

Adapt -> Size

Respond -> Interaction

Overcome -> Speed, Resolution

Images

Responsive to

Device

Capability

Resolution

Device

Device

Capability

Image style <---> Picture Mapping <---> Breakpoing

Capability

Breakpoints

Capability

Image style

Capability

Picture Mapping

Capability

with Picturefill.js

<div>  <span data-media="(min-width: 240px) and (max-width: 480px)" 
        data-src="http://example.com/.../slide_480x120/.../pic.png"
        width="480" height="120">  </span>  <span></span>
  <span></span>
  <span></span>
  <img src="http://example.com/.../slide_480x120/.../pic.png"
       width="480" height="120"></div>

Resolution

Breakpoint Multiplier

Resolution

more Image styles

Resolution

more Picture mappings

Resolution

with Picturefill.js

<div>  <span data-media="(min-width: 240px) and (max-width: 480px)" 
        data-src="http://example.com/.../slide_480x120/.../pic.png"
        width="480" height="120">
  </span>  <span data-media="...and (min-device-pixel-ratio: 2), 
                    ...and (-o-min-device-pixel-ratio: 2), 
                    ...and (-webkit-min-device-pixel-ratio: 2), 
                    ...and (min-resolution: 2dppx)"        data-src="http://example.com/.../slide_960x240/.../pic.png"
        width="480" height="120">
  </span>  <span></span>
  <span></span>
  <img src="http://example.com/.../slide_480x120/.../pic.png"
       width="480" height="120"></div>

Recap

Image max-width=100% is important
Interaction must be considered. e.g. controller
Picture mapping can help matching
Breakpoints and Image styles
For high resolution device,
try multiplier and add Image styles

Recap

RWD in Drupal core
Better authoring experience
Better UX / UI
Improved Image manipulation
Performance

What Drupal can do?

To Engineer

Developer

To Designer

Join us

DrupalTaiwan.org

chris@gmail.com

fb.com/amourow