This document discusses challenges of responsive web design and provides solutions. It addresses issues like designers thinking in pixels rather than percentages, page bloat from multiple image versions, and lack of ideal design tools. Suggested approaches include using a fluid grid, delivering optimized responsive images, modular CSS, and conditionally loading content. The document also recommends starting with a community theme like AdaptiveTheme, Omega or Zen to save time. Drupal 8 is advancing responsive features like mobile initiatives and conditional loading to improve front-end performance.

1. BUMPS INTHE ROAD
Addressing the Challenges of Responsive Web Design

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

3. AS RESPONSIVE WEB DESIGN (RWD) IS MATURING
WE ARE BEGINNINGTO
IDENTIFYAND UNDERSTAND
THE ROADBLOCKS

4. WE ARE HERETO SHARE
WHAT WE’VE LEARNED

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

6. INTHE
BEGINNING
OFTHE WEB...

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

8. • On the same sized, perfectly calibrated monitor

11. “Ever” -no one

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

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

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

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

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

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

19. HOW DO I DESIGN
RESPONSIVELY?

21. • Elements will shift • Define columns • Keep it simple

22. eesc.mit.edu
MIT EECS

23. FROM FIXEDTO FLUID
Designers:
• Think in terms of percentages
• Make element proportional to parents
• Discuss with developers

24. SHAREDVALUE INITIATIVE
sharedvalue.org

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

26. TOOLS IN AN
AGE OF RESPONSIVE

27. VS

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

29. YOU CAN’T DESIGN FORTHE UNKNOWN

30. DESIGNING
INTHE BROWSER
You lose details that might
not easily translate to 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

31. • Adobe Edge Reflow

33. THE “PERFECT” RWD DESIGNER
TOOL DOESN’T EXISTYET
& MIGHT NEVER EXIST

34. DON’T WAIT FOR PERFECT;
USE WHAT WORKS FORYOU

35. ADDITIONAL
SOLUTIONS

36. StyleTiles

37. Style Guide

38. Interactive Prototype

39. Front-end Development & Drupal
THEMING

40. WHERETO START?
• Project has a timeline and
budget
• Limited amount of time to start
• Need to know your options

41. TWO ROADSTOTRAVEL
Community Theme CustomTheme

42. FIRST WORLD PROBLEMS

43. THREE BEST OPTIONS
(in our experience)
AdaptiveThemes Omega Zen

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

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

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

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

48. WHICHTO CHOOSE?
Flexibility &Time
Budget

49. 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!

50. THE SOLUTION:
SEND LESS CODE!

51. ; 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
drupal.org/project/conditional_styles

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

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

54. IMAGES. IMAGES EVERYWHERE.

55. • 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.
IMAGES. IMAGES EVERYWHERE.

56. SOLUTION #1:
TACKLE EVERYTHING BUT
INLINE <IMG>

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

58. SVG
ScalableVector Graphics (SVGs) for vector graphics, textures

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

60. CSS3
CSS Hat plugin for Photoshop

61. CSS3
colorzilla.com/gradient-editor

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

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

64. SOLUTION 3:
SHIM INLINE RESPONSIVE IMAGES
(FOR NOW)

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

66. <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>
PictureFill Module
future <picture> element today via JS

67. DOWNTHE ROAD

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

69. 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 AdaptiveTheme, Omega, or Zen
• reduce page bloat with Compass, Sass., and conditional JS loading

70. ?

72. THANKYOU!