Essential Safety precautions during monsoon season
How Responsive Design Solved Our Mobile Woes, Or Not …
1. How Responsive Design Solved
Our Mobile Woes, Or Not …
TATJANA SALCEDO
WEB STRATEGIST
THE UNIVERSITY OF VERMONT
2. UNIVERSITY OF VERMONT
Founded in 1791
Only state university in
Vermont
13,000 Students
8 Schools and Colleges
Commonly known as
UVM or Universitas
Viridis Montis
3. The Mobile Web
Initiative is important -
information must be
made seamlessly
available on any
device.
- Tim Berners-Lee
7. Higher Ed Mobile Challenges
College and university websites are often large and
decentralized
Funding constraints impede development of new (or
existing) mobile initiatives
Many homepages (and landing pages) crowded with
many links and multiple navigational areas
Sites cater to a diverse audience with diverse needs
8. A Journey to RWD
The evolution of mobile at the university
The case for responsive design
An evolutionary responsive design process
“Mobile first”
RWD template kits
RWD design patterns
Statistics and performance testing
The journey forward
14. Creating a Dedicated Mobile Site for UVM
Usable on a wide variety of mobile devices
Compatible with existing IT infrastructure
Easy to update and maintain
Leverages existing content from a variety of sources
and locations
Platform with a customizable design
Ability to include content of “highest value”
Use of the m.dot standard (m.uvm.edu)
16. Our Most Popular Content
Non-mobile Visitors Mobile Visitors
athletics news
6% 8%
directory admissions directory
16% 24% 9%
admissions
33%
a to z
11%
academics
a to z 12%
19%
course
catalog
14%
academics
about
course 13%
9%
catalog about
14% 12%
21. Finding UVM Mobile
Introduced select screen for mobile users (choice of
mobile or traditional site)
Publicized the mobile site through university
communications channels
Several admissions communications include links to
the mobile site
Alumni includes mobile site in homecoming
materials
22. UVM Mobile Traffic [Sep-Dec 2011]
Which site did Mobile Non-
Site Mobile
visitors choose?
Site
Bounce 39.42% 65.30%
Rate
Mobile Avg. Visit 2:51 0:59
Site Duration
26%
Pages/Visit 3.49 1.80
Non- Top Mobile Content
Mobile
Site ① Admissions
74% ② Courses
③ About
23. Dedicated Mobile Shortcomings
Additional maintenance and upkeep
Only small selection of web content included
Performs best using content feeds and structured
data while much of the site content is freeform
HTML
Departments slow to adopt dedicated the mobile
options
Visitors often expected to find additional content in
the mobile site
24. 0%
10%
20%
5%
25%
15%
Nov-09
Jan-10
Mar-10
May-10
Jul-10
Mobile Traffic
Sep-10
Nov-10
Jan-11
Mar-11
May-11
Jul-11
Off-Campus Mobile
Sep-11
Nov-11
Jan-12
Mar-12
May-12
Jul-12
Sep-12
Mobile Traffic Numbers on the Rise
Admissions Mobile
Nov-12
Jan-13
25. Responsive Design to the Rescue
I think of responsive
design as an alternative to
mobile sites.
Ethan Marcotte
29. The Responsive Design Process at UVM
A minimal incremental redesign
A “mobile first” approach
Integrating HTML 5 elements
Homepage and “top tier” first strategy
Responsive templates for departments to be made
available immediately after responsive launch
A standalone responsive template for “hosted” sites
31. The “Mobile First” Approach @ UVM
“Author a lightweight semantic core foundation first
then progressively enhance the experience from
there.” – Brad Frost
Wireframes and mockups should begin with the
smallest screen size (320 px)
Content should follow a logical and relevant order
when displayed linearly
Optimize controls for touch screen devices
Adopt a progressive enhancement approach to
design and development
33. Content Considerations
Revisit content on all pages focusing on ordering of
content
Consider carefully which (if any) content to place
under buttons or in sliders based on screen size
Reduce or limiting redundant or “filler”
content, especially on landing pages
Streamline and condense navigation whenever
possible
34. Designing for Touch Devices
Touch size
Additional spacing in menus and lists of links
Button sizes (46 pixel minimum width)
A to Z
Control placement
Considering how people hold their devices
Well… we’re not there yet
36. Typography in RWD
Relative font sizes (ems and rems)
target / context = result (12px/16px = .75em)
Compromised on a larger font size than expected
Readability and line lengths (50 to 75 characters per
line)
Utilizing Adobe TypeKit for custom fonts
38. Cross Browser Compatibility
Design for Internet Explorer v. 7 and above
Conditional stylesheets for IE
IE media queries support (css3-mediaqueries.js by
Wouter van der Graaf)
Internet Explorer 9 and below only loads the first 31
stylesheets per page
Modernizr for HTML 5 support on older browsers
41. Early Performance Results
-42% page size when viewed on an
iPhone
+24% visits [+4% non-mobile]
+26% unique visitors [+8% non-mobile]
+27% pageviews [+9% non-mobile]
+13% avg. visit duration [+1% non-mobile]
42. Ongoing Challenges
Too much redundant, outdated, irrelevant, and
extraneous content
Campus responsive adoption rates remain low
Educating web developers on publishing responsive-
and mobile-friendly content
Replacing Flash-based content with equivalent
HTML 5 (including fallbacks)
Achieving optimal performance and minimal data
download requirements across all devices
43. Next Steps
Converting microsites
Performance improvement and enhancements
Working with departments and vendors to deploy
responsive or mobile-friendly options on “hosted”
web applications
Developing an adaptive image strategy
Evaluate the future of UVM Mobile and the iUVM
application
44. Takeaways
A fast-paced and agile approach is required to stay
on top of mobile web development
RWD can be a good approach when mobile web
development resources are limited
A mobile first approach can offer
content, design, and performance advantages
Use metrics to constantly evaluate and adjust your
mobile web efforts
45. Resources
Responsive Web Design by Ethan Marcotte
Mobile First by Luke Wroblewski
“Responsive Web Design for Higher Ed” online class
from Higher Ed Experts
Brad Frost’s Responsive Web Design Patterns
mediaqueri.es
WeedyGarden HigherEd RWD Directory curated by
Eric Runyon
Editor's Notes
UVM 1.6 million pages ndexed by Google.According to a 2012 report by KarineJoly:65% (75% in 2011) of the survey respondents with a mobile solution report no budget.