• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Responsive Websites with Drupal
 

Building Responsive Websites with Drupal

on

  • 907 views

Presentation from Daniel Tome on Building Responsive Websites with Drupal presented at DrupalGov Canberra 2013 ...

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

Statistics

Views

Total Views
907
Views on SlideShare
907
Embed Views
0

Actions

Likes
1
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • A definition of responsive according to wikipedia is:If you thought this session is about improving the speed of your website in a positive manner, then you’re in the wrong session..
  • How often have you heard mobile site usage described along the following lines:
  • mobile user needs are often based on over-simplified scenarios:While some of these scenarios are often not far from the truth, there is still a prevalent trend for mobile users to be grouped together.Are these assumptions born out the behavior of mobile users, or is their behaviour a product of the poor experiences that are offered to them?
  • “85% of users expect a mobile site to offer an experience better than or equal to a desktop computer.”
  • Most things come down to these options:Dropping content downHide certain content that does not work on mobile
  • The aim of this theme is to show new themers how a few lines of CSS can adapt an existing theme to be "responsive". The CSS applied in the theme make radical visual changes to the original design to emphasize what's happening at each of the "break" points for the content-based media queries. The CSS as written is not appropriate for real Web sites, but acts as a good starting point for people wanting to retrofit their own sites to be responsive.
  • Do nothing. Height of menu will take up a lot of screenSelect menu. Pros: smaller height. Cons.. Hard to show children and larger menus. JS dependent)
  • Alpha release because it hasn’t added all the API features from wooThemesflexslider.It IS stable
  • How often have you heard mobile site usage described along the following lines:
  • Using CSS to hide content in different contexts may not always provide the desired results with assistive technology. Manipulation of the DOM to add or remove page content should be used (e.gappendChild).
  • Yepnope: example. Don’t need parallax on mobile. Then don’t load parallax library. The Adaptive image module provides device-appropriate versions of images from your fields.You can activate adaptive images by adding an adaptive effect to any of your image styles.
  • Drupal 8 Core is responsive out of the box.(as seen on Dave’s earlier talk)

Building Responsive Websites with Drupal Building Responsive Websites with Drupal Presentation Transcript

  • BUILDING RESPONSIVE WEBSITES WITH DRUPAL Daniel Tome
  • DANIEL TOME Drupal Technical Lead Twitter: @danieltome http://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 TELCOAUTHORITY 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 MOVEAND 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’TASSUME 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 https://drupal.org/project/domicile_responsive DOMICILE RETROFIT Do 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
  • 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
  •  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 ACCESSIBILITYARE VERY COMPLEMENTARY, BUT … DOING RESPONSIVE DESIGN DOES NOT MEAN THAT YOUAUTOMATICALLY HAVE ANACCESSIBLE SITEAND 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 MOBILEACCESSIBILITY
  •  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
  • 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