Bumps in the Road to Responsive

BUMPS IN THE ROAD Addressing the Challenges of Responsive Web Design

WHO WE ARE • Michael Miles (@mikemiles86) • Salem Ghoweri (@salem_ghoweri) • Genuine Interactive (@WeAreGenuine)

AS RESPONSIVE WEB DESIGN (RWD) IS MATURING WE ARE BEGINNING TO IDENTIFY AND UNDERSTAND THE ROADBLOCKS

WE ARE HERE TO SHARE WHAT WE’VE LEARNED

RWD CHALLENGES • many designers still think in terms of pixels • traditional design software only supports static layouts • confusion about what’s appropriate for which tools • where to start? start from scratch? use community theme? • page bloat (multiple versions of images, tons of javascript and css)

IN THE BEGINNING OF THE WEB…

• Everyone used the same up-to-date Modern browser

• On the same sized, perfectly calibrated monitor

“Ever” -no one

ASSUMPTIONS PERIOD: .COM BUBBLE - IPHONE • “The web is just a page in a browser” • Defined • Only design areas. needed one design http://nataliemilton.com/wp-content/uploads/2013/03/960px-900.png

ASSUMPTIONS PERIOD: IPHONE - IPAD • Mobile web browsing • Separate, different for users. • Need two designs experiences

U.S. SMARTPHONE ADOPTION 80 60 40 20 0 2008 2009 2010 2011 2012 2013 2014 2015

iPhone 4S iPhone 5 Nexus 4 Galaxy S 3 Galaxy S 4 Droid DNA HTC One Galaxy Note 2 LG Optimus Galaxy Mega TODAY, THINGS ARE COMPLICATED. Galaxy Mega Nexus 7 Galaxy Note Galaxy Tab 3 iPad Nexus 10 Galaxy Tab 3 iPad Mini

ASSUMPTIONS PERIOD: IPAD - TODAY • There is only one web • There is only one design • Users expect one experience

A PAGE IS NOT A PAGE Can’t make assumptions Fixed sizes: Gone Must think differently

HOW DO I DESIGN RESPONSIVELY?

• Elements will shift • Define columns • Keep it simple

MIT EECS eesc.mit.edu

FROM FIXED TO FLUID Designers: • Think in terms of percentages • Make element proportional to parents • Discuss with developers

SHARED VALUE INITIATIVE sharedvalue.org

FLUID FLEXIBLE GRID • Does • Easy not care about device to implement • Create clear, creative designs

TOOLS IN AN AGE OF RESPONSIVE

VS

DESIGNING IN PHOTOSHOP • Static mockups don’t translate into flexible layouts • Impractical • Difficult to mockup infinite number of layout variations to communicate behavior, gestures, animations, etc.

YOU CAN’T DESIGN FOR THE UNKNOWN

DESIGNING IN THE BROWSER • Not everyone is comfortable coding • Problematic to build what hasn’t been explicitly defined • Unknown factor: setting expectations and client sign-off are difficult You lose details that might not easily translate to the browser!

• Adobe Edge Reflow

THE “PERFECT” RWD DESIGNER TOOL DOESN’T EXIST YET & MIGHT NEVER EXIST

DON’T WAIT FOR PERFECT; USE WHAT WORKS FOR YOU

ADDITIONAL SOLUTIONS

Style Tiles

Style Guide

Interactive Prototype

THEMING Front-end Development & Drupal

WHERE TO START? • Project has a timeline and budget • Limited • Need amount of time to start to know your options

TWO ROADS TO TRAVEL Community Theme Custom Theme

FIRST WORLD PROBLEMS

THREE BEST OPTIONS (in our experience) Adaptive Themes Omega Zen

ADAPTIVE THEMES drupal.org/project/adaptivetheme PROS • Modern techniques (SASS, Compass, etc) • Plugin • Plays system well with others CONS • Advanced settings • Generate CSS files (6-8)

OMEGA drupal.org/project/omega PROS • Optimize • Drupal • Drush core CSS 8 CSS Standards Integration CONS • Advanced settings • Unique “Zones” paradigm

