How Responsive Design Solved Our Mobile Woes, Or Not …


Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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 …

    1. 1. How Responsive Design Solved Our Mobile Woes, Or Not … TATJANA SALCEDO WEB STRATEGIST THE UNIVERSITY OF VERMONT
    2. 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. 3. The Mobile WebInitiative is important -information must bemade seamlesslyavailable on anydevice. - Tim Berners-Lee
    4. 4. Smartphones on Campus
    5. 5. Data Usage Jumps by Age
    6. 6. Mobile and Student Recruitment
    7. 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. 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. 9. Grassroots Mobile (2010)
    10. 10. iUVM the App Developed by UVM computer science science student, Chris Tucci Co-produced with undergraduate admissions Released April 2011
    11. 11. Inside the iUVM App
    12. 12. Early Campus Innovators
    13. 13. Early Higher Ed Exemplars
    14. 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 standard (
    15. 15. Mobile Content Selection
    16. 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% academicsa to z 12% 19% course catalog 14% academics about course 13% 9% catalog about 14% 12%
    17. 17. Prospective Student Focus
    18. 18. The Kurogo Framework
    19. 19. UVM Mobile ( is Born
    20. 20. UVM Mobile on the iPad
    21. 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. 22. 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
    23. 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. 24. 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
    25. 25. Responsive Design to the RescueI think of responsivedesign as an alternative tomobile sites. Ethan Marcotte
    26. 26. RWD: Boston Globe
    27. 27. Higher Ed RWD Innovator: Lancaster
    28. 28. Getting Our Toes Wet: MyUVM Portal
    29. 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. 30. UVM Homepage Before
    31. 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. 32. Early Prototypes
    33. 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. 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. 35. The Evolution of Responsive Menus
    36. 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. 37. Design Pattern Samples: Tables
    38. 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. 39. UVM Homepage ( After
    40. 40. Responsive Template Kits
    41. 41. 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]
    42. 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. 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. 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. 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 WeedyGarden HigherEd RWD Directory curated by Eric Runyon