Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Responsive Websites with Drupal

2,961 views

Published on

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

Published in: Design, Technology
  • Be the first to comment

Building Responsive Websites with Drupal

  1. 1. BUILDING RESPONSIVE WEBSITES WITH DRUPAL Daniel Tome
  2. 2. DANIEL TOME Drupal Technical Lead Twitter: @danieltome http://danieltome.com
  3. 3. OUR DRUPAL CLIENTS
  4. 4. AGENDA  Overview of responsive design  Responsive with Drupal  Keeping it accessible  Optimisation considerations  Look into the future
  5. 5. OVERVIEW OF RESPONSIVE DESIGN
  6. 6. The creation of a site that is able to adapt to the context in which it is being viewed. WHAT IS A RESPONSIVE WEBSITE
  7. 7.  Based on Adaptive theme  Mobile viewport. Design looks and feels like a mobile app  Haroldparkbymirvac.com HAROLD PARK MIRVAC
  8. 8.  Based on Bootstrap theme  3d Slide-In menu – Meny  Excellent handling of print media  Bullseye-digital.com BULLSEYE REBRAND BULLSEYE
  9. 9.  Based on Adaptive theme  Simplified grid structure  Telco.nsw.gov.au TELCOAUTHORITY NSW GOVERNMENT
  10. 10. WHY IS IT IMPORTANT?
  11. 11. 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
  12. 12.  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
  13. 13. 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.
  14. 14. GENERALLY MOBILE USERS ARE ON THE MOVEAND ARE GOING TO USE YOUR SITE TO DO BASIC RESEARCH “ ” - lie
  15. 15. – 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
  16. 16. DON’TASSUME THAT “MOBILE” USERS WANT LESS CONTENT“ ”
  17. 17. EXISTING NON-RESPONSIVE WEBSITE Existing website Audit content Identify break points by content not device
  18. 18. RESPONSIVE WITH DRUPAL
  19. 19. RESPONSIVE HELLO WORLD https://drupal.org/project/domicile_responsive DOMICILE RETROFIT Do not to use on a real website.
  20. 20.  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
  21. 21. 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
  22. 22.  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
  23. 23.  Slideshows/Carousels  Tables (tabular data)  Orientation changes: Portrait to Landscape  Unsupported Browsers CHALLENGES
  24. 24.  Skip Views Slideshow  Flex Slider – https://drupal.org/project/flexslider  Orbit (Zurb) – http://zurb.com/playground/orbit-jquery-image-slider SLIDESHOWS
  25. 25.  Allow access to table outside of theme. Eg: Dowload  Alternatives with JS  Demo: http://zurb.com/playground/projects/responsive-tables/index.html TABLES
  26. 26.  Be careful with viewport zooming  Use the grid system  Custom selectors on media queries need to be applied on multiple breakpoints ORIENTATION CHANGES
  27. 27. KEEPING IT ACCESSIBLE
  28. 28. RESPONSIVE WEB DESIGN AND ACCESSIBILITYARE VERY COMPLEMENTARY, BUT … DOING RESPONSIVE DESIGN DOES NOT MEAN THAT YOUAUTOMATICALLY HAVE ANACCESSIBLE SITEAND VICE VERSA. “ ”- Baruch Sachs
  29. 29.  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
  30. 30.  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
  31. 31. OPTIMISATION CONSIDERATIONS
  32. 32.  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
  33. 33. LOOK INTO THE FUTURE
  34. 34. Strategy for the Mobile Initiative https://groups.drupal.org/node/207248 John Albin DRUPAL 8 MOBILE INITIATIVE

×