1. HOW TO BUILD
A KICK-ASS
MOBILE EXPERIENCE
@MICHAELDICK

2. How many people
are new to mobile?
---
Rid you of fear that mobile is different.
Let’s start with the
Similarities

3. Web designers know how to design
for an evolving medium.

4. Web designers know how to design
around technical constraints.

5. Web designers know how to design
using similar tools.

6. HTML is HTML
CSS is CSS.
JS is JS.
Safari is Safari.
PHP, Ruby, .NET...are
still the same.
Web designers know how to test
using similar tools.

7. Same input fields...but enhanced :)

8. Use gestures
---
Tap, Slide, Glide, Swipe
A finger is still a finger...but enhanced :)

9. Mimic real world mental models.

10. Manipulate
your
content
SOURCE: TIDBITS.COM

11. SOURCE: 31THREE.COM

13. SOURCE: APPSFORGROWNUPS.COM

14. So what the
hell is context?
Context is King.

17. Everything is
context.
--
But is that how we
define “mobile”....on the
go?

18. Are tablets mobile?

19. “The ipad is so
much more
intimate.”
- Steve Jobs
SOURCE: WIKIPEDIA

20. It’s hard to assume
which context a user
will be in
Behaviors are changing

21. 34% of users discover your
site on a desktop...
then follow up on mobile.
SOURCE:YAHOO!

22. But that’s why
the web works.
---
It’s an universal platform
that’s accessible from
anywhere
---
Users are changing devices
mid-way through their experience.
---
That’s why it’s important for us
as designers to ensure that we
continue a familiar exp across
all platforms.
Access is becoming part
of the user experience.

27. SO
HOW DO I MAKE
A KICK ASS
USER EXPERIENCE?!

28. GOAL #!
A great mobile experience
is one that gets the user
what they want with no hassle.

29. What’s
priority #1?
---
This is why the “Mobile first” works.
Mobile forces us to
have super human focus.

30. It’s about
making a
minimal exp.
---
How can you get the content
closest to the user?
It’s not about making
a minature experience.

35. UX TIPS
to tell your
developer

36. Design and build for fluid widths

37. Always give tappable areas
a width and height of:
44x44

38. Disable autocorrect
and autocapitalize
in sensitive inputs
Don’t let this happen
to your users

39. Behind the scenes
• Hide the address bar.
• Hide the browser chrome.
• Change the color of the status bar.
• Include mobile icon.
• Use proper input fields.

40. QA
Tweet how kick-ass this was??!
@michaeldick