Embed Size (px)
Citation preview
Managing Responsive Design Projects
Full Stack TO 2014
@andrewsmyk
www.andrewsmyk.com/fsto
@andrewsmyk
640 x 480 800 x 6001024 x 7681200 x 9001920 x 1200
@andrewsmyk
1.5” to 50”
@andrewsmyk
@andrewsmyk
Leveraging mobile to increase student engagement
Andrew SmykHighWeb Ed – Arkansas
July 27, 2012
Wrestling with a responsive projects
@andrewsmyk
1-2-3-4
@andrewsmyk
1. Content Strategy2. Agile3. Prototyping4. Art Direction
@andrewsmyk
1. Content Strategy2. Agile3. Prototyping4. 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 frameworksbefore content modeling
Avoid coding or selecting frameworksbefore content modeling
@andrewsmyk
@andrewsmyk
Dynamic Wireframe
@andrewsmyk
@andrewsmyk
?????
@andrewsmyk
RUN!!!
ZombieApocalypse!!
@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 Modelsand 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 Strategy2. Agile3. Prototyping4. 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 Strategy2. Waterfall vs. Agile3. Prototyping4. 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 Strategy2. Waterfall vs. Agile3. Prototyping4. 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 robot
with laser beam eyes on a UNICORN.@andrewsmyk
@andrewsmyk
1-2-3-4
@andrewsmyk
1. Content Strategy2. Agile3. Prototyping4. Art Direction
@andrewsmyk
@andrewsmyk
Questions?
Thank you!
@andrewsmykwww.andrewsmyk.com/fsto
@andrewsmyk
Questions?
