Responsive Web Design @ UC San Diego: Sharecase 2012

Transcript

1. Using Responsive Web Design
   to future proof your Websites & Apps
   

   View Slide

2. Brett Pollak Cristian Horta
   @brettcpollak @cristian_horta
   #sharecase12
   @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. May 2010
   2.19% of visits
   from mobile
   Higher Ed. Home Page Visits
   

   View Slide

10. May 2011
    4.77% of visits
    from mobile
    Higher Ed. Home Page Visits
    

    View Slide

11. May 2012
    9.82% of visits
    from mobile
    Higher Ed. Home Page Visits
    

    View Slide

12. 112% average
    increase
    year over year
    Higher Ed. Home Page Visits
    

    View Slide

13. A little bit of history…
    

    View Slide

14. This is so 2009
    

    View Slide

15. This is so 2009
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. Find a framework
    Step 1
    

    View Slide

21. View Slide

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

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

    View Slide

24. View Slide

25. We launched m.ucsd.edu
    

    View Slide

26. Replace the App
    Step 2
    

    View Slide

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

    View Slide

28. m.ucsd.edu iPhone App
    

    View Slide

29. iPad App 
    

    View Slide

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

    View Slide

31. uxt.ucsd.edu
    

    View Slide

32. View Slide

33. What about all the CMS content?
    

    View Slide

34. Piloted with the Libraries
    

    View Slide

35. Courtesy: Brad Frost
    

    View Slide

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

    View Slide

37. Device Fragmentation
    3,997 different
    Android Devices
    

    View Slide

38. Device Fragmentation
    3,997 different
    Android Devices
    

    View Slide

39. We weren’t the only ones trying to solve this problem
    Tantek Celik, Dan Cedarholm, Jeremy Keith, Eric Meyer, Ethan Marcotte, Jeffrey Zeldman, Nicole Sullivan, Wendy Chisolm
    

    View Slide

40. One of them wrote and article that started a buzz…
    

    View Slide

41. The dude even wrote a book about it!
    

    View Slide

42. View Slide

43. Cristian Horta
    Web Project/Operations Manager, CWO
    chorta@ucsd.edu
    • RWD, how does it work? (media queries)
    • Do’s and Don’ts
    • How to get started
    

    View Slide

44. RESPONSIVE
    WEB DESIGN
    AWESOME
    IS
    

    View Slide

45. But,
    How does it
    work?
    

    View Slide

46. Media Queries
    CSS3
    @media
    Fluid Layouts
    +
    

    View Slide

47. .HTML .CSS
    viewport: 1024px
    

    View Slide

48. .HTML .CSS
    viewport: 768px
    

    View Slide

49. Fluid Images & Media
    

    View Slide

50. Do’s &
    Dont’s
    

    View Slide

51. If you’re considering RWD
    DO: Analyze and rethink your
    content if necessary.
    “LESS IS MORE”
    DON’T: Create visual clutter
    

    View Slide

52. DON’T AVOID: The use of
    tables. Especially for layout!
    DO: Use DIV’s and CSS
    instead.
    IF YOU MUST:
    Make sure they’re capable of
    flexing. Use tables for what they
    were intended to do, tabular data!
    

    View Slide

53. Bad layout (using tables):
    

    View Slide

54. Good layout (DIV’s and CSS):
    

    View Slide

55. So, you want to jump on the
    bandwagon!
    We can
    help!
    

    View Slide

56. CMS + HTML Toolkit
    Toolkit
    (HTML Templates)
    Cost
    Availability
    Dynamic Content
    Hosted Solution Yes Partially
    CMS
    (Content Management System)
    Help Desk Yes No
    No Yes
    Restricted Available for Download
    $0 ?
    

    View Slide

57. On your own?
    RESPONSIVE WEB DESIGN
    By Ethan Marcotte alistapart.com mediaqueri.es
    FRAMEWORKS Foundation3 Twitter Bootstrap
    HTML5 Boilerplate
    

    View Slide

58. Thank
    You!
    Contact us: cwo@ucsd.edu
    

    View Slide