how responsive design solved our mobile woes, or not …
DESCRIPTION
A presentation made at the HigherEd Web NE regional conference at Mount Holyoke College on March 18, 2013.TRANSCRIPT
TATJANA SALCEDOWEB STRATEGIST
THE UNIVERSITY OF VERMONT
How Responsive Design Solved Our Mobile Woes,
Or Not …
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
The Mobile Web Initiative is important - information must be made seamlessly available on any device.
- Tim Berners-Lee
Smartphones on Campus
Data Usage Jumps by Age
Mobile and Student Recruitment
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
A Journey to RWD
The evolution of mobile at the universityThe case for responsive designAn evolutionary responsive design process“Mobile first”RWD template kitsRWD design patternsStatistics and performance testingThe journey forward
Grassroots Mobile (2010)
iUVM the App
Developed by UVM computer science science student, Chris Tucci
Co-produced with undergraduate admissions
Released April 2011
Inside the iUVM App
Early Campus Innovators
Early Higher Ed Exemplars
Creating a Dedicated Mobile Site for UVM
Usable on a wide variety of mobile devicesCompatible with existing IT infrastructureEasy to update and maintainLeverages existing content from a variety of
sources and locationsPlatform with a customizable designAbility to include content of “highest value”Use of the m.dot standard (m.uvm.edu)
Mobile Content Selection
Our Most Popular Content
admissions33%
academics13%
about12%
course
cata-log14%
a to z11%
di-rec-tory9%
news8%
Mobile Visitors
admissions23%
academics12%
about9%
course catalog14%
a to z19%
directory16%
athletics5%
Non-mobile Visitors
Prospective Student Focus
The Kurogo Framework
UVM Mobile (m.uvm.edu) is Born
UVM Mobile on the iPad
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
UVM Mobile Traffic [Sep-Dec 2011]
Mobile Site26%
Non-Mo-bile Site74%
Which site did vis-itors choose?
Mobile Site
Non-Mobile Site
Bounce Rate
39.42% 65.30%
Avg. Visit Duration
2:51 0:59
Pages/Visit
3.49 1.80
Top Mobile Content
① Admissions② Courses③ About
Dedicated Mobile Shortcomings
Additional maintenance and upkeepOnly small selection of web content includedPerforms 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
Mobile Traffic Numbers on the Rise
Nov
-09
Feb-1
0
May
-10
Aug-1
0
Nov
-10
Feb-1
1
May
-11
Aug-1
1
Nov
-11
Feb-1
2
May
-12
Aug-1
2
Nov
-12
Feb-1
30%
5%
10%
15%
20%
25%
Mobile Traffic Off-Campus Mobile Admissions Mobile
Responsive Design to the Rescue
I think of responsive design as an alternative to mobile sites.
Ethan Marcotte
RWD: Boston Globe
Higher Ed RWD Innovator: Lancaster
Getting Our Toes Wet: MyUVM Portal
The Responsive Design Process at UVM
A minimal incremental redesignA “mobile first” approachIntegrating HTML 5 elementsHomepage and “top tier” first strategyResponsive templates for departments to be
made available immediately after responsive launch
A standalone responsive template for “hosted” sites
UVM Homepage Before
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 devicesAdopt a progressive enhancement approach
to design and development
Early Prototypes
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
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
The Evolution of Responsive Menus
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
Design Pattern Samples: Tables
Cross Browser Compatibility
Design for Internet Explorer v. 7 and aboveConditional stylesheets for IEIE media queries support (css3-
mediaqueries.js by Wouter van der Graaf)Internet Explorer 9 and below only loads the
first 31 stylesheets per pageModernizr for HTML 5 support on older
browsers
UVM Homepage (uvm.edu) After
Responsive Template Kits
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]
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
Next Steps
Converting micrositesPerformance improvement and enhancements Working with departments and vendors to
deploy responsive or mobile-friendly options on “hosted” web applications
Developing an adaptive image strategyEvaluate the future of UVM Mobile and the
iUVM application
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
Resources
Responsive Web Design by Ethan MarcotteMobile First by Luke Wroblewski“Responsive Web Design for Higher Ed”
online class from Higher Ed ExpertsBrad Frost’s Responsive Web Design Patternsmediaqueri.esWeedyGarden HigherEd RWD Directory
curated by Eric Runyon