Mobile is so 2011. Make all your campus sites & apps look great on any device.

Transcript

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

   Apps

2. Brett Pollak @brettcpollak #heweb12 #AIM1

3. The CWO

4. I work at UC San Diego right about here…

5. Established in 1960 Main Campus Medical Center Scripps Institute

6. 29,000 TRITONS 23,000 Undergrad 4,500 Graduate 1,500 Medical

7. FIELDS OF STUDY Social Sciences (38.1%) Engineering (20.3%) Biology (18.7%)

   Science/Math (10.3%) Special/Undeclared (6.3%) Humanities (3.3%) Arts (3.0%)

8. UNDERGRADUATE COLLEGES Marshall Muir Revelle Roosevelt Sixth Warren

9. more slices = more distributed IT

10. Table-based layouts were awesome! ucsd.edu 1995-2006

11. Oooh…CSS & JavaScript ucsd.edu 2006 - 2012

12. This was a game changer

13. People love these things

14. In about 2 months… …there will be more connected phones

    than people in the world

15. 5 years ago, the iPhone didn’t exist… …now it generates

    $100 Billion per year

16. The iPhone is bigger than

17. more tablets will be sold than PC’s

18. How did we respond in higher ed?

19. This is so 2009

20. This is so 2009

21. None
22. None
23. None
24. None

25. m.ucsd.edu iPhone App Android App One App to rule them

    all

26. iPad App 

27. Student Affairs IT Academic Affairs IT Housing & Dining IT

    Libraries IT Admin Computing Academic Computing Colleges IT
28. None

29. What about all the CMS content?

30. Piloted with the Libraries

31. Courtesy: Brad Frost

32. 2009 22 Screen Resolutions Visits to campus home page 2012

    523 Screen Resolutions

33. Device Fragmentation 3,997 different Android Devices

34. Device Fragmentation 3,997 different Android Devices

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

36. The dude even wrote a book about it!

37. .HTML (structure) .CSS (layout) The solution is based off existing

    web technologies

38. CSS3 @media + Fluid Layouts Media Queries

39. Fluid images & media

40. One website that works on all devices

41. One website that works on all devices

42. None
43. None
44. None

45. What about the Mobile Web Framework?

46. You want me to make THIS responsive??

47. None

48. Responsive design for Websites & Apps Mobile Framework when RWD

    won’t work
49. None
50. None

51. Retrofit existing design? Going Responsive, what are your options? Create

    new designs?

52. Pros…. Reduces approval workflow Little or no change for desktop

    users Already familiar with the code Retrofit existing site…

53. Cons…. No “mobile first” design Elements designed without scaling in

    mind Unable to leverage frameworks Retrofit existing site…

54. Pros…. Can leverage a framework Plan for how elements work

    at different breakpoints Likely a faster user experience Create new designs…

55. Cons…. Changing design many need more approvals Need to learn

    something new Create new designs…

56. Make sure your design looks good in all resolutions Add

    breakpoints when the design starts to break down

57. fluid layouts using percentages Responsive Design fixed width layouts targeted

    for specific devices Adaptive Design
58. None

59. What if all my content isn’t responsive? Is that OK?

60. Sure Tackle the biggest bang or low hanging fruit first

61. Be ready to iterate Adjust development cycles to be agile

62. Does it take more time? Yes. It will increase the

    length of a project by 32.6345% 

63. There is no more “fold” Work with content owners to

    pair down content

64. Will another technique replace RWD? At some point, probably.

65. Downsides 

66. Tables some solutions available but no magic bullets

67. Images Devices with smaller resolutions still need to download the

    full image

68. RESS Responsive Design + Server Side Components Offload some of

    the work to the server…

69. The Idea is to: Deliver certain components based on the

    device, rather than loading all at once for every device. RWD .js .jpg .php
70. None
71. None

72. 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 4.‐ Finally…
73. None

74. Resources RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS

    Foundation3 Twitter Bootstrap HTML5 Boilerplate

75. Brett Pollak @brettcpollak #heweb12 Thank You!