Presentation by Technical Lead Daniel Tome to Drupal South Wellington in February 2014 on the mobile responsive site for Bullseye client Sydney Living Museums

1. CASE STUDY:
SYDNEY LIVING MUSEUMS
Daniel Tome

2. DANIEL TOME
Drupal Technical Lead
Twitter: @danieltome
http://danieltome.com

3. OUR DRUPAL CLIENTS

4. MY DRUPAL TEAM
!4

5. AGENDA
§ Introduction to Sydney Living Museums and review of the website
!
§ Challenges
!
§ Build (agile approach, module selection, custom modules built)
!
§ Deploying to Acquia Cloud (load tests, varnish caching)
!
§ Improving performance
!
§ Questions

6. INTRODUCTION

7. HISTORIC HOUSES TRUST OF NSW
§ Established in 1980
§ NSW Office of Environment and Heritage within the NSW DPC.
§ Care for 12 of the most important historic houses, gardens and museums in NSW
§ In 2013 they launched their new identity as Sydney Living Museums.
§ Previous website was on CMS Squiz
!7

8. SYDNEYLIVINGMUSEUMS.COM.AU
!
§ Responsive website based on
Zurb foundation
§ Editorial workflow
§ Custom inline grid editor
§ Lazy loading

10. CHALLENGES
!
§ Very long pages of content with large imagery
!
§ Designs had not been approved at start of project
!
§ Client required a simplified content and layout creation
!
§ Panels had limitations
!
§ Incompatibilities between, Panels/Panelizer, Workbench, Field
Collections and Node Clone

11. WIREFRAMES

20. SPRINT ZERO

21. THEME SELECTION
BOOTSTRAP
!
!
!
!
!
!
!
!
!
§ https://drupal.org/
project/bootstrap
ZURB FOUNDATION
!
!
!
!
!
!
!
!
!
§ https://drupal.org/
project/zurbfoundation
ADAPTIVE / OMEGA
!
!
!
§ https://drupal.org/
project/adaptivetheme
!
§ https://drupal.org/
project/omega
!
§ Custom built

22. Progressive enhancement
MOBILE
FIRST
!
Mobile first requires a new approach to
planning, UX design, and development
that puts handheld devices at the
forefront of both strategy and
implementation.

23. DATA-INTERCHANGE (RESPONSIVE IMAGES)

24. MODULE SELECTION

25. MODULE SELECTION

26. SPARK
Spark is a Drupal distribution which
aims to work out solutions to
authoring experience problems in the
field and apply to latest development
versions of Drupal.

27. CUSTOM
MODULES

28. SIMPLIFYING CONTENT ENTRY FOR GRIDS

29. HTTP://MARQUEE.BY DEMO

30. GRID INLINE-EDITOR

31. OPENSOURCE
§ Huge developer community:
§ Nearly 1000 developers contributed code to Drupal 7.
§ Over 8000 modules are listed on Drupal.org.
§ Over 10 years of development.
§ 600,000+ users on drupal.org

32. SOCIAL MEDIA TIMELINE

33. AGILE APPROACH

34. SCRUM

35. SCRUM ADVANTAGES
§ Your progress will be measured as real working software.
!
§ All requirements will be expressed and implemented in terms of their
value to users.
!
§ Documentation is kept lightweight and user-focused.
!
§ By not attempting to define every last design detail up front, you and your
project stakeholders will not need perfect foresight.
!
§ You will be able to innovate or even change your mind based on your
experience of the working
!

36. TOOLS
• JIRA
!
• STASH
!
• GOOGLE HANGOUTS

37. JIRA AGILE BOARD

38. ACQUIA CLOUD

39. ACQUIA CLOUD WORKFLOW

40. LOAD TESTING – BLITZ.IO

41. IMPROVING
PERFORMANCE

42. MODULES AND UTILITIES
• VARNISH CACHE
!
• MEMCACHE
!
• ACQUIA PURGE
!
• EXPIRE MODULE
!
• LAZY LOADING

43. LAZY LOADING
§ Only 1kb library
§ Cross-browser (ie7)
§ Retina support
!
§ http://luis-almeida.github.io/unveil

44. SUMMARY
!
§ Agile approach embraces change
!
§ Use lazy loading when having a heavy image-driven website
!
§ A responsive theme is important
!
§ Keep an eye out for our module

46. START A CONVERSATION
!
FOLLOW US ON TWITTER:
@BULLSEYEDIGITAL
!
FOLLOW ME ON TWITTER:
@DANIELTOME