How Responsive Design Solved Our Mobile Woes, Or Not …

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