Managing Responsive - eduWeb Digital Summit 2012 – Boston
-
Upload
rebekah-walker -
Category
Internet
-
view
149 -
download
2
Transcript of Managing Responsive - eduWeb Digital Summit 2012 – Boston
![Page 1: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/1.jpg)
Managing a Responsive Design Redesign Project
Rebekah GodshallDirector of Project Management, NewCity
Photos by David Poteet
![Page 2: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/2.jpg)
![Page 3: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/3.jpg)
Responsive DesignWe’ll discuss the HOW and the WHO of responsive design:
the complexities responsive design adds
how to develop a more agile process
how to support a cross-functional team
For more on the WHAT, WHY and WHEN of responsive design, I have materials available.
![Page 4: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/4.jpg)
Whatweb pages that respond to different devices
delivers quality experience to desktop computers, netbooks, tablets, and mobile phones
using new css techniques, fluid grids, flexible images, and media queries
![Page 5: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/5.jpg)
Whythe proliferation of smart phones
high level of continuity between different devices
designing for mobile requires focus, prioritization that improve user experience
may not require updates to function on new devices
![Page 6: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/6.jpg)
Whendifficult to retrofit an existing design, best to start from scratch
most appropriate when continuity between different devices is a priority for users
does not constitute a mobile strategy: separate mobile sites and mobile apps may also be needed to satisfy user needs
![Page 7: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/7.jpg)
Who Forming Your Project Team
![Page 8: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/8.jpg)
Team Organizationsmall, dedicated team
working in the same location
collaborative types who enjoy working in a team environment
![Page 9: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/9.jpg)
User Experience Architect
focuses on optimizing the experience of the user
trained in •interface design
•information architecture
![Page 10: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/10.jpg)
Graphic Designerresponsible for the look and feel of the site
trained in •graphic design
![Page 11: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/11.jpg)
Web Developertransforms design files into templates browsers can interpret
trained in •html/css
•javascript
•media queries and new css techniques necessary for
![Page 12: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/12.jpg)
How The Project Process
![Page 13: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/13.jpg)
Project PhasesResearch and Strategy
User Experience Planning
Design
Development
![Page 14: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/14.jpg)
Research and Strategy
![Page 15: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/15.jpg)
Research Methods & TechniquesFocus Groups
KJ Sessions
Stakeholder Interviews
Audience Interviews
Site Audit
Baseline Usability Testing
![Page 16: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/16.jpg)
Mobile Strategy
![Page 17: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/17.jpg)
The Myth of Mobile ContextMobile users are always distracted, in a rush
Mobile users really only need location information.
That’s not a feature we should include because she’s on mobile.
– Luke Wroblewski
![Page 18: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/18.jpg)
Where are people using mobile devices?84% at home
80% during miscellaneous downtime throughout the day
76% waiting in lines for appointments
69% while shopping
64% at work
62% while watching TV (alt. study claims 84%)
47% during commute in to work
READ MORE // Luke Wroblewski. "Mobile Context Revisited." http://www.lukew.com/ff/entry.asp?1333
![Page 19: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/19.jpg)
ImplicationsThe device does not necessarily imply a context (stationary or mobile).
There is a misconception that mobile users want different things from your product than desktop users do.
Responsive design offers a high level of continuity between different devices.
With responsive design you only need to develop, manage and maintain one site and one content silo.
![Page 20: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/20.jpg)
![Page 21: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/21.jpg)
Most Valuable Content For Mobile
1. Academic program listing
2. Cost/scholarship calculators
3. A calendar of important dates and deadlines
4. Specific details about academic programs
5. An application process summary
6. Online application forms
READ MORE // Noel-Levitz. (Feb 2012). "The Mobile Browsing Behaviors and Expectations of College-Bound High School Students."
![Page 22: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/22.jpg)
Desktops: First Link They Look For
1. Academic programs
2. Enrollment and admissions information
3. Cost
4. Scholarships
5. Other information
6. Student life information
7. Financial Aid
READ MORE // Noel-Levitz. (Feb 2011). "The Online Expectations of Prospective College Students and Their Parents."
![Page 23: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/23.jpg)
52% of students have looked at a campus Web site on a mobile device. (Up from 26% in 2011.) – Noel-‐Levitz. (Feb 2012). "The Mobile Browsing Behaviors and ExpectaHons of College-‐Bound High School Students."
![Page 24: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/24.jpg)
So, How To Begin?
![Page 25: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/25.jpg)
![Page 26: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/26.jpg)
![Page 27: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/27.jpg)
![Page 28: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/28.jpg)
![Page 29: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/29.jpg)
![Page 30: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/30.jpg)
![Page 31: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/31.jpg)
![Page 32: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/32.jpg)
![Page 33: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/33.jpg)
![Page 34: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/34.jpg)
![Page 35: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/35.jpg)
![Page 36: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/36.jpg)
Our Working Agreement
We will create only as many artifacts as are necessary to communicate the idea.
We will design on a grid.
We will keep all of the designs as close to the desktop design as possible to •maintain the high level of continuity that responsive design
offers
•minimize necessary reviews and approvals by the customer.
![Page 37: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/37.jpg)
User Experience PlanningStart with what is familiar. Put your website on a diet. Know when enough is enough.
![Page 38: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/38.jpg)
Start With What Is Familiar
![Page 39: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/39.jpg)
Put Your Website on a Diet
![Page 40: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/40.jpg)
Embracing ConstraintsSmall screen sizes forces you to prioritize.
Slow connections and limited data plans require you to be vigilant about performance.
"One eyeball, one thumb"
![Page 41: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/41.jpg)
Know When Enough is Enough
Communicate just enough to the client, designers, and developers.
Trust the rest of the team.
For us, “enough” was wireframes for the desktop versions of each template.
![Page 42: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/42.jpg)
Design and DevelopmentStart with what is familiar. Have regular design reviews. Get to the real thing quickly.
![Page 43: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/43.jpg)
Start With What Is Familiar
![Page 44: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/44.jpg)
Design ReviewsDiscuss and test the developers’ design recommendations.
Review, design, build and repeat.
This closes the gap between traditional “design” and “development” cycles.
![Page 45: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/45.jpg)
Get to the real thing quicklyDevelopers act as ux designers, too, designing in the browser.
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 46: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/46.jpg)
Designing in the Browser1. Start with the wrapper.
2. Define how the layouts will change.
3. Address individual content blocks.
![Page 47: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/47.jpg)
START WITH THE WRAPPER
DESIGNING IN THE BROWSER
![Page 48: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/48.jpg)
![Page 49: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/49.jpg)
![Page 50: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/50.jpg)
![Page 51: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/51.jpg)
![Page 52: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/52.jpg)
![Page 53: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/53.jpg)
DEFINE HOW LAYOUTS WILL CHANGE
DESIGNING IN THE BROWSER
![Page 54: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/54.jpg)
![Page 55: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/55.jpg)
![Page 56: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/56.jpg)
![Page 57: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/57.jpg)
![Page 58: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/58.jpg)
![Page 59: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/59.jpg)
ADDRESS INDIVIDUAL CONTENT BLOCKS
DESIGNING IN THE BROWSER
![Page 60: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/60.jpg)
![Page 61: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/61.jpg)
![Page 62: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/62.jpg)
![Page 63: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/63.jpg)
Timeline and Budget Impactredesign takes 20-30% longer—and ‘costs’ 20-30% more—than a desktop-only site
reduces ongoing maintenance costs
comparable to implementing a modest stand-alone mobile site
major milestones are unchanged, but a few new waypoints are added
bulk of time increase was in development
![Page 64: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/64.jpg)
Implications for the Project Manager
Change makes people uncomfortable.
UX and Design may feel they are losing control.
Developers may feel overwhelmed by increased responsibilities.
Requires a high degree of trust.
As a manager, my role was to encourage, support, and promote conversation.
![Page 65: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/65.jpg)
A Couple More Lessons LearnedTeam members report being pleased with how much they learned about their teammates’ disciplines. This cross-training was a natural outcome of the process.
Because the design at each breakpoint was so similar to the desktop design, the customer did not feel a loss of control despite not reviewing and approving each design.
![Page 66: Managing Responsive - eduWeb Digital Summit 2012 – Boston](https://reader031.fdocuments.net/reader031/viewer/2022022703/588152151a28abb0508b63d9/html5/thumbnails/66.jpg)