Responsive Web Design @ UC San Diego: Sharecase 2012

Transcript

1. Using Responsive Web Design to future proof your Websites & Apps
2. Brett Pollak Cristian Horta @brettcpollak @cristian_horta #sharecase12 @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. May 2010 2.19% of visits from mobile Higher Ed. Home Page Visits
10. May 2011 4.77% of visits from mobile Higher Ed. Home Page Visits
11. May 2012 9.82% of visits from mobile Higher Ed. Home Page Visits
12. 112% average increase year over year Higher Ed. Home Page Visits
13. A little bit of history…
14. This is so 2009
15. This is so 2009
20. Find a framework Step 1
22. 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
23. Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Student Affairs IT
25. We launched m.ucsd.edu
26. Replace the App Step 2
27. iOS App: powered by m.ucsd.edu
28. m.ucsd.edu iPhone App
29. iPad App 
30. Android App: powered by m.ucsd.edu
31. uxt.ucsd.edu
33. What about all the CMS content?
34. Piloted with the Libraries
35. Courtesy: Brad Frost
36. 2009 22 Screens Visits to campus home page 2012 523 Screens
37. Device Fragmentation 3,997 different Android Devices
38. Device Fragmentation 3,997 different Android Devices
39. 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
40. One of them wrote and article that started a buzz…
41. The dude even wrote a book about it!
43. Cristian Horta Web Project/Operations Manager, CWO chorta@ucsd.edu • RWD, how does it work? (media queries) • Do’s and Don’ts • How to get started
44. RESPONSIVE WEB DESIGN AWESOME IS
45. But, How does it work?
46. Media Queries CSS3 @media Fluid Layouts +
47. .HTML .CSS viewport: 1024px
48. .HTML .CSS viewport: 768px
49. Fluid Images & Media
50. Do’s & Dont’s
51. If you’re considering RWD DO: Analyze and rethink your content if necessary. “LESS IS MORE” DON’T: Create visual clutter
52. DON’T AVOID: The use of tables. Especially for layout! DO: Use DIV’s and CSS instead. IF YOU MUST: Make sure they’re capable of flexing. Use tables for what they were intended to do, tabular data!
53. Bad layout (using tables):
54. Good layout (DIV’s and CSS):
55. So, you want to jump on the bandwagon! We can help!
56. CMS + HTML Toolkit Toolkit (HTML Templates) Cost Availability Dynamic Content Hosted Solution Yes Partially CMS (Content Management System) Help Desk Yes No No Yes Restricted Available for Download $0 ?
57. On your own? RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS Foundation3 Twitter Bootstrap HTML5 Boilerplate
58. Thank You! Contact us: cwo@ucsd.edu