Responsive Web Design


Published on

Over the course of the video, David will discuss why he decided to move to RWD, the approach he took in iteratively improving their current design and information architecture and how the team used an agile methodology to make the transition for their main site and nearly 200 sub-sites.

Published in: Business, Technology
  • 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

Responsive Web Design

  1. 1. On the road to RWD David Shipley and Trevor Thomas University of New Brunswick
  2. 2. About David • BA in Information and Communications Studies (‘05), working on MBA (‘15) • Started at UNB in 2008 in Communications and Marketing, moved to Information Technology Services (ITS) in 2012 • Former business reporter for the provincial newspaper • Served in Canadian Army from 1997 to 2002 • Born on Canada’s west coast in beautiful British Columbia
  3. 3. About Trevor • Programmer / Analyst Diploma from College of Business Technology • Web Developer at University of New Brunswick • Lead Developer for the RWD project • NBA and NFL fan. Don’t call on Sundays. Or Tuesday, Wednesday or Thursday nights. Unless it’s about sports. • Also from British Columbia
  4. 4. Agenda • About UNB • Overview of • Web Strategy & Governance • Why RWD • Site Demo • Measuring Success • Lessons Learned
  5. 5. About UNB • Founded in 1785 and is the oldest public, English- language university in North America • Two main campuses in Fredericton and Saint John, New Brunswick • Approximately 11,000 students, 3,000 faculty and staff.
  6. 6. About • Among the first Canadian universities to launch a comprehensive website in the early 1990s • Site grew to more than 200,000 pages by 2008. • Four-year project begun in 2008 to overhaul entire site including all faculties, schools and departments.
  7. 7. Web Governance @ UNB • Following initial 2008 project, efforts were made to formalize web governance at UNB, resulting in our first web strategy in 2010. • Web Strategy Group consisting of four members (AVP IT, Director C&M, Director Solutions and Web Strategist). • Web Strategy Group’s mandate included implementation of senior university management-approved two-year plan and oversight over the UNB common look and feel. • Site owners (content creators) responsible for leveraging university tools (Cascade Server) within university- approved brand (Common Look and Feel).
  8. 8. UNB Web Strategy The web environment at UNB is all external and internal infrastructure that delivers content as well as application functionality to end users. It includes services built, maintained or delivered by UNB or third-party services such as asocial network sites that are used by UNB as ways of delivering information or engaging with end-users.
  9. 9. UNB Web Environment • – externally orientated, revenue generation and reputation building •InsideUNB – internally orientated, transaction- focus “get stuff done” •MyUNB – personal information and electronic services (Portal)
  10. 10. Why RWD? • External mobile traffic had grown from 1% in 2010 to 5% in 2012 and 14% in 2013 • Avoid content duplication (no and benefit SEO • Easier to maintain
  11. 11. By the numbers • 48% of American teens own an iPhone • 43% use their smartphone for all of their web surfing • School website trumps all other online resources in influence (e-mail, third-party websites, social) • 70% say the website affected their perception of the school • Students prefer to browse on a laptop/desktop, but still visit on mobile. (70% visited a school website on a mobile device) • 50% want the site to adapt to their device Source: Noel Levitz, E-Expectations 2013
  12. 12. The site circa July 2013
  13. 13. Web Design Refresh Objectives • Provide web content in the best possible format for desktops, laptops, tablets, smartphones and other handheld devices • Reduce overall web page clutter, lighten overall look • Improve campus-level recognition • Improve audience-based navigation on homepage • Integrate social media • Improve accessibility
  14. 14. Who did we learn from? • University of Notre Dame • Boston Globe • University of Western Ontario • College of William and Mary • Ball State University • Boston University • And many more
  15. 15. How was the project structured? • Research Phase – Late 2011 • Goal Setting – Summer 2012 • Wireframes – Fall 2012 • Design Mock-ups – Winter 2013 • Implementation – Spring & Summer 2013
  16. 16.
  17. 17. Project Management • ITS has a project management office (PMO) • An experienced, senior project manager was assigned to this effort • We used the Agile project management approach.
  18. 18. Demo
  19. 19. Key elements in project success • University leadership-approved web strategy • Concise governance model for the web • Data-driven decision model (Analytics and Usability Testing) • Project Management Methodology throughout (Agile) • Focus on improvement, not perfection
  20. 20. Project success measurements • Development work completed in four months duration with small project team at a 92% reduction in cost from ‘08 effort and 78% reduction in duration. • More than 200 sites and 28,000 pages converted in 10 days. • Average increase of approximately 70% in visitors to prospective student content in the first 30 days, year over year. 10% improvement in smartphone user time on site in the past 30 days, YoY. • General satisfaction amongst university community.
  21. 21. Lessons learned • Improved inventory of sites would have eased migration efforts • Use of the RACI model externally to the project, along with clear expectations for what consultation means with some stakeholders would have eased internal, pre- launch issues. • Include freshness of content as a key testing criteria for dynamic elements
  22. 22. Technical Walk Through