building responsive websites with drupal

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:&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

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