Responsive Design for University Websites

Provides information about supporting mobile devices in higher education, focusing specifically on implementing responsive web design.

Transcript

1. 1 #AIwebcast Brett Pollak | University of California, San Diego | bpollak@ucsd.edu CREATING A RESPONSIVE DESIGN FRAMEWORK FOR UNIVERSITY WEBSITES
2. LEARNING OUTCOME After participating… 2 …you will be able to begin applying responsive design techniques to your website.
3. 3 @brettcpollak • Who I am and my point of view • Web dev evolution • Options to support mobile devices • Strategy to support mobile devices • Responsive web design overview / why? • Taking the next steps • Frameworks • Design considerations and trends • Technical considerations • Tips when taking the plunge AGENDA
4. 4 #AIwebcast WHO I AM AND MY POINT OF VIEW
5. 5 @brettcpollak • Director, Campus Web Office (CWO) at UC San Diego • 4 ½ years at UC San Diego • Web Development field since ’01 • 3 years supporting mobile devices • @brettcpollak on the Twitters WHO AM I?
6. 6 @brettcpollak EXPERIENCE DELIVERING TO HIGHER EDUCATION • High Ed Web • EduWeb • Eduniverse • Higher Ed Live • LINK Journal for Higher Education WHERE I’VE DONE STUFF
7. 7 @brettcpollak ABOUT THE CWO… Chancellor Business Affairs Admin Computing CWO Academic Affairs Student Affairs Health Sciences Communications
8. 8 @brettcpollak CAMPUS WEB OFFICE PERSONNEL • Me (Director) • 2 Web Project Managers • 1 Technical Lead • 2 Web Programmers • 1 UX Designer • 2 student workers ABOUT THE CWO…
9. 9 @brettcpollak OUR MODEL AND PHILOSOPHY • Funded centrally by state money - No recharge • Emphasis on self-service, self-sustaining technology • We provide the tools, training, and frameworks • Clients provide the content and maintenance ABOUT THE CWO…
10. 10 #AIwebcast WEB DEVELOPMENT EVOLUTION
11. 11 @brettcpollak EARLY 1990S WEB DESIGN
12. 12 @brettcpollak • Single text column using HTML • Mostly text and hyperlinks • Embedded images around 1994 EARLY 1990S WEB DESIGN
13. 13 @brettcpollak • Table-based layouts allowed for multiple columns • Websites were a combination of sliced images and HTML MID 1990S WEB DESIGN ucsd.edu in 1995
14. 14 @brettcpollak LATE 1990 AND 2000S WEB DESIGN • Animation • Flash • CSS/JavaScript • Web 2.0!
17. 17 @brettcpollak In about 2 months, there will be more connected phones than people in the world.
18. 18 @brettcpollak 6 years ago, the iPhone didn’t exist. Now it generates $100 billion per year.
19. 19 @brettcpollak The iPhone is bigger than Microsoft.
20. 20 @brettcpollak Over half of prospective students researched college choices on their mobile phone.
21. 21 @brettcpollak Over the past year we’ve averaged a .5% increase in mobile traffic per month to the campus home page.
22. 22 @brettcpollak About 16% of the traffic to the UCSD home page is from mobile devices.
23. 23 @brettcpollak About 25% of the traffic to the UCSD Student Portal is from mobile devices.
24. 24 #AIwebcast HOW DID UCSD RESPOND TO MOBILE?
25. We need an iPhone app?
28. What’s with this Android?
31. 31 @brettcpollak By late Fall, more tablets will be sold than PCs.
32. Why is the App so small on my New iPad?
33. 33 #AIwebcast OPTIONS TO SUPPORT MOBILE DEVICES
34. m.university.edu Responsive website
35. 35 @brettcpollak • 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
36. 36 @brettcpollak (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
37. 37 @brettcpollak • 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
38. LEARNING OUTCOME POLL 38 What does your university currently support?
39. 39 #AIwebcast STRATEGY TO SUPPORT MOBILE DEVICES
40. 40 @brettcpollak SUPPORTING MOBILE DEVICES ISN’T A “ONE TECHNOLOGY FITS ALL” PROPOSITION. • What do your users expect? • What is the content you are trying to optimize for mobile? - Text vs. Tools • Who is supporting the mobile initiative on your campus? • What is the skillset of your team? DEVELOPING A MOBILE STRATEGY
41. 41 @brettcpollak UCSD’S MOBILE STRATEGY • We had an App so our users expect an App • Distributed IT structure lends itself to a self services model for building mobile Apps • Each IT shop has a different technology preference (Java, .NET, PHP, etc.) • Mobile Web Framework (MWF) for building mobile Web Apps DEVELOPING A MOBILE STRATEGY
42. 42 @brettcpollak Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Colleges IT
43. 43 @brettcpollak m.ucsd.edu iPhone App Android App One App to rule them all
44. LEARNING OUTCOME QUESTIONS 44
45. 45 #AIwebcast RESPONSIVE WEB DESIGN OVERVIEW
47. 47 @brettcpollak This guy had a great idea…
48. 48 @brettcpollak This book changed our thinking.
49. fluid layouts using percentages Responsive Design fixed width layouts targeted for specific devices Adaptive Design
50. 50 @brettcpollak Let’s look at an example.
51. 51 @brettcpollak .HTML (structure) .CSS (layout) The solution is based off existing web technologies.
52. 52 @brettcpollak CSS3 @media + Fluid Layouts Media Queries
53. 53 @brettcpollak Fluid images and media
54. 54 @brettcpollak • Percentages, not pixels • For fonts, use “Ems” instead of point sizes • Media queries – Secret sauce for changing the page layout DIFFERENCES FROM TRADITIONAL WEB DEV
55. 55 @brettcpollak INTRODUCED IN CSS2 WITH PRINT STYLESHEETS <link rel=“stylesheet” type=“text/css “ href=“css/print.css” media=“print” /> MEDIA QUERIES
56. 56 @brettcpollak CSS3 MEDIA QUERIES • Height and width of the browser window • Device width and height • Orientation of the device - Landscape vs. portrait • Resolution MEDIA QUERIES
57. 57 @brettcpollak WAYS TO CALL MEDIA QUERIES Head of the HTML page <link rel=“stylesheet” type=“text/css” href=mobile.css” media=“screen and max- width:480px)” /> MEDIA QUERIES
58. 58 @brettcpollak WAYS TO CALL MEDIA QUERIES In a CSS file @import url(mobile.css) (max-width:480px); MEDIA QUERIES
59. 59 @brettcpollak WAYS TO CALL MEDIA QUERIES In a CSS file @media (max-width: 480px) {header { width:100%;} #somethingelse {display: none;} MEDIA QUERIES
60. 60 #AIwebcast WHY GO RESPONSIVE?
61. 61 @brettcpollak 2009 22 Screen Resolutions Visits to campus home page 2012 523 Screen Resolutions
62. 62 @brettcpollak Device Fragmentation 3,997 different Android Devices
63. 63 @brettcpollak Device Fragmentation 3,997 different Android Devices
64. 64 @brettcpollak • SEO friendly: duplicate content isn’t indexed twice like with mobile site • Link friendly: sending or sharing links are optimized for the device the recipient uses • Optimizes website not just for mobile but for larger screens RESPONSIVE WEBSITE
65. 65 @brettcpollak • Takes more time to develop and test • No bullet proof solution for tables • Load time on smaller devices can be a concern as device needs to download all the assets – RESS and server side detection are maturing DISADVANTAGES OF RWD
66. 66 #AIwebcast OPTIONS FOR GOING RESPONSIVE
67. 67 @brettcpollak GOING RESPONSIVE, WHAT ARE YOUR OPTIONS? Retrofit existing design? Create new designs? OPTIONS
68. 68 @brettcpollak RETROFIT EXISTING SITE PROS • Reduces approval workflow • Little or no change for desktop users • Already familiar with the code
69. 69 @brettcpollak RETROFIT EXISTING SITE CONS • No “mobile first” design • Elements designed without scaling in mind • Unable to leverage frameworks
70. 70 @brettcpollak • Translate pixels into percentages • Use graceful degradation to insert media queries when your design starts to break down RETROFIT EXISTING DESIGNS
71. 960 Pixels
72. .ela-container { float: left; width: 30%; height: 162px; padding: 0 9px 0 0; background: #fefff9; }
73. @media screen and (max-width: 964px) .ela-container { float: left; height: 162px; margin: 0 4.5% 0 0; padding: 0; width: 30%; border: 1px solid #cbcbc3; -webkit-border-radius: 5px; border-radius: 5px; background: -webkit-linear- gradient(top,#fff 0,#eaeaea 100 %); }
74. 74 @brettcpollak CREATE NEW DESIGNS PROS • Can leverage a framework • Plan for how elements work at different breakpoints • Likely a faster user experience
75. 75 @brettcpollak CREATE NEW DESIGNS CONS • Changing design may need more approvals • Need to learn something new
76. LEARNING OUTCOME QUESTIONS 76
77. 77 #AIwebcast FRAMEWORKS
78. 78 @brettcpollak TWO PRIMARY TYPES • Grid layout frameworks – 1140 CSS Grid – HTML5 Boilerplate • Grid layout + UI Library – Twitter Bootstrap – Foundation 3 RESPONSIVE FRAMEWORKS
79. 79 @brettcpollak • Responsive grid • Normalizing CSS • Polyfills for older browsers WHAT IT TYPICALLY INCLUDES GRID LAYOUT FRAMEWORKS
80. 80 @brettcpollak WHAT IT TYPICALLY INCLUDES • Responsive grid • Normalizing CSS • Polyfills for older browsers • UI libraries – Navigation – Form elements – Etc. GRID LAYOUT FRAMEWORKS + UI LIBRARY
81. responsive.vermilion.com/compare.php
82. 82 #AIwebcast DESIGN CONSIDERATIONS AND TRENDS
83. Toggle nav
84. Toggle nav
85. Toggle nav
86. Toggle nav
87. Toggle nav
88. Toggle nav
89. Select-menu nav
90. Select-menu nav
91. Select-menu nav
92. Anchor nav
93. Anchor nav
94. Slide-out nav
95. Slide-out nav
96. Slide-out nav
97. Slide-out nav
98. Slide-out nav
99. Slide-out nav
100. Combination
101. Combination
102. Combination
103. Stacking Navigation
104. Stacking Navigation
105. Stacking Navigation
106. Stacking Navigation
107. Sub-nav drop
108. Sub-nav drop
109. Sub-nav drop
110. 110 #AIwebcast LINKING TO YOUR M.UNIVERSITY.EDU SITE FROM RESPONSIVE HOME PAGE
117. bradfrost.github.com/this-is-responsive/patterns.html
118. http://www.lukew.com/ff/entry.asp?1514
119. 119 #AIwebcast COMMON RESPONSIVE WIDGETS
120. Responsive image rotator
121. Responsive video resizer
122. Responsive headings
125. 125 #AIwebcast INSPIRATION
128. 128 #AIwebcast TECHNICAL CONSIDERATIONS
129. 129 @brettcpollak • Responsive Design is just CSS and JavaScript so it should work in your CMS. • If retrofitting existing templates, show content owners their site on mobile. • Fix stuff that’s broken. RWD AND YOUR CMS
130. 130 @brettcpollak Make templates available.
131. 131 @brettcpollak Make templates available.
132. 132 #AIwebcast TIPS WHEN TAKING THE PLUNGE
133. 133 @brettcpollak • Make sure your design looks good in all resolution. • Add breakpoints when the design starts to break down. GETTING STARTED
134. 134 @brettcpollak GETTING STARTED WHAT IF ALL MY CONTENT ISN’T RESPONSIVE? IS THAT OK? Sure! Tackle the biggest bang or low-hanging fruit first.
135. 135 @brettcpollak • Be ready to iterate. • Adjust development cycles to be agile. GETTING STARTED
136. 136 @brettcpollak GETTING STARTED DOES IT TAKE MORE TIME? Yes. It will increase the length of a project by 32.6345% 
137. 137 @brettcpollak • There is no more “fold.” • Work with content owners to pare down content. GETTING STARTED
138. LEARNING OUTCOME QUESTIONS 138
139. LEARNING OUTCOME EVALUATION Please remember to complete the event evaluation. Your comments will help us continually improve the quality of our programs. Thank you! Follow us: © Copyright 2013 Academic Impressions 139 http://www.surveymonkey.com/s/Z6R3MN2