ZEN drupal.org/project/zen PROS • Flexible • SASS CONS Fluid Grid • Very or vanilla CSS • More • Clean Templates basic time consuming

CUSTOM THEME PROS • Fits your workflow • You control the code • Customized to fit projects CONS • Very time consuming to build correctly • No community support

WHICH TO CHOOSE? Budget Flexibility & Time

COMBATTING PAGE BLOAT • Having a single code base with RWD is a double-edged sword • Common practice is to hide and show device specific content (display: none) • Remember: mobile users expect fast browsing experience Browsers still download hidden inline images!

THE SOLUTION: SEND LESS CODE!

drupal.org/project/conditional_styles ; Set the conditional stylesheets that are processed by IE. stylesheets-conditional[lt IE 7][all][] = ie6-and-below.css stylesheets-conditional[IE 9][all][] = ie9.css stylesheets-conditional[IE][print][] = ie-print.css

THE SOLUTION: SEND LESS CODE! • Conditional Stylesheets Module • Modularize CSS with SASS & Compass • Load, fire your JavaScript conditionally (RequireJS, EnquireJS, Modernizr) +

THE SOLUTION: SEND LESS CODE! • Conditional Stylesheets Module • Modularize CSS with SASS & Compass • Load, fire your JavaScript conditionally (RequireJS, EnquireJS, Modernizr)

IMAGES. IMAGES EVERYWHERE.

IMAGES. IMAGES EVERYWHERE. • Images account for ~60% of page weight • Resolution independence is one of the largest challenges facing RWD • Many techniques exist, browser vendor solutions in-progress (Picturefill, srcset) Retina is here to stay.

SOLUTION #1: TACKLE EVERYTHING BUT INLINE <IMG>

ICONS & SPRITES Font-icons such as Icomoon or Font Awesome

SVG Scalable Vector Graphics (SVGs) for vector graphics, textures

CSS3 Background image gradients, textures, box-shadow, etc.

CSS3 CSS Hat plugin for Photoshop

CSS3 colorzilla.com/gradient-editor

SOLUTION #2: DELIVER HIGH-RES INLINE IMAGES, OPTIMIZED LIKE HELL

DELIVER SUPER-OPTIMIZED RETINA <IMG> Retina: 45KB 1024 x 768 Non-retina: 95KB 400 x 300 filamentgroup.com/lab/rwd_img_compression/

SOLUTION 3: SHIM INLINE RESPONSIVE IMAGES (FOR NOW)

Adaptive Images Module JS-set cookie determines which image version is served

PictureFill Module future <picture> element today via JS  <span  data-­‐picture  data-­‐alt=”A  giant  stone  face  at  The  Bayon  temple  in  Angkor  Thom,   Cambodia”>                <span  data-­‐src=”small.jpg”></span>                <span  data-­‐src=”medium.jpg”          data-­‐media=”(min-­‐width:  400px)”></span>                <span  data-­‐src=”large.jpg”            data-­‐media=”(min-­‐width:  800px)”></span>                <span  data-­‐src=”extralarge.jpg”  data-­‐media=”(min-­‐width:  1000px)”></span>                <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.  Same  img  src  as  the  initial,   unqualified  source  element.  -­‐-­‐>                <noscript>                        <img  src=”external/imgs/small.jpg”  alt=”A  giant  stone  face  at  The  Bayon  temple   in  Angkor  Thom,  Cambodia”>                </noscript>        </span>

DOWN THE ROAD

DRUPAL 8 MOBILE INITIATIVE groups.drupal.org/mobile/drupal-8 • All core themes are HTML5 and responsive • Front-end performance improvements (device detection, conditional loading, responsive images) • Documentation & Guidelines

TAKEAWAYS • think percentages, not pixels • mockup in BOTH photoshop & browser, or use tool like Reflow • code your own theme if experienced, have time, and need lots of flexibility • otherwise use Adaptive Theme, Omega, or Zen • reduce page bloat with Compass, Sass., and conditional JS loading

?

THANK YOU!