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

Presentation performed at High Ed Web, 2012

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
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
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
45. What about the Mobile Web Framework?
46. You want me to make THIS responsive??
48. Responsive design for Websites & Apps Mobile Framework when RWD won’t work
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
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
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…
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!