Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)
•Download as PPTX, PDF•
1 like•619 views
How do you turn an enormous city website into a responsive site that works on all mobile devices? Find out how the City of Vancouver took their desktop site mobile, in a presentation from Tadhg Healy, the City's Web Operations Manager.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)
Similar to Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study) (20)
Recently uploaded
Recently uploaded (20)
Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)
- 1. Title Text Going Responsive: Making Your Desktop Site Mobile A Case Study Tadhg Healy - City of Vancouver
- 2. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. - Smashing Magazine
- 3. • Approved by Mayor and Council in April 2013 • Digital services organisation Digital Strategy
- 4. Challenges • CoV website launched late 2012 (fully functional on mobile) • Digital vs Government
- 6. Stakeholders
- 7. Resources
- 8. Usability testing Frank - Frustrated Lisa – Local minded Nahm – Newcomer Connie – Content citizen Bahri – New business owner Aaron – Efficient professional Steve – Student
- 10. Content strategy
- 11. Content strategy • Mobile users may have different priorities • Same content • CTAs & PDFs
- 12. Content strategy
- 13. Content elements
- 14. Content elements
- 15. Content elements
- 16. Content elements
- 17. Navigation
- 21. Navigation Sketch Design Prototype Test
- 22. Navigation Sketch Design Prototype Test
- 23. Technical
- 24. Launch
- 25. Post launch
- 26. • Beware of going into the area of diminishing returns…done is better than perfect • Question the experts • Ensure you can do rapid prototyping: test and then iterate • Use what you have – focus on MVP as early as possible • CoV mobile traffic increased from 22% in early 2012 to 32% in December (launch) Top 5 takeaways
Editor's Notes
- Going Responsive: Making Your Desktop Site Mobile– A City of Vancouver Case Study, presented by Tadhg Healy, Web Operations Manager for the City of Vancouver.
- “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. “ - Smashing Magazine
- Thedigital strategy was approved by mayor and council in 2013. It had four pillars of activity, and mobile was called out specifically. The digital strategy allowed for the creation of a center of excellence ‘Digital Services Organisation’ -- a strategic future proofing decision to go with responsive design rather than just ticking a box. The organizational environment created allowed the project to succeed: the mandate came from the senior political level and was endorsed by senior management.
- The City launched its new website in 2012. It was a large undertaking spanning 2.5 years, which served to highlight the slow pace of government vs the fast pace of digital. The project was bureaucratic and had multiple approval points.
- Let’s discuss the challenge, the approach, and the outcome.
- CHALLENGE:Large number/range of stakeholders, and knowledge of responsive was varied. >>>APPROACH:Socialise concept often and early – formal and informal channels.Identify champions within stakeholder groups and give them sneak previews. Downplay level of impact to functional performance of applications.Focus on benefits.Single source for content.Cross device compatibility. >>> OUTCOME: Champions voiced support of responsive approach during high level steering meetings. Increased confidence in approach amongst internal technical stakeholders.
- CHALLENGE:Digital strategy published in April 2013. The responsive site needed to be designed, developed, and launched in just 12 weeks!Operations team did not have the capacity to take on a major project.Not all required skill sets were represented in-house as we were still in hiring mode.Needed to go to an external agency.However, team still wanted to shape and influence the project, and it was imperative that we owned the outcome. >>> APPROACH:Used collaborative tools to work in partnership with the agency.Developed clear lines of communication.Took an active role in making recommendations and improvements based on our own knowledge of the site. Course-corrected where necessary. >>> OUTCOME: Responsive site reflects our extensive knowledge of user goals and objectives.Comprehensive knowledge transfer to internal team.Project was completed on time and budget
- CHALLENGE: Broad persona range.Where to focus testing efforts? Time / Resource availability. >>> APPROACH:Individual user testing: 1 hour sessions. Initial focus on navigation interaction design.High volume tasks.Incentives and follow up. >>> OUTCOME:Critical part of the proposal/project.Informed front end / back end decisions during technical development.Identified other areas that we need to work on ... specifically IA overhaul.
- CHALLENGE: The desktop site was not developed with an eye to future conversion to mobile.Hundreds of large documents, significant chunks of text on each page, lots of unrelated items in the right rail, etc., presented barriers to a good mobile experience. >>> OUTCOME: Web pages become more useful for mobile visitors – particularly for transactions and wayfinding. Content remains consistent between desktop and mobile site.Content strategists now thinking mobile first.
- CHALLENGE: Digital strategy published in April 2013.Procurement cycle – delay. The responsive site needed to be designed, developed, and launched in just 12 weeks! >>> APPROACH:Audited entire site at the page level.Triaged all content: must fix, nice to fix, can wait.Focused team on addressing all of the “must fix” pages by launch.>>> OUTCOME: Able to launch an MVP within the tight timelines.100% of the pages in the site were fully functional at launch. We continue to address the ‘nice to fix’ issues as time permits.
- CHALLENGE: The desktop site was not developed with an eye to future conversion to mobile.Hundreds of large documents, significant chunks of text on each page, lots of unrelated items in the right rail, etc., presented barriers to a good mobile experience >>> APPROACH: Mobile content strategy: Which elements on this page will be most relevant to mobile users?Developed “folding,” which allows certain page elements to take a higher/lower position on the mobile page. Same content - continuity of experience.>>> OUTCOME: Web pages become more useful for mobile visitors – particularly for transactions and wayfinding.Content remains consistent between desktop and mobile site. Content strategists now thinking mobile first.
- CHALLENGE:The desktop site was not developed with an eye to future conversion to mobile.Hundreds of large documents, significant chunks of text on each page, lots of unrelated items in the right rail, etc., presented barriers to a good mobile experience. >>> APPROACH: Mobile content strategy: Which elements on this page will be most relevant to mobile users?.Developed “folding,” which allows certain page elements to take a higher/lower position on the mobile page. >>> OUTCOME: Web pages become more useful for mobile visitors – particularly for transactions and wayfinding.Content remains consistent between desktop and mobile site.Content strategists now thinking mobile first.
- CHALLENGE: Many strategies used to display complex information on the desktop were not mobile friendly. >>> Tables became truncated, tabs didn’t open, etc. >>> OUTCOME: Content elements change form depending on resolution allowing for better user experience.
- APPROACH: Worked with D7 to design and test alternate solutions that would present differently depending on the visitor’s screen resolution.
- APPROACH: Worked with D7 to design and test alternate solutions that would present differently depending on the visitor’s screen resolution.
- APPROACH: Worked with D7 to design and test alternate solutions that would present differently depending on the visitor’s screen resolution.
- CHALLENGE:Complex IA. 9 levels deep, 8 primary buckets,48 secondary buckets,254 tertiary buckets= 310 menu links in mega nav alone! >>> OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
- OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
- OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
- OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
- OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
- OUTCOME: Simple to use. Incorporated search bar. Common tasks easily accessible (and independent of desktop resolution).
- CHALLENGE: Folding not possible until fully deployed because changes to back end controls were the same.Changing a live site.Publishing system vs DB driven.Template changes don’t apply immediately.Not able to test live end to end. We hadn’t done this before! >>> APPROACH: Phased approach with checkpoints and fully tested rollback. Reviewed on staging. Decoupled navigation from templates and applications. 10 leaf pages, individual buckets, homepage last.Standby support from partners (D7 and OT).Dry runs in devprojects. >>> OUTCOME.Smooth launch.Low stress levels because of rollback option.High level of confidence amongst team and with partners
- CHALLENGE: Life goes on – competing priorities.Out of scope items – web applications.Continued adherence to mobile content strategy.Implications of being responsive. >>>APPROACH: Reduced focus on native applications.All integrated web applications soon to be responsive.Embedding 3rd party apps becomes more challenging – scrolling within scrolling.iFramesbecome more of an issue.Focus on high traffic existing applications.Content strategists now use responsive site.Allow people to give us feedback. >>> OUTCOME:Reduced focus on native applications.All integrated web applications soon to be responsive. Embedding 3rd party apps becomes more challenging – scrolling within scrolling.iFramesbecome more of an issue
- Top five takeaways. 1 - Beware of going into the area of diminishing returns…it’s OK to let go. 2 - Don’t be afraid to question the ‘experts’…if it seems weird it probably is. Relationship-trust is tantamount to success. Both partners need to be open and transparent. 3 - Ensure you can do rapid prototyping (even on a subset of your content – HTML + JSON - fake backend), test and then iterate. 4. Use what you have – focus on MVP as early as possible! 5.CoV mobile traffic increased from 22% in early 2012 to 32% in December (launch).
- Thank you to all our partners involved in this project!