$30 off During Our Annual Pro Sale. View Details »

UC San Diego's move to responsive web design

bpollak
September 06, 2012

UC San Diego's move to responsive web design

bpollak

September 06, 2012
Tweet

More Decks by bpollak

Other Decks in Technology

Transcript

  1. UC San Diego’s move to
    Responsive Web Design

    View Slide

  2. Brett Pollak
    @brettcpollak
    #mwfcon
    @campusweboffice

    View Slide

  3. The CWO

    View Slide

  4. People love these things

    View Slide

  5. In about 2 months…
    …there will be more
    connected phones
    than people in the world

    View Slide

  6. 5 years ago, the
    iPhone didn’t exist…
    …now it generates
    $100 Billion per year

    View Slide

  7. The iPhone is
    bigger than
    Microsoft

    View Slide

  8. By the fall of 2013
    more tablets will
    be sold than PC’s

    View Slide

  9. UCSD’s History with MWF…

    View Slide

  10. Why we chose MWF
    Find a framework

    View Slide

  11. View Slide

  12. Student
    Affairs
    IT
    Academic
    Affairs
    IT
    Housing &
    Dining
    IT
    Libraries
    IT
    Admin
    Computing
    Academic
    Computing
    Student
    Affairs
    IT
    Framework that required data feeds had downsides

    View Slide

  13. Student
    Affairs
    IT
    Academic
    Affairs
    IT
    Housing &
    Dining
    IT
    Libraries
    IT
    Admin
    Computing
    Academic
    Computing
    Student
    Affairs
    IT

    View Slide

  14. View Slide

  15. We launched m.ucsd.edu

    View Slide

  16. Replace the App
    Replace the App

    View Slide

  17. iOS App: powered by m.ucsd.edu

    View Slide

  18. m.ucsd.edu iPhone App

    View Slide

  19. iPad App 

    View Slide

  20. Android App: powered by m.ucsd.edu

    View Slide

  21. uxt.ucsd.edu

    View Slide

  22. View Slide

  23. What about all the CMS content?

    View Slide

  24. Piloted with the Libraries

    View Slide

  25. Courtesy: Brad Frost

    View Slide

  26. 2009 22 Screens
    Visits to campus home page
    2012 523 Screens

    View Slide

  27. Device Fragmentation
    3,997 different
    Android Devices

    View Slide

  28. Device Fragmentation
    3,997 different
    Android Devices

    View Slide

  29. People smarter than us we’re tackling this problem…

    View Slide

  30. The dude even wrote a book about it!

    View Slide

  31. Resources
    RESPONSIVE WEB DESIGN
    By Ethan Marcotte alistapart.com mediaqueri.es
    FRAMEWORKS Foundation3 Twitter Bootstrap
    HTML5 Boilerplate

    View Slide

  32. .HTML
    (structure)
    .CSS
    (layout)
    The solution is based off existing web technologies

    View Slide

  33. CSS3
    @media
    +
    Fluid Layouts Media Queries

    View Slide

  34. Fluid images & media

    View Slide

  35. View Slide

  36. One website that works on all devices

    View Slide

  37. One website that works on all devices

    View Slide

  38. View Slide

  39. What about the Mobile Web Framework?

    View Slide

  40. You want me to make THIS
    responsive??

    View Slide

  41. View Slide

  42. Responsive design for Websites & Apps
    Mobile Framework when RWD won’t work

    View Slide

  43. View Slide

  44. RWD
    Works for apps too

    View Slide

  45. View Slide

  46. RWD
    Downsides 

    View Slide

  47. Images
    Devices with smaller
    resolutions still need to
    download the full image

    View Slide

  48. RESS
    Responsive Design + Server Side Components
    Offload some of the work to the server…

    View Slide

  49. The Idea is to:
    Deliver certain components based on the device, rather
    than loading all at once for every device.
    RWD .js .jpg .php

    View Slide

  50. View Slide

  51. 1.- Use a Responsive Web Design framework as the
    primary way to deliver websites & web apps
    2.- Use a Mobile Framework to augment when
    responsive design won’t work
    3.-Deliver the frameworks through a central host and
    allow other IT units to leverage the capabilities
    Our Philosophy…

    View Slide