• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How Responsive Design Solved Our Mobile Woes, Or Not …

How Responsive Design Solved Our Mobile Woes, Or Not …



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

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



Total Views
Views on SlideShare
Embed Views



7 Embeds 390

http://collegewebeditor.com 334
http://ne.highedweb.org 39
http://feeds.feedburner.com 6
http://clamcode.com 6
http://feeds2.feedburner.com 3
http://www.google.com 1
https://twitter.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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.
  • MIT, UCSD, Harvard
  • Mobile Selection screen for mobile devices
  • Visual and content

How Responsive Design Solved Our Mobile Woes, Or Not … How Responsive Design Solved Our Mobile Woes, Or Not … Presentation Transcript

  • 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 WebInitiative is important -information must bemade seamlesslyavailable on anydevice. - 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 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
  • 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 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)
  • Mobile Content Selection
  • 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% academicsa to z 12% 19% course catalog 14% academics about course 13% 9% catalog about 14% 12%
  • 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] Which site did Mobile Non- Site Mobilevisitors 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
  • 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
  • 0% 10% 20% 5% 25% 15% Nov-09 Jan-10 Mar-10 May-10 Jul-10Mobile Traffic Sep-10 Nov-10 Jan-11 Mar-11 May-11 Jul-11Off-Campus Mobile Sep-11 Nov-11 Jan-12 Mar-12 May-12 Jul-12 Sep-12 Mobile Traffic Numbers on the RiseAdmissions Mobile Nov-12 Jan-13
  • Responsive Design to the RescueI think of responsivedesign as an alternative tomobile 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 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
  • 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 devices Adopt 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 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
  • UVM Homepage (uvm.edu) After
  • Responsive Template Kits
  • Early Performance Results-42% page size when viewed on aniPhone+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 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
  • 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 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