managing responsive design projects
TRANSCRIPT
Managing Responsive
Design Projects
Full Stack TO 2014
@andrewsmyk
www.andrewsmyk.com/fsto
@andrewsmyk
640 x 480
800 x 600
1024 x 768
1200 x 900
1920 x 1200
@andrewsmyk
1.5” to 50”
@andrewsmyk
@andrewsmyk
Leveraging mobile to increase
student engagement Andrew Smyk
HighWeb Ed – Arkansas
July 27, 2012
Wrestling with a responsive projects
@andrewsmyk
@andrewsmyk
1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk
1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk
Edit content ruthlessly
@andrewsmyk
Pro Tip: Document all the Types & Models of Devices You Encounter
@andrewsmyk
Important! Note the Devices of Decision Makers in the Room
http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
Stakeholders
@andrewsmyk
Content Modeling & Strategy
• Content Engagement
• Content Curation
• Rank and Prioritize Content
Avoid coding or selecting frameworks
before content modeling
Avoid coding or selecting frameworks
before content modeling
@andrewsmyk
@andrewsmyk
Dynamic Wireframe
@andrewsmyk
@andrewsmyk
?????
@andrewsmyk
RUN!!!
Zombie
Apocalypse!!
@andrewsmyk
1
23
4
5
6
7
@andrewsmyk
1
2
3
4
5
6
7
1
2
3
4
5
6
7
A/B Test Content Models
and early lo-fi Wireframes
http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
via Michelle Cryan - @sporkles
@andrewsmyk
Pro Tip: Avoid Designing and Developing Projects in Silos
@andrewsmyk
1. Content Strategy
2. Waterfall vs. Agile
3. Prototyping
4. Art Direction
@andrewsmyk
@andrewsmyk
Prototyping
“Now we can think about users and their
needs as it relates to content.”
Look for Pain Points
@andrewsmyk
https://www.flickr.com/photos/wiphey/12696434
@andrewsmyk
“Work in Photoshop and Fireworks by all means
(I do). Make static visuals as rich and as detailed
as you want them to be.”
Just don’t set the wrong expectations
by showing them to your clients.
~ Andy Clarke
Logo needs to be “bluer”
desktop + +
main internal specialized
variants?
DAYS?
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
Logo needs to be “bluer”
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
How blue is our logo?
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
We need to see another design
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
@andrewsmyk
Stop Wrestling with Static Mockups
https://www.flickr.com/photos/kitch/4286136925
https://www.flickr.com/photos/kitch/4286136925
No Usability Testing
https://www.flickr.com/photos/kitch/4286136925
Lack Interaction
https://www.flickr.com/photos/kitch/4286136925
Don’t Show Transitions
https://www.flickr.com/photos/kitch/4286136925
Lack Fluidity
https://www.flickr.com/photos/kitch/4286136925
Don’t Display Web Fonts
In the end, static mock ups are like a dead parrot.
@andrewsmyk
“Design consistency is not about pixels.”
@andrewsmyk
@andrewsmyk
“A prototype is worth a thousand words”
Leigh Howells - @leigh
@andrewsmyk
“A prototype is worth a thousand meetings”
Mike Davidson - @mikeindustries
Pro Tip: A Working Prototype can Help Make Decisions Faster
Think about the ecosystem, not just the devices:
@andrewsmyk
@andrewsmyk
https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk
@andrewsmyk
Use the right tools & technologies
@andrewsmyk
am I responsive?
ish.
remote preview
Ghostlab (license)
Edge Inspect (CC subscription)
1. Content Strategy
2. Waterfall vs. Agile
3. Prototyping
4. Art Direction
@andrewsmyk
Logo needs to be “bluer”
@andrewsmyk
Visual inventory, you say…Responsive style tiles, you say…
catalog of assumptions
@andrewsmyk
Responsive Style Tile
https://www.flickr.com/photos/kenstein/12126948903
Plan your Interactions and Interface
@andrewsmyk
@andrewsmyk
Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store
@andrewsmyk
Pro Tip: Build a Device Library
http://www.flickr.com/photos/pjanvandaele/3990379048
@andrewsmyk
Plan for gestures and taps
Help users with errors and miss taps
Plan for the “Fat Finger”
Design for the thumb
Pro Tip: A Touch Template helps design Interactions
@andrewsmyk
Test Constantly
@andrewsmyk
https://www.flickr.com/photos/zokuga/5296157798
Test Under Extreme Conditions or Use Case
@andrewsmyk
https://www.flickr.com/photos/nicholas_t/2414548729
Test Under Low Connectivity
@andrewsmyk
#ffly #rwd
i
They share a common infrastructure, but mobile is NOT the traditional web
@andrewsmyk
l
Mobile is a different environment and requires new thinking and design considerations.
@andrewsmyk
Harness the power of a missile throwing robotwith laser beam eyes on a UNICORN.
@andrewsmyk
@andrewsmyk
@andrewsmyk
1. Content Strategy
2. Agile
3. Prototyping
4. Art Direction
@andrewsmyk
@andrewsmyk
Questions?
Thank you!
@andrewsmykwww.andrewsmyk.com/fsto
@andrewsmyk
Questions?