Responsive Web Design: Marketing Council Presentation

Transcript

1. Using Responsive Web Design to future proof your Websites & Apps
2. Brett Pollak Cristian Horta @brettcpollak @cristian_horta @campusweboffice
3. EARLY 1990S WEB DESIGN
4. • Single text column using HTML • Mostly text and hyperlinks • Embedded images around 1994 EARLY 1990S WEB DESIGN
5. • Table-based layouts allowed for multiple columns • Websites were a combination of sliced images and HTML MID 1990S WEB DESIGN ucsd.edu in 1995
6. LATE 1990 AND 2000S WEB DESIGN • Animation • Flash • CSS/JavaScript • Web 2.0!
8. People love these things
9. Over half of prospective students researched college choices on their mobile phone.
10. Over the past year we’ve averaged a .5% increase in mobile traffic per month to the campus home page.
11. About 16% of the traffic to the UCSD home page is from mobile devices.
12. About 22% of the traffic to the UCSD Student Portal is from mobile devices.
13. OPTIONS TO SUPPORT MOBILE DEVICES
14. m.university.edu Responsive website
15. • Built using Objective C (Apple) or Java (Android) • User downloads app to the phone • Deploying Apps means having staff learn the technology that powers each platform • Can use a code builder such as Titanium or Phonegap APP STORE
16. (m.university.edu) • Separate site where layout and content are geared specifically to mobile devices • HTML, CSS, JavaScript usually designed for smaller screen sizes • Frameworks include Kurogu, Mobile Web Framework, JQuery Mobile, etc. MOBILE SITE
17. • One website who’s layout automatically conforms to the resolution of the device accessing the site • One set of code to maintain • Cross platform: works on all modern browsers • Frameworks include Twitter Bootstrap, Foundation3, HTML5 Boilerplate, etc. RESPONSIVE WEBSITE
18. HOW DID UCSD RESPOND TO MOBILE?
19. We need an iPhone app?
22. What’s with this Android?
25. By late Fall, more tablets will be sold than PCs.
26. Why is the App so small on my New iPad?
28. 2009 22 Screens Visits to campus home page 2012 523 Screens
29. Device Fragmentation 3,997 different Android Devices
30. Device Fragmentation 3,997 different Android Devices
31. 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
32. One of them wrote and article that started a buzz…
33. The dude even wrote a book about it!
34. RWD How does it work?
35. Media Queries CSS3 @media Fluid Layouts +
36. .HTML .CSS viewport: 1024px
37. .HTML .CSS viewport: 768px
38. How RWD was applied to our templates and CMS http://cwo.ucsd.edu/
39. Our process for converting CMS sites to RWD Content Review Content Migration/Retrofitting Testing Go Live
40. If you’re considering RWD
41. 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!
42. Bad layout (using tables):
43. Good layout (DIV’s and CSS):
44. <object> Flash YouTube Iframes etc… </object>
45. DO: Analyze and rethink your content if necessary. “LESS IS MORE” DON’T: Create visual clutter
46. Fluid Images -Optimize images to reduce load times -Images should flow with your layout
47. Thank You! Contact us: cwo@ucsd.edu