How Responsive Design Solved Our Mobile Woes, Or Not …
-
Upload
tatjana-salcedo -
Category
Education
-
view
1.069 -
download
3
description
Transcript of How Responsive Design Solved Our Mobile Woes, Or Not …
![Page 1: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/1.jpg)
TATJANA SALCEDOWEB STRATEGIST
THE UNIVERSITY OF VERMONT
How Responsive Design Solved Our Mobile Woes,
Or Not …
![Page 2: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/2.jpg)
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
![Page 3: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/3.jpg)
The Mobile Web Initiative is important - information must be made seamlessly available on any device.
- Tim Berners-Lee
![Page 4: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/4.jpg)
Smartphones on Campus
![Page 5: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/5.jpg)
Data Usage Jumps by Age
![Page 6: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/6.jpg)
Mobile and Student Recruitment
![Page 7: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/7.jpg)
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
![Page 8: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/8.jpg)
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
![Page 9: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/9.jpg)
Grassroots Mobile (2010)
![Page 10: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/10.jpg)
iUVM the App
Developed by UVM computer science science student, Chris Tucci
Co-produced with undergraduate admissions
Released April 2011
![Page 11: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/11.jpg)
Inside the iUVM App
![Page 12: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/12.jpg)
Early Campus Innovators
![Page 13: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/13.jpg)
Early Higher Ed Exemplars
![Page 14: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/14.jpg)
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)
![Page 15: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/15.jpg)
Mobile Content Selection
![Page 16: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/16.jpg)
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
![Page 17: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/17.jpg)
Prospective Student Focus
![Page 18: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/18.jpg)
The Kurogo Framework
![Page 19: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/19.jpg)
UVM Mobile (m.uvm.edu) is Born
![Page 20: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/20.jpg)
UVM Mobile on the iPad
![Page 21: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/21.jpg)
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
![Page 22: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/22.jpg)
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
![Page 23: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/23.jpg)
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
![Page 24: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/24.jpg)
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
![Page 25: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/25.jpg)
Responsive Design to the Rescue
I think of responsive design as an alternative to mobile sites.
Ethan Marcotte
![Page 26: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/26.jpg)
RWD: Boston Globe
![Page 27: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/27.jpg)
Higher Ed RWD Innovator: Lancaster
![Page 28: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/28.jpg)
Getting Our Toes Wet: MyUVM Portal
![Page 29: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/29.jpg)
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
![Page 30: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/30.jpg)
UVM Homepage Before
![Page 31: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/31.jpg)
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
![Page 32: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/32.jpg)
Early Prototypes
![Page 33: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/33.jpg)
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
![Page 34: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/34.jpg)
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
![Page 35: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/35.jpg)
The Evolution of Responsive Menus
![Page 36: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/36.jpg)
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
![Page 37: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/37.jpg)
Design Pattern Samples: Tables
![Page 38: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/38.jpg)
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
![Page 39: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/39.jpg)
UVM Homepage (uvm.edu) After
![Page 40: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/40.jpg)
Responsive Template Kits
![Page 41: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/41.jpg)
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]
![Page 42: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/42.jpg)
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
![Page 43: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/43.jpg)
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
![Page 44: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/44.jpg)
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
![Page 45: How Responsive Design Solved Our Mobile Woes, Or Not …](https://reader036.fdocuments.net/reader036/viewer/2022081514/554f3887b4c905471e8b4851/html5/thumbnails/45.jpg)
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