Bumps in the Road to Responsive
A presentation at Design4Drupal in in Boston, MA, USA by Michael Miles
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!
Building a responsive Drupal site with a team of designers can be a bit challenging. As designers and developers work together to present a successful final product to clients, there are some challenges that will come up in the process. In this session, Genuine developers, Mike Miles and Salem Ghoweri will present solutions to three main issues that developers face when creating responsive Drupal sites with designers.
Here are the issues and solutions that will be discussed at Design 4 Drupal:
-
What are the challenges when designing for responsive and Drupal? Realize potential roadblocks before presenting to clients to prevent any designs that are not feasible or practical for a Drupal site. -
Discuss the challenges developers face when building in Drupal for responsive sites. We’ll help you figure out what needs to be done to get Drupal output to work for responsive in the most time-efficient way possible. This will save you and your client time and money. -
The final product is not meeting client’s expectations and has limited responsive capabilities. What went wrong in front-end development and what were the challenges faced when theming Drupal for responsive. We’ll discuss the different possibilities and solutions to present a successful final product.
for free. You
can too.
