UC San Diego's move to responsive web design

Transcript

1. UC San Diego’s move to Responsive Web Design
2. Brett Pollak @brettcpollak #mwfcon @campusweboffice
3. The CWO
4. People love these things
5. In about 2 months… …there will be more connected phones than people in the world
6. 5 years ago, the iPhone didn’t exist… …now it generates $100 Billion per year
7. The iPhone is bigger than Microsoft
8. By the fall of 2013 more tablets will be sold than PC’s
9. UCSD’s History with MWF…
10. Why we chose MWF Find a framework
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
13. Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Student Affairs IT
15. We launched m.ucsd.edu
16. Replace the App Replace the App
17. iOS App: powered by m.ucsd.edu
18. m.ucsd.edu iPhone App
19. iPad App 
20. Android App: powered by m.ucsd.edu
21. uxt.ucsd.edu
23. What about all the CMS content?
24. Piloted with the Libraries
25. Courtesy: Brad Frost
26. 2009 22 Screens Visits to campus home page 2012 523 Screens
27. Device Fragmentation 3,997 different Android Devices
28. Device Fragmentation 3,997 different Android Devices
29. People smarter than us we’re tackling this problem…
30. The dude even wrote a book about it!
31. Resources RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS Foundation3 Twitter Bootstrap HTML5 Boilerplate
32. .HTML (structure) .CSS (layout) The solution is based off existing web technologies
33. CSS3 @media + Fluid Layouts Media Queries
34. Fluid images & media
36. One website that works on all devices
37. One website that works on all devices
39. What about the Mobile Web Framework?
40. You want me to make THIS responsive??
42. Responsive design for Websites & Apps Mobile Framework when RWD won’t work
44. RWD Works for apps too
46. RWD Downsides 
47. Images Devices with smaller resolutions still need to download the full image
48. RESS Responsive Design + Server Side Components Offload some of the work to the server…
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
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…