Ektron London Conference: Managing Responsive Projects
-
Upload
ektron -
Category
Technology
-
view
597 -
download
2
Transcript of Ektron London Conference: Managing Responsive Projects
![Page 1: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/1.jpg)
Danny Freeman & Simon Asplin
Project Managers
Managing Responsive Projects
![Page 2: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/2.jpg)
Copyright © 2013 Ektron, Inc.
Agenda
• What is a Responsive Project?
• Why go Responsive?
• When to go Responsive?
• Myths of Mobile Content
• Project Phases
![Page 3: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/3.jpg)
Copyright © 2013 Ektron, Inc.
What is a Responsive Project?
• Web pages that respond to screen
widths
• Delivers quality experience to desktop
computers, laptops, tablets, mobile
phones and now internet on your TV
• Using new CSS techniques, fluid grids,
flexible images and media queries
![Page 4: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/4.jpg)
Copyright © 2013 Ektron, Inc.
What is a Responsive Project?
![Page 5: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/5.jpg)
Copyright © 2013 Ektron, Inc.
Why go Responsive?
• High level of continuity between
different devices
• Same URLs for every device
• Not tied to specific devices
• The proliferation of smart phones and
tablets
![Page 6: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/6.jpg)
Copyright © 2013 Ektron, Inc.
PC vs Mobile
Source: comScore (02/13)
![Page 7: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/7.jpg)
Copyright © 2013 Ektron, Inc.
Where are people using mobile
devices? • 84% at home
• 80% during miscellaneous downtime throughout the day
• 76% while queuing / waiting for appointments
• 69% while shopping
• 64% at work
• 62% while watching TV (alt. study claims 84%)
• 47% during commute into work Luke Wroblewski. "Mobile Context Revisited." http://www.lukew.com/ff/entry.asp?1333
![Page 8: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/8.jpg)
Copyright © 2013 Ektron, Inc.
Why go Responsive?
![Page 9: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/9.jpg)
Copyright © 2013 Ektron, Inc.
When to go Responsive?
• Difficult to retro-fit an existing design,
may be best to start from scratch
• Most appropriate when continuity
between different devices is a priority
for target audience
• Responsive design does not constitute
a mobile strategy
![Page 10: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/10.jpg)
Copyright © 2013 Ektron, Inc.
Myths of Mobile Content
• Mobile users are always distracted, in a
rush
• Mobile users really only need location
information.
• Mobile users wouldn’t be interested in
XYZ.
![Page 11: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/11.jpg)
Copyright © 2013 Ektron, Inc.
Project Phases
• Research and Strategy
• User Experience Planning
• Design
• Development
![Page 12: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/12.jpg)
Copyright © 2013 Ektron, Inc.
Project Phases - Waterfall
![Page 13: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/13.jpg)
Copyright © 2013 Ektron, Inc.
Project Phases – Agile
![Page 14: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/14.jpg)
Copyright © 2013 Ektron, Inc.
Research & Strategy
• Focus Groups
• Stakeholder Interviews
• Audience Interviews
• Site Audits
• MoSCoW / Timeline workshops
• Baseline Usability Tests
![Page 15: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/15.jpg)
Copyright © 2013 Ektron, Inc.
Things to consider
• The device does not necessarily imply a
context (stationary or mobile).
• There is a misconception that mobile
users want different things from your
website than desktop users do.
• Responsive design offers a high level of
continuity between different devices.
• You only need to develop, manage and
maintain one site and one content silo.
![Page 16: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/16.jpg)
Copyright © 2013 Ektron, Inc.
![Page 17: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/17.jpg)
Copyright © 2013 Ektron, Inc.
![Page 18: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/18.jpg)
Copyright © 2013 Ektron, Inc.
![Page 19: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/19.jpg)
Copyright © 2013 Ektron, Inc.
![Page 20: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/20.jpg)
Copyright © 2013 Ektron, Inc.
![Page 21: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/21.jpg)
Copyright © 2013 Ektron, Inc.
![Page 22: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/22.jpg)
Copyright © 2013 Ektron, Inc.
User Experience Planning
• Small screen sizes forces you to
prioritise.
• Slow connections and limited data
plans require you to be vigilant about
performance.
• Small touch targets lead to BIG
problems
![Page 23: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/23.jpg)
Copyright © 2013 Ektron, Inc.
Design
• Discuss and test the developers’
design recommendations.
• Review, design, build and repeat.
• This closes the gap between traditional
“design” and “development” cycles.
![Page 24: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/24.jpg)
Copyright © 2013 Ektron, Inc.
Development
• Developers act as UX designers.
• Close the communication gap across
the project team.
• Communicate to stakeholders how the
responsive design will work.
• Design within the constraints of the real
medium.
![Page 25: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/25.jpg)
Copyright © 2013 Ektron, Inc.
Testing…
• Real or virtual devices?
• What devices to support?
• Tools & devices
• Ektron V9
• Android emulator
• iOS emulator
• W3C MobileOK Checker
![Page 26: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/26.jpg)
Copyright © 2013 Ektron, Inc.
Testing…
• Testing and test preparations
• Orientation
• Touch
• Error reporting
• Regressions
• Budget – QA time should not be skimped
on!
• Collaborate with different teams and
work together to meet compromises
![Page 27: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/27.jpg)
Copyright © 2013 Ektron, Inc.
Implications for the Project
• Responsive design takes 20-30% longer
than a desktop-only site
• Reduces ongoing maintenance costs
compared to a stand-alone mobile site
• Major milestones are unchanged, but a
few new minor milestones are added
• Bulk of time increase will be in
development and testing
![Page 28: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/28.jpg)
Copyright © 2013 Ektron, Inc.
Implications for the PM
• Change makes people uncomfortable.
• UX and Design teams may feel out of control.
• Developers may feel overwhelmed by increased responsibilities.
• Requires a high degree of trust.
• The PMs role is to encourage, support, and promote conversation.
![Page 29: Ektron London Conference: Managing Responsive Projects](https://reader030.fdocuments.in/reader030/viewer/2022032514/55d54d29bb61ebe0228b46df/html5/thumbnails/29.jpg)
Danny Freeman & Simon Asplin
Project Managers
Questions