How to build a kick-ass mobile experience
-
Upload
michael-dick -
Category
Technology
-
view
2.474 -
download
3
Transcript of How to build a kick-ass mobile experience
![Page 1: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/1.jpg)
HOW TO BUILDA KICK-ASS
MOBILE EXPERIENCE
@MICHAELDICK
![Page 2: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/2.jpg)
Let’s start with the
Similarities
How many people are new to mobile?---Rid you of fear that mobile is different.
![Page 3: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/3.jpg)
Web designers know how to designfor an evolving medium.
![Page 4: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/4.jpg)
Web designers know how to designaround technical constraints.
![Page 5: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/5.jpg)
Web designers know how to designusing similar tools.
![Page 6: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/6.jpg)
Web designers know how to testusing similar tools.
HTML is HTMLCSS is CSS.JS is JS.Safari is Safari.PHP, Ruby, .NET...are still the same.
![Page 7: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/7.jpg)
Same input fields...but enhanced :)
![Page 8: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/8.jpg)
A finger is still a finger...but enhanced :)
Use gestures---Tap, Slide, Glide, Swipe
![Page 9: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/9.jpg)
Mimic real world mental models.
![Page 10: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/10.jpg)
SOURCE: TIDBITS.COM
Manipulateyourcontent
![Page 11: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/11.jpg)
SOURCE: 31THREE.COM
![Page 12: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/12.jpg)
![Page 13: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/13.jpg)
SOURCE: APPSFORGROWNUPS.COM
![Page 14: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/14.jpg)
Context is King.
So what the hell is context?
![Page 15: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/15.jpg)
![Page 16: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/16.jpg)
![Page 17: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/17.jpg)
Everything is context.--But is that how we define “mobile”....on the go?
![Page 18: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/18.jpg)
Are tablets mobile?
![Page 19: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/19.jpg)
SOURCE: WIKIPEDIA
“The ipad is somuch more intimate.”- Steve Jobs
![Page 20: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/20.jpg)
Behaviors are changing
It’s hard to assume which context a user will be in
![Page 21: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/21.jpg)
34% of users discover yoursite on a desktop...
then follow up on mobile.
SOURCE: YAHOO!
![Page 22: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/22.jpg)
Access is becoming partof the user experience.
But that’s why the web works.---It’s an universal platformthat’s accessible from anywhere
---Users are changing devicesmid-way through their experience.
---That’s why it’s important for usas designers to ensure that wecontinue a familiar exp acrossall platforms.
![Page 23: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/23.jpg)
![Page 24: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/24.jpg)
![Page 25: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/25.jpg)
![Page 26: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/26.jpg)
![Page 27: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/27.jpg)
SOHOW DO I MAKE
A KICK ASSUSER EXPERIENCE?!
![Page 28: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/28.jpg)
GOAL #!
A great mobile experienceis one that gets the user
what they want with no hassle.
![Page 29: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/29.jpg)
Mobile forces us to have super human focus.
What’spriority #1?---This is why the “Mobile first” works.
![Page 30: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/30.jpg)
It’s not about makinga minature experience.
It’s about making a minimal exp.---How can you get the content closest to the user?
![Page 31: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/31.jpg)
![Page 32: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/32.jpg)
![Page 33: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/33.jpg)
![Page 34: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/34.jpg)
![Page 35: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/35.jpg)
UX TIPSto tell yourdeveloper
![Page 36: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/36.jpg)
Design and build for fluid widths
![Page 37: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/37.jpg)
Always give tappable areasa width and height of:
44x44
![Page 38: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/38.jpg)
Don’t let this happento your users
Disable autocorrect and autocapitalize in sensitive inputs
![Page 39: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/39.jpg)
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.
![Page 40: How to build a kick-ass mobile experience](https://reader037.fdocuments.in/reader037/viewer/2022103000/5564b8a1d8b42a3e618b4f61/html5/thumbnails/40.jpg)
QATweet how kick-ass this was??!
@michaeldick