Delivering an Amazing Web Experience on Every Device: Responsive Design

See how UC San Diego used responsive web design to transform our campus home page and many other web properties to look great on any device.

Transcript

1. Using Responsive Web Design to future proof your Websites & Apps
2. Brett Pollak Cristian Horta @brettcpollak @cristian_horta #uccsc2012 #cworwd @campusweboffice
3. We are passionate about responsive design
4. we work at UC San Diego We’re right about here
5. The CWO
6. People love these things
7. In about 2 months… …there will be more connected phones than people in the world
8. 5 years ago, the iPhone didn’t exist… …now it generates $100 Billion per year
9. The iPhone is bigger than Microsoft
10. By the fall of 2013 more tablets will be sold than PC’s
11. May 2010 2.19% of visits from mobile Higher Ed. Home Page Visits
12. May 2011 4.77% of visits from mobile Higher Ed. Home Page Visits
13. May 2012 9.82% of visits from mobile Higher Ed. Home Page Visits
14. 112% average increase year over year Higher Ed. Home Page Visits
15. A little bit of history…
16. This is so 2009
17. This is so 2009
22. Find a framework Step 1
24. 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
25. Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Student Affairs IT
27. We launched m.ucsd.edu
28. What about our iPad App?
29. Replace the App Step 2
30. iOS App: powered by m.ucsd.edu
31. m.ucsd.edu iPhone App
32. iPad App 
33. Android App: powered by m.ucsd.edu
34. uxt.ucsd.edu
36. What about all the CMS content?
37. Piloted with the Libraries
38. Courtesy: Brad Frost
39. 2009 22 Screens Visits to campus home page 2012 523 Screens
40. Device Fragmentation 3,997 different Android Devices
41. Device Fragmentation 3,997 different Android Devices
42. 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
43. One of them wrote and article that started a buzz…
44. The dude even wrote a book about it!
46. .HTML (structure) .CSS (layout) The solution is based off existing web technologies
47. CSS3 @media + Fluid Layouts Media Queries
48. Fluid images & media
49. One website that works on all devices
50. One website that works on all devices
52. What about the Mobile Web Framework?
53. You want me to make THIS responsive??
55. Responsive design for Websites & Apps Mobile Framework when RWD won’t work
57. RWD Works for apps too
59. Takeaways
60. Make sure your design looks good in all resolutions Add breakpoints when the design starts to break down
61. fluid layouts using percentages Responsive Design fixed width layouts targeted for specific devices Adaptive Design
63. Be ready to iterate Adjust development cycles to be agile
64. Does it take more time? Yes. It will increase the length of a project by 32.6345% 
65. There is no more “fold” Work with content owners to pair down content
66. Test on real devices Ask different teams to pitch in and help test
67. RWD Downsides 
68. Images Devices with smaller resolutions still need to download the full image
69. RESS Responsive Design + Server Side Components Offload some of the work to the server…
70. 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. What did you learn?
73. 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…
75. Resources RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS Foundation3 Twitter Bootstrap HTML5 Boilerplate
76. Thank You! Brett Pollak Cristian Horta @brettcpollak @cristian_horta #uccsc2012 #cworwd @campusweboffice