building responsive websites with drupal
DESCRIPTION
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 8TRANSCRIPT
BUILDING RESPONSIVE WEBSITES WITH DRUPALDaniel Tome
DANIEL TOMEDrupal Technical Lead
Twitter: @danieltomehttp://danieltome.com
OUR DRUPAL CLIENTS
AGENDA
Overview of responsive design
Responsive with Drupal
Keeping it accessible
Optimisation considerations
Look into the future
OVERVIEW OF RESPONSIVE DESIGN
The creation of a site that is able to adapt to the context in which it is being viewed.
WHAT IS A RESPONSIVE WEBSITE
Based on Adaptive theme Mobile viewport. Design looks and
feels like a mobile app
Haroldparkbymirvac.com
HAROLD PARK MIRVAC
Based on Bootstrap theme 3d Slide-In menu – Meny Excellent handling of print media
Bullseye-digital.com
BULLSEYE REBRAND BULLSEYE
Based on Adaptive theme Simplified grid structure
Telco.nsw.gov.au
TELCO AUTHORITY NSW GOVERNMENT
WHY IS IT IMPORTANT?
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
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
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.
GENERALLY MOBILE USERS ARE ON THE MOVE AND ARE GOING TO USE YOUR SITE TO DO BASIC RESEARCH
“” - lie
– 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
DON’T ASSUME THAT “MOBILE” USERS WANT LESS CONTENT“ ”
EXISTING NON-RESPONSIVE WEBSITE
Existing website
Audit content
Identify break points by content not device
RESPONSIVE WITH DRUPAL
RESPONSIVE HELLO WORLD
Drupal theme
For learning
https://drupal.org/project/domicile_responsive
DOMICILE RETROFITDO NOT TO USE ON A REAL WEBSITE.
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
Fenceshttps://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: </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
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
Slideshows/Carousels Tables (tabular data) Orientation changes: Portrait to Landscape Unsupported Browsers
CHALLENGES
Skip Views Slideshow
Flex Slider– https://drupal.org/project/flexslider
Orbit (Zurb)– http://zurb.com/playground/orbit-jquery-image-slider
SLIDESHOWS
Allow access to table outside of theme. Eg: Dowload
Alternatives with JS
Demo: http://zurb.com/playground/projects/responsive-tables/index.html
TABLES
Be careful with viewport zooming Use the grid system Custom selectors on media queries need to be applied on multiple
breakpoints
ORIENTATION CHANGES
KEEPING IT ACCESSIBLE
RESPONSIVE WEB DESIGN AND ACCESSIBILITY ARE VERY COMPLEMENTARY, BUT … DOING RESPONSIVE DESIGN DOES NOT MEAN THAT YOU AUTOMATICALLY HAVE AN ACCESSIBLE SITE AND VICE VERSA.
“
”- Baruch Sachs
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
MOBILE ACCESSIBILITY
Hit areas
should be
finger friendly
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
DESKTOP ACCESSIBILITY WITH RWD
OPTIMISATION CONSIDERATIONS
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
LOOK INTO THE FUTURE
Strategy for the Mobile Initiative
https://groups.drupal.org/node/207248
John Albin
DRUPAL 8 MOBILE INITIATIVE