Presentation from Daniel Tome on Building Responsive Websites with Drupal presented at DrupalGov Canberra 2013 http://drupalact.org.au/events/drupalgov-canberra-2013/conference/schedule In the 45 minutes of the session these will be the topics that will be covered: 10 minutes – Overview of responsive design and why it is important 20 minutes – Methods of implementing it with Drupal. Explaining modules, themes and challenges 10 minutes – Keeping it accessible in the government sector 5 minutes – What things can be optimised and the future of RWD with Drupal 8

1. BUILDING RESPONSIVE
WEBSITES WITH DRUPAL
Daniel Tome

2. DANIEL TOME
Drupal Technical Lead
Twitter: @danieltome
http://danieltome.com

3. OUR DRUPAL CLIENTS

5. AGENDA
 Overview of responsive design
 Responsive with Drupal
 Keeping it accessible
 Optimisation considerations
 Look into the future

6. OVERVIEW OF
RESPONSIVE
DESIGN

7. The creation of a site that is able to adapt
to the context in which it is being viewed.
WHAT IS A RESPONSIVE WEBSITE

8.  Based on Adaptive theme
 Mobile viewport. Design looks and feels
like a mobile app
 Haroldparkbymirvac.com
HAROLD PARK MIRVAC

9.  Based on Bootstrap theme
 3d Slide-In menu – Meny
 Excellent handling of print media
 Bullseye-digital.com
BULLSEYE REBRAND BULLSEYE

10.  Based on Adaptive theme
 Simplified grid structure
 Telco.nsw.gov.au
TELCOAUTHORITY NSW GOVERNMENT

11. WHY IS IT IMPORTANT?

12. NATIVE APPS
 Pros
– Available for offline use
– Provide a quick and smooth experience
– Access to device features (camera, etc)
 Cons
– Expensive
– Limited platform support
– Hard to do well
– You still need a website
ALTERNATIVES
MOBILE SPECIFIC WEBSITE
 Pros
̶ Optimised for speed easier
̶ Can target older devices
̶ No limitations for design
 Cons
̶ Dealing with redirects
̶ Tablets usually are not targeted
̶ Tends to offer an incomplete experience

13.  Pros
– Only need to maintain a single website
– No need for user agent detection
– No need for specific URL redirects
– Addresses multiple devices: phones, tablets, desktops, tv, etc
– Link sharing works the same for all devices
– Future ready
 Cons
– Same content for all devices
– Cross browser and device incompatibilities
– Generally slower than m.dot website
– Testing time increased
RESPONSIVE WEB DESIGN

14. MOBILE
FIRST
Progressive enhancement
Mobile first requires a new approach to planning, UX
design, and development that puts handheld devices
at the forefront of both strategy and implementation.

15. GENERALLY MOBILE USERS ARE ON THE
MOVEAND ARE GOING TO USE YOUR
SITE TO DO BASIC RESEARCH
“
” - lie

16. – The mobile user is on the move
– The mobile user is easily distracted
– The mobile user needs the information quickly
– The mobile user only wants to carry out one action
– The mobile user wants less content
MOBILE SCENARIOS

17. DON’TASSUME THAT “MOBILE” USERS
WANT LESS CONTENT“
”

18. EXISTING NON-RESPONSIVE WEBSITE
Existing website
Audit content
Identify break points
by content not device

19. RESPONSIVE
WITH DRUPAL

20. RESPONSIVE HELLO WORLD
https://drupal.org/project/domicile_responsive
DOMICILE RETROFIT
Do not to use on a real website.

21.  Omega
– https://drupal.org/project/omega
 Bootstrap
– https://drupal.org/project/bootstrap
 Adaptive
– https://drupal.org/project/adaptivetheme
 Zen
– https://drupal.org/project/zen
 Zurb
– https://drupal.org/project/zurb-foundation
MOST COMMON DRUPAL RWD THEMES

22. Fences
https://drupal.org/project/fences
Turn this:
<div class="field field-name-field-test field-type-text field-label-
above">
<div class="field-label">Foobar field:&nbsp;</div>
<div class="field-items">
<div class="field-item even">Leaner markup means better front-end
performance.</div>
</div>
</div>
Into This
<h3 class="field-label">Foobar field</h3>
<p class="field-foobar">Leaner markup means better front-end
performance.</p>
USEFUL MODULES

23.  Do Nothing
– Just add padding
 Select Menu
– Show menu in a <select> dropdown box
 Toggle
– Small icon/toggle in header that displays the menu as a popup
 Sidebar fly-out
– Similar to toggle, but allows longer menu structure. (made popular by facebook)
MENU LAYOUTS

24.  Slideshows/Carousels
 Tables (tabular data)
 Orientation changes: Portrait to Landscape
 Unsupported Browsers
CHALLENGES

25.  Skip Views Slideshow
 Flex Slider
– https://drupal.org/project/flexslider
 Orbit (Zurb)
– http://zurb.com/playground/orbit-jquery-image-slider
SLIDESHOWS

26.  Allow access to table outside of theme. Eg: Dowload
 Alternatives with JS
 Demo: http://zurb.com/playground/projects/responsive-tables/index.html
TABLES

27.  Be careful with viewport zooming
 Use the grid system
 Custom selectors on media queries need to be applied on multiple breakpoints
ORIENTATION CHANGES

28. KEEPING IT
ACCESSIBLE

29. RESPONSIVE WEB DESIGN AND
ACCESSIBILITYARE VERY COMPLEMENTARY,
BUT … DOING RESPONSIVE DESIGN DOES
NOT MEAN THAT YOUAUTOMATICALLY HAVE
ANACCESSIBLE SITEAND VICE VERSA.
“
”- Baruch Sachs

30.  Viewport should be allowed to be zoomed 200%
 Focus order is still important
 Colour contrast between background and
foreground needs to be greater than desktop
MOBILEACCESSIBILITY

31.  Scrollbars needed when content does not fit viewport
 Must respond correctly to removal of CSS
 Should be readable without specific colours
 Position and reading order must remain the same
 Instead of hiding content with CSS, use DOM manipulation
DESKTOPACCESSIBILITY WITH RWD

32. OPTIMISATION
CONSIDERATIONS

33.  Yepnope library
– http://yepnopejs.com/
 Lazy loading
 Adaptive images
– https://drupal.org/project/adaptive_image
– https://drupal.org/project/picture  Used in Drupal 8 core backported to D7
LOADING WHAT YOU NEED

34. LOOK INTO THE
FUTURE

35. Strategy for the Mobile Initiative
https://groups.drupal.org/node/207248
John Albin
DRUPAL 8 MOBILE INITIATIVE