UC San Diego's move to responsive web design

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