EduWeb Presentation: Responsive Design @ UC San Diego

Transcript

1. Using Responsive Web Design to future proof your Websites & Apps
2. Emily Deere Exec. Director, IT Applications E: edeere@ucsd.edu T: @edeere • Stats • Mobile & UCSD • Organizational support of central web services Brett Pollak Director, CWO E: bpollak@ucsd.edu T: @brettcpollak • Mobile framework • Transition to Responsive Web Design • Looking ahead
3. In about 2 months… …there will be more connected phones than people in the world
4. 5 years ago, the iPhone didn’t exist… …now it generates $100 Billion per year
5. The iPhone is bigger than
6. By the fall of 2013 more tablets will be sold than PC’s
8. May 2010 2.19% of visits from mobile Higher Ed. Home Page Visits
9. May 2011 4.77% of visits from mobile Higher Ed. Home Page Visits
10. May 2012 9.82% of visits from mobile Higher Ed. Home Page Visits
11. 112% average increase year over year Higher Ed. Home Page Visits
12. This is so 2009
13. iPhone Application Launch - 2009
14. This is so 2009
17. Our UI Design needed a new approach… User Interface was buried in middleware Technology was aging Developers wanted to use modern tools Web App Development
18. We hosted a competition!
19. UI Design Guidelines for Apps
20. An organizational shift occurred
23. Benefits of the Transition
26. Find a framework Step 1
28. 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
29. Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Student Affairs IT
31. We launched m.ucsd.edu
32. What about our iPad App?
33. Replace the App Step 2
34. iOS App: powered by m.ucsd.edu
35. m.ucsd.edu iPhone App
36. iPad App 
37. Android App: powered by m.ucsd.edu
38. uxt.ucsd.edu
40. What about all the CMS content?
41. Piloted with the Libraries
42. Courtesy: Brad Frost
43. 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
44. One of them wrote and article that started a buzz…
45. The dude even wrote a book about it!
47. .HTML (structure) .CSS (layout) The solution is based off existing web technologies
48. CSS3 @media + Fluid Layouts Media Queries
49. Fluid images & media
50. One website that works on all devices
51. One website that works on all devices
53. What about the Mobile Web Framework?
54. You want me to make THIS responsive??
56. Responsive design for Websites & Apps Mobile Framework when RWD won’t work
58. Works for apps too
61. Make sure your design looks good in all resolutions Add breakpoints when the design starts to break down
63. Device resolutions to access ucsd.edu in one month
64. fluid layouts using percentages Responsive Design fixed width layouts targeted for specific devices Adaptive Design
66. Be ready to iterate Adjust development cycles to be agile
67. Does it take more time? Yes. It will increase the length of a project by 32.6345% 
68. There is no more “fold” Work with content owners to pair down content
69. Test on real devices Ask different teams to pitch in and help test
70. Downsides 
71. Images Devices with smaller resolutions still need to download the full image
72. RESS Responsive Design + Server Side Components Offload some of the work to the server…
73. The Idea is to: Deliver certain components based on the device, rather than loading all at once for every device. RWD .js .jpg .php
76. 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…
77. Do it!
78. Resources RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS Foundation3 Twitter Bootstrap HTML5 Boilerplate
79. cwo.ucsd.edu