Responsive Design UCSD System Administrator Meeting

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!
7. June 29th, 2007
9. People love these things
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. What are our 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
21. m.ucsd.edu iPhone App Android App One App to rule them all
22. Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Colleges IT
24. What about all the CMS content?
25. Piloted with the Libraries
26. Courtesy: Brad Frost
27. 2009 22 Screens Visits to campus home page 2012 523 Screens
28. Device Fragmentation 3,997 different Android Devices
29. Device Fragmentation 3,997 different Android Devices
30. This article created a buzz…
31. The dude even wrote a book about it!
32. One website that looks great on all devices
33. One website that looks great on all devices
34. RWD KEY COMPONETS
35. Viewport <meta content="initial-scale=1.0" name="viewport"/> • Mobile browsers render site at a larger width than the actual device width • By using the viewport scale, we can set to default viewport width, rather than a simulated width
36. Media Queries body { background-color: #FFF; color: #333; } @media screen and (max-width: 768px) { body { background-color: #333; color: #FFF; } } CSS3 @media
37. Fluid Layouts Not Tables – Div Layout Percentage Widths
38. Fluid Images We can accomplish this by setting all images to have a max width of 100% Images should flex with your layout
39. @media screen and (max-width: 768px) { img{ max-width: 100% !important; } } Fluid Images
40. .HTML .CSS viewport: 1024px
41. .HTML .CSS viewport: 768px
42. Do’s & Dont’s
43. 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!
44. Table based layout:
45. Fluid Layout (using div’s):
46. <object> Flash YouTube Iframes etc… </object>
47. DO: Analyze and rethink your content if necessary. “LESS IS MORE” DON’T: Create visual clutter
48. From the Sysadmin List
49. RWD & Forms
50. TWO PRIMARY TYPES • Grid layout frameworks – 1140 CSS Grid – HTML5 Boilerplate • Grid layout + UI Library – Twitter Bootstrap – Foundation 3 (By Zurb) Responsive Frameworks
51. • Responsive grid • Normalizing CSS • Polyfills for older browsers WHAT IT TYPICALLY INCLUDES Grid Layout Frameworks
52. WHAT IT TYPICALLY INCLUDES • Responsive grid • Normalizing CSS • Polyfills for older browsers • UI libraries – Navigation – Form elements – Etc. Grid Layout Frameworks + UI Library
53. responsive.vermilion.com/compare.php
54. WHAT IT INCLUDES • Responsive layout • Polyfills for older browsers • UI libraries (Kitchen Sink) – Navigation – Form elements – Etc. • UC San Diego branding & CWO Support CWO Decorator & Templates
56. Questions? Contact us: cwo@ucsd.edu
57. Thank You! Contact us: cwo@ucsd.edu