Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)

Title Text

Going Responsive: Making Your Desktop

Site Mobile

A Case Study

Tadhg Healy - 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

• Approved by Mayor and

Council in April 2013

• Digital services

organisation

Digital Strategy

Challenges

• CoV website launched

late 2012 (fully

functional on mobile)

• Digital vs Government

Stakeholders

Resources

Usability testing

Frank - Frustrated

Lisa – Local minded Nahm – Newcomer

Connie –Content citizen

Bahri – New business owner

Aaron – Efficient professional

Steve – Student

Content strategy

Content strategy

• Mobile users may have

different priorities

• Same content

• CTAs & PDFs

Content strategy

Content elements

Navigation

Navigation

Sketch

Navigation

Sketch Design

Navigation

Sketch Design Prototype

Navigation

Sketch Design Prototype Test

Technical

Launch

Post launch

• 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

Partners

vancouver.ca/digitalstrategy

domain7.com/work/city-vancouver

@tadhgrrr | linkedin.com/in/tadhghealy

Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)

Government & Nonprofit

Transcript of Going Responsive: Making your Desktop Site Mobile (A City of Vancouver Case Study)