Going Mobile as a Community: A Case Study from Stanford

Presented at the 2013 Bay Area Drupal Camp Mobile Summit.

How does a small team support a large, diverse community with efficient, affordable website solutions? How do we enable a whole community to "go mobile?" In this case study, I share how Stanford Web Services has approached designing centralized tools and resources to help the Stanford community go mobile.

Transcript

1. GOING MOBILE AS
   A COMMUNITY
   A Case Study from Stanford
   OCTOBER 25, 2013 • BADCAMP
   Megan Erin Miller Web Designer, Stanford Web Services
   meganem@stanford.edu • @meganerinmiller
   

   View Slide

2. OUR CHALLENGE
   

   View Slide

3. The Stanford Community
   §  Thousands of websites
   §  Every level of experience
   §  Small units with no web person
   §  Large units with whole web teams
   OUR CHALLENGE
   

   View Slide

4. A challenging task
   §  How do you support a community this large?
   §  How do you provide efficient, affordable
   centralized website solutions?
   OUR CHALLENGE
   

   View Slide

5. §  Founded in 2011
   §  Small centralized team
   §  We design and build Drupal websites
   §  We also maintain central web services
   OUR CHALLENGE
   Stanford Web Services
   http://webservices.stanford.edu
   

   View Slide

6. Make it easy to…
   §  make a website…
   §  make an accessible, secure, stable website
   §  make a more harmonious Stanford web
   presence
   §  go mobile responsive
   OUR CHALLENGE
   

   View Slide

7. Raising awareness of mobile
   §  Mobile Awareness Project
   §  jQuery Mobile templates
   §  Example sites as proof of concept
   OUR CHALLENGE
   

   View Slide

8. But how do we scale?
   §  Tools for the whole community
   §  A small team
   OUR CHALLENGE
   

   View Slide

9. OUR STRATEGY
   

   View Slide

10. Solve for the 80%
    §  Solutions that meet most common needs
    §  Actively engage with community and listen
    OUR STRATEGY
    

    View Slide

11. Design for beginners
    §  Beginner site builders
    §  Empowering through self-service
    OUR STRATEGY
    

    View Slide

12. Ease the barrier to entry
    §  Simpler user experience
    §  Enable fast site creation
    §  Hide but don’t disable advanced
    functionality
    OUR STRATEGY
    

    View Slide

13. Reusable solutions
    §  Reusable tools
    §  For self-service and complex development
    OUR STRATEGY
    

    View Slide

14. Standards allow for
    better support
    §  Standardized platform & environment
    §  Curated modules and themes
    §  Better central documentation
    OUR STRATEGY
    

    View Slide

15. OUR SOLUTION
    

    View Slide

16. Stanford Sites
    http://sites.stanford.edu
    §  Drupal hosting platform
    §  Curated modules
    §  Centralized themes
    §  Supported environment
    §  Easy site request process
    OUR SOLUTION
    

    View Slide

17. Centralized Themes
    http://drupalthemes.stanford.edu
    §  Open Framework base theme
    §  Subthemes with branding
    OUR SOLUTION
    

    View Slide

18. Themes Strategy
    §  Always consider the site builder
    §  Community feedback and contribution
    
    OUR SOLUTION
    

    View Slide

19. Going responsive
    §  Sophisticated responsive regions
    (following a set responsive pattern)
    §  Standardized responsive menu
    
    OUR SOLUTION
    

    View Slide

20. Responsive regions
    §  Blocks & regions approach
    §  “Flow” and “Stacked” regions
    §  Utilize Block Class module
    OUR SOLUTION
    

    View Slide

21. OUR SOLUTION
    

    View Slide

22. OUR SOLUTION
    Flow regions
    

    View Slide

23. OUR SOLUTION
    Stacked regions
    

    View Slide

24. OUR SOLUTION
    Combination
    approach
    

    View Slide

25. OUR SOLUTION
    Our responsive
    regions meet 80%
    of layout needs
    

    View Slide

26. Responsive menu
    §  Standardized responsive behavior
    §  Keep it simple
    OUR SOLUTION
    

    View Slide

27. OUR SOLUTION
    Responsive menu
    

    View Slide

28. Examples
    §  Undergrad
    §  Department of English
    §  DoResearch
    §  Graduate School of Business
    OUR SOLUTION
    

    View Slide

29. OUR SOLUTION
    http://undergrad.stanford.edu
    

    View Slide

30. OUR SOLUTION
    http://english.stanford.edu
    

    View Slide

31. OUR SOLUTION
    http://doresearch.stanford.edu
    

    View Slide

32. OUR SOLUTION
    http://gsb.stanford.edu
    

    View Slide

33. IN CONCLUSION
    

    View Slide

34. Site builder as end user
    §  Always have implementation in mind
    §  Responsive is not just about theme, it’s how
    we build and how we create content
    §  Cleaner, more scalable solutions
    IN CONCLUSION
    

    View Slide

35. Standards let us scale
    §  Central platform & environment
    §  Central themes
    §  Central modules and features
    §  Standardized responsive patterns
    §  Central documentation & resources
    §  Fostering a community of practice
    IN CONCLUSION
    

    View Slide

36. Mobile is not just about
    themes and templates
    §  It’s about changing perceptions
    §  Educating a community
    §  Integrated solutions
    IN CONCLUSION
    

    View Slide

37. Stanford Sites (Drupal hosting)
    http://sites.stanford.edu
    Drupal Themes
    http://drupalthemes.stanford.edu
    Stanford Web Services Blog
    http://swsblog.stanford.edu
    
    IN CONCLUSION
    

    View Slide

38. THANK YOU!
    Megan Erin Miller Web Designer, Stanford Web Services
    meganem@stanford.edu • @meganerinmiller
    

    View Slide