building responsive websites with drupal

36
BUILDING RESPONSIVE WEBSITES WITH DRUPAL Daniel Tome

Upload: bullseye

Post on 10-May-2015

2.410 views

Category:

Design


1 download

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 8

TRANSCRIPT

Page 1: Building Responsive Websites with Drupal

BUILDING RESPONSIVE WEBSITES WITH DRUPALDaniel Tome

Page 2: Building Responsive Websites with Drupal

DANIEL TOMEDrupal Technical Lead

Twitter: @danieltomehttp://danieltome.com

Page 3: Building Responsive Websites with Drupal

OUR DRUPAL CLIENTS

Page 4: Building Responsive Websites with Drupal
Page 5: Building Responsive Websites with Drupal

AGENDA

Overview of responsive design

Responsive with Drupal

Keeping it accessible

Optimisation considerations

Look into the future

Page 6: Building Responsive Websites with Drupal

OVERVIEW OF RESPONSIVE DESIGN

Page 7: Building Responsive Websites with Drupal

The creation of a site that is able to adapt to the context in which it is being viewed.

WHAT IS A RESPONSIVE WEBSITE

Page 8: Building Responsive Websites with Drupal

Based on Adaptive theme Mobile viewport. Design looks and

feels like a mobile app

Haroldparkbymirvac.com

HAROLD PARK MIRVAC

Page 9: Building Responsive Websites with Drupal

Based on Bootstrap theme 3d Slide-In menu – Meny Excellent handling of print media

Bullseye-digital.com

BULLSEYE REBRAND BULLSEYE

Page 10: Building Responsive Websites with Drupal

Based on Adaptive theme Simplified grid structure

Telco.nsw.gov.au

TELCO AUTHORITY NSW GOVERNMENT

Page 11: Building Responsive Websites with Drupal

WHY IS IT IMPORTANT?

Page 12: Building Responsive Websites with Drupal

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

Page 13: Building Responsive Websites with Drupal

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

Page 14: Building Responsive Websites with Drupal

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.

Page 15: Building Responsive Websites with Drupal

GENERALLY MOBILE USERS ARE ON THE MOVE AND ARE GOING TO USE YOUR SITE TO DO BASIC RESEARCH

“” - lie

Page 16: Building Responsive Websites with Drupal

– 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

Page 17: Building Responsive Websites with Drupal

DON’T ASSUME THAT “MOBILE” USERS WANT LESS CONTENT“ ”

Page 18: Building Responsive Websites with Drupal

EXISTING NON-RESPONSIVE WEBSITE

Existing website

Audit content

Identify break points by content not device

Page 19: Building Responsive Websites with Drupal

RESPONSIVE WITH DRUPAL

Page 20: Building Responsive Websites with Drupal

RESPONSIVE HELLO WORLD

Drupal theme

For learning

https://drupal.org/project/domicile_responsive

DOMICILE RETROFITDO NOT TO USE ON A REAL WEBSITE.

Page 21: Building Responsive Websites with Drupal

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

Page 22: Building Responsive Websites with Drupal

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

Page 23: Building Responsive Websites with Drupal

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

Page 24: Building Responsive Websites with Drupal

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

CHALLENGES

Page 25: Building Responsive Websites with Drupal

Skip Views Slideshow

Flex Slider– https://drupal.org/project/flexslider

Orbit (Zurb)– http://zurb.com/playground/orbit-jquery-image-slider

SLIDESHOWS

Page 26: Building Responsive Websites with Drupal

Allow access to table outside of theme. Eg: Dowload

Alternatives with JS

Demo: http://zurb.com/playground/projects/responsive-tables/index.html

TABLES

Page 27: Building Responsive Websites with Drupal

Be careful with viewport zooming Use the grid system Custom selectors on media queries need to be applied on multiple

breakpoints

ORIENTATION CHANGES

Page 28: Building Responsive Websites with Drupal

KEEPING IT ACCESSIBLE

Page 29: Building Responsive Websites with Drupal

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

Page 30: Building Responsive Websites with Drupal

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

Page 31: Building Responsive Websites with Drupal

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

Page 32: Building Responsive Websites with Drupal

OPTIMISATION CONSIDERATIONS

Page 33: Building Responsive Websites with Drupal

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

Page 34: Building Responsive Websites with Drupal

LOOK INTO THE FUTURE

Page 35: Building Responsive Websites with Drupal

Strategy for the Mobile Initiative

https://groups.drupal.org/node/207248

John Albin

DRUPAL 8 MOBILE INITIATIVE

Page 36: Building Responsive Websites with Drupal