drupal case study: sydney living museums by bullseye

46
CASE STUDY: SYDNEY LIVING MUSEUMS Daniel Tome

Upload: bullseye

Post on 05-Dec-2014

1.444 views

Category:

Marketing


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Drupal case study: Sydney Living Museums by Bullseye

CASE STUDY: SYDNEY LIVING MUSEUMSDaniel Tome

Page 2: Drupal case study: Sydney Living Museums by Bullseye

DANIEL TOMEDrupal Technical Lead

Twitter: @danieltomehttp://danieltome.com

Page 3: Drupal case study: Sydney Living Museums by Bullseye

OUR DRUPAL CLIENTS

Page 4: Drupal case study: Sydney Living Museums by Bullseye

MY DRUPAL TEAM

!4

Page 5: Drupal case study: Sydney Living Museums by Bullseye

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

Page 6: Drupal case study: Sydney Living Museums by Bullseye

INTRODUCTION

Page 7: Drupal case study: Sydney Living Museums by Bullseye

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

Page 8: Drupal case study: Sydney Living Museums by Bullseye

!§ Responsive website based on

Zurb foundation

§ Editorial workflow

§ Custom inline grid editor

§ Lazy loading

SYDNEYLIVINGMUSEUMS.COM.AU

Page 9: Drupal case study: Sydney Living Museums by Bullseye
Page 10: Drupal case study: Sydney Living Museums by Bullseye

!§ 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

CHALLENGES

Page 11: Drupal case study: Sydney Living Museums by Bullseye

WIREFRAMES

Page 12: Drupal case study: Sydney Living Museums by Bullseye
Page 13: Drupal case study: Sydney Living Museums by Bullseye
Page 14: Drupal case study: Sydney Living Museums by Bullseye
Page 15: Drupal case study: Sydney Living Museums by Bullseye
Page 16: Drupal case study: Sydney Living Museums by Bullseye
Page 17: Drupal case study: Sydney Living Museums by Bullseye
Page 18: Drupal case study: Sydney Living Museums by Bullseye
Page 19: Drupal case study: Sydney Living Museums by Bullseye
Page 20: Drupal case study: Sydney Living Museums by Bullseye

SPRINT ZERO

Page 21: Drupal case study: Sydney Living Museums by Bullseye

THEME SELECTIONZURB FOUNDATION !!!!!!!!!

§ https://drupal.org/project/zurb-foundation

ADAPTIVE / OMEGA !!!

§ https://drupal.org/project/adaptivetheme !

§ https://drupal.org/project/omega !

§ Custom built

BOOTSTRAP !!!!!!!!!

§ https://drupal.org/project/bootstrap

Page 22: Drupal case study: Sydney Living Museums by Bullseye

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 23: Drupal case study: Sydney Living Museums by Bullseye

DATA-INTERCHANGE (RESPONSIVE IMAGES)

Page 24: Drupal case study: Sydney Living Museums by Bullseye

MODULE SELECTION

Page 25: Drupal case study: Sydney Living Museums by Bullseye

MODULE SELECTION

Page 26: Drupal case study: Sydney Living Museums by Bullseye

SPARKSpark 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.

Page 27: Drupal case study: Sydney Living Museums by Bullseye

CUSTOM MODULES

Page 28: Drupal case study: Sydney Living Museums by Bullseye

SIMPLIFYING CONTENT ENTRY FOR GRIDS

Page 29: Drupal case study: Sydney Living Museums by Bullseye

HTTP://MARQUEE.BY DEMO

Page 30: Drupal case study: Sydney Living Museums by Bullseye

GRID INLINE-EDITOR

Page 31: Drupal case study: Sydney Living Museums by Bullseye

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

Page 32: Drupal case study: Sydney Living Museums by Bullseye

SOCIAL MEDIA TIMELINE

Page 33: Drupal case study: Sydney Living Museums by Bullseye

AGILE APPROACH

Page 34: Drupal case study: Sydney Living Museums by Bullseye

SCRUM

Page 35: Drupal case study: Sydney Living Museums by Bullseye

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 !

Page 36: Drupal case study: Sydney Living Museums by Bullseye

• JIRA !

• STASH !

• GOOGLE HANGOUTS

TOOLS

Page 37: Drupal case study: Sydney Living Museums by Bullseye

JIRA AGILE BOARD

Page 38: Drupal case study: Sydney Living Museums by Bullseye

ACQUIA CLOUD

Page 39: Drupal case study: Sydney Living Museums by Bullseye

ACQUIA CLOUD WORKFLOW

Page 40: Drupal case study: Sydney Living Museums by Bullseye

LOAD TESTING – BLITZ.IO

Page 41: Drupal case study: Sydney Living Museums by Bullseye

IMPROVINGPERFORMANCE

Page 42: Drupal case study: Sydney Living Museums by Bullseye

• VARNISH CACHE !

• MEMCACHE !• ACQUIA PURGE !

• EXPIRE MODULE !

• LAZY LOADING

MODULES AND UTILITIES

Page 43: Drupal case study: Sydney Living Museums by Bullseye

LAZY LOADING

§ Only 1kb library § Cross-browser (ie7) § Retina support !

§ http://luis-almeida.github.io/unveil

Page 44: Drupal case study: Sydney Living Museums by Bullseye

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

Page 45: Drupal case study: Sydney Living Museums by Bullseye
Page 46: Drupal case study: Sydney Living Museums by Bullseye

!FOLLOW US ON TWITTER: @BULLSEYEDIGITAL !FOLLOW ME ON TWITTER: @DANIELTOME

START A CONVERSATION