• 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 …

on

  • 1,155 views

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.

Statistics

Views

Total Views
1,155
Views on SlideShare
765
Embed Views
390

Actions

Likes
0
Downloads
9
Comments
0

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
More...

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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

  • How Responsive Design Solved Our Mobile Woes, Or Not … TATJANA SALCEDO WEB STRATEGIST THE UNIVERSITY OF VERMONT
  • 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