Mobile First Responsive Web Design. Best practices, prototyping tools, etc.

1. HOW TO DESIGN
MOBILE FIRST
and the KISSS principle
/Olga Voskoboinikova @dVosk

2. 1/3 of internet users connect only via mobile.
84% use smartphones at home.
74% use their phones while waiting in line.
MOBILE IS UBIQUITOUS
You can’t do responsive web design without
designing for touch and mobile first.

3. DESIGNING FOR TOUCH
Fingers are not precise pointing devices.
Minimum touch target size + space between touch targets.

4. How big the touch targets have to be?
Average human finger pad: 10–14mm.
Average human finger tip: 8–10mm.
Millimeters work across ≠ pixel densities.
Plus, larger targets are easier to reach.
Even for a mouse pointer.

5. There's more to touch than to a hover
Wroblewski's Touch Gesture Reference Guide

6. THERE IS NO HOVER
“While content can be our top priority, let’s not forget
that our designs and interactions, hovers included, can have
a great positive impact on how visitors experience our site.
Hover wisely, friends.”
Dynamic tool tips and help: could be something that appears on page load and then fades away.

7. RECOMMENDED TOOLS
UX designer’s standard answer:
“It depends”
What are you designing?

8. Sketch
It's like Adobe, but for screens.
Pros:
It's plain simple
Vector based
Cons:
Static screens
No element behavior

9. Axure
Interactive wireframe & mockup tool.
Similar to Justinmind or UXPin.
Pros:
Considers RWD
For large/long projects
Cons:
Steep learning curve
Outdated UI scheme

10. InVision
Wireframe & mockup presentation tool.
Similar to Marvel or Pop.
Pros:
Easly to use
Fast building screen flows
Cons:
Interactivity is hidden
Screens built in another app

11. Framer, Origami, Pixate, Proto.io, …
Mobile First – sometimes only – prototyping tools.
Pros:
Mobile first mindset
Microinteractions
Cons:
Focus on Apps
Don't consider RWD

12. HTML5
Couldn't be closer to the end user experience.
Pros:
Real browser rendering
Test and iterate faster
Cons:
Not a WYSIWYG approach
You have to learn code

13. “The Tool Rule: It's not about the tools.”
Stephen Hay @ UXLx

14. DESIGNER, MEET THE BROWSER(S)
Learn HTML+CSS
Where to start
Get your hands dirty
Browser console
Codecademy
Shay Howe's
CodePen

15. “Your visitors don’t give a sh¡t if your site is responsive.”
WHAT CUSTOMERS DO CARE:
When your site takes 20 seconds to load.
When they can’t get done what they need to get done.
When interactions are awkward and broken.

16. THINK
how to make the UI smarter.
Does the user need to select a CC type when it can be
identified from the first characters of its number?
Do you need a Zip Code when the location can be
detected with a puch of a button?
Etc.
It can get very creative!

17. — KISSS —
KEEP IT SIMPLE,
STRUCTURED &
SCALABLE

18. KISSS #1
Keep it Simple, Structured & Scalable
SIMPLIFY THINGS DOWN
You can’t have UI that makes people think.
Think on what we’re doing for whom.
Minimize the amount of choices available.

19. BE ALWAYS CRITICAL
“We have a ton of power at our fingertips.
However, with this power, we each have to ask ourselves:
just because I can do something, should I?”
Jenn Lukas

20. “Throw out 80% that’s on your screen…
Everything else here just needs to pixelate and die”
Luke Wroblewski

21. WHAT REALLY MATTERS?
Small screen space forces you to focus.
Prioritize on what matters most on your website.
What do users do with/on your website?

22. KISSS #2
Keep it Simple, Structured & Scalable
STRUCTURE YOUR CONTENT
And also,
Atomify your designs
Build a pattern library
Define flexible layout systems

23. KISSS #3
Keep it Simple, Structured & Scalable
PERFORMANCE
is not just for developers
Performance and speed have a long term impact.

24. “Speed is more important than aesthetics.”
Bruce Lawson
Users want something fast and easy to use.
They don’t usually resize the browser…
Optimizing performance leads to a much better mobile experience than adapting the layout.

25. Performance really matters.
Optimize for performance.
http://radar.oreilly.com/2015/06/devops-developers-designers-ux-metrics-velocity.html

26. “Sometimes you'll make choices that favor performance;
other times, you'll make choices that favor aesthetics.
The key is using all the information available to you
to make the right decision for you and your site.”
Lara Callender Hogan @ Designing for Performance

27. How to make it happen.
http://radar.oreilly.com/2015/06/devops-developers-designers-ux-metrics-velocity.html

28. THIS IS JUST THE START
“Better experiences mean more conversions, more
engagement and a better chance the user will walk away with
a positive feeling about your brand, service or product. Sure,
my client’s desktop site rendered just fine on smartphones,
but creating a focused experience made all the difference.
Creating contextually-aware experiences is good business.”
Bruce Lawson