A presentation made at the HigherEd Web NE regional conference at Mount Holyoke College on March 18, 2013.

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

4. Smartphones on Campus

5. Data Usage Jumps by Age

6. Mobile and Student Recruitment

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

9. Grassroots Mobile (2010)

10. iUVM the App
 Developed by UVM
computer science
science student, Chris
Tucci
 Co-produced with
undergraduate
admissions
 Released April 2011

11. Inside the iUVM App

12. Early Campus Innovators

13. Early Higher Ed Exemplars

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)

15. Mobile Content Selection

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%

17. Prospective Student Focus

18. The Kurogo Framework

19. UVM Mobile (m.uvm.edu) is Born

20. UVM Mobile on the iPad

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

26. RWD: Boston Globe

27. Higher Ed RWD Innovator: Lancaster

28. Getting Our Toes Wet: MyUVM Portal

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

30. UVM Homepage Before

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

32. Early Prototypes

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

35. The Evolution of Responsive Menus

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

37. Design Pattern Samples: Tables

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

39. UVM Homepage (uvm.edu) After

40. Responsive Template Kits

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