mobile-first, a quick introduction
DESCRIPTION
Mobile-first is a simple idea with big implications: digital products should be designed for mobile first. Not the other way around. These are the slides for my 12 minute presentation at IA day 2012. Just a quick introduction to the mobile-first concept. Props to Luke Wroblewski and Brad Frost. I got most of the stuff in this presentation from their presentations and blogs. Luke Wroblewski: http://www.lukew.com/presos/preso.asp?26 Brad Frost: http://bradfrostweb.com/blog/web/for-a-future-friendly-web/TRANSCRIPT
![Page 1: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/1.jpg)
GO MOBILE-FIRSTget IA, usability and UX bonus points
Jelle Desramaults, IA day 2012Netlash, Ghent
These are the slides for my 12 minute presentation at IA day 2012. Just A quick introduction to the mobile-first concept. I added these notes at the bottom so you can follow along on slideshare.
![Page 2: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/2.jpg)
HELLOJelle Desramaults
Freelance design studiogorilla
My name is Jelle Desramaults. I run a freelance design studio called Gorilla. I design websites and web applications. I keep a keen eye on the mobile space. I work and live in Ghent, Belgium.
![Page 3: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/3.jpg)
My website
This is my studio’s website. http://gorilla-webdesign.be
![Page 4: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/4.jpg)
aME
This is me.At Build 2011 (http://buildconf.com) by the way. Build rocks!
![Page 5: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/5.jpg)
MARCEL
This is my son. Marcel.Thought I’d score some bonus oohs from the ladies with this slide.
![Page 6: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/6.jpg)
@jdesramaults@jelled A-U-L-T-S
follow me
I’m @jdesramaults on twitter. Difficult name, I know. Longest twitter handle ever.@jelled was already taken so I chose the next logical thing. Sorry ‘bout that :)
![Page 7: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/7.jpg)
@lukew
Luke Wroblewski
B-L-E-W-S-K-I
follow him!
Another guy with a difficult name. He had more luck with his twitter handle.Follow him, read him, watch him.
![Page 8: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/8.jpg)
Luke Wroblewski has been talking about mobile-first for a couple of years.He wrote a book about it in 2011. Published by A Book Apart. Read it!
![Page 9: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/9.jpg)
Jelle Desramaults@jdesramaults@lukew
?A small, simple idea.Design for mobile first, expand that experience
to the desktop
So what is mobile-first? It’s a simple idea with big implications.The idea: digital products should be designed for mobile first. Not the other way around.
![Page 10: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/10.jpg)
Luke Wrobleski isn’t the only one thinking and working mobile-first.Some big players are adapting this way of working.
![Page 11: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/11.jpg)
![Page 12: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/12.jpg)
Adobe
![Page 13: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/13.jpg)
better than desktop experience
joe hewitt, former design lead facebook
![Page 14: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/14.jpg)
Jelle Desramaults@jdesramaults@lukewNow is the time
NOW IS THE TIME
yeah right, so was last year
The ubiquitous mobile web has been boldly predicted for some years now but I think it’s safe to say that it has finally arrived. Even in little old Belgium.
![Page 15: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/15.jpg)
this was boldly predicted for Q4 2012, but happend 2 years early (end 2010)
Smartphones passed PC shipments in Q4 2010
![Page 16: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/16.jpg)
CONTEXTIS BLURRING
desktop use vs. mobile use is blurring
An important thing to realise is this: the difference in the way we use desktop versus mobile is blurring.
![Page 17: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/17.jpg)
DESKTOPCONTEXT
(this used to be)
fast connectioncomfortably seatedgood hardware
indoors
![Page 18: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/18.jpg)
MOBILECONTEXT
(this used to be)
on-the-gooutside
crappy connection
![Page 19: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/19.jpg)
NEW CONTEXTon-the-gostill true
but
This is the new “mobile” context. We still use our smartphone On-the-go but we are also using them alongside our tablets,desktop PCs laptops. A lot of sofas in the world look like the one in the bottom picture (iPhone, iPad, MacBook while watching TV).
![Page 20: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/20.jpg)
ANYWHEREANYTIME
(iphone, see?)
![Page 21: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/21.jpg)
SMARTPHONE USE
76%WAITING IN LINE
62%WATCHING TV
80%DOWNTIME
76%IN STORES
39%TAKING A POOP
This is how and where we use our smartphone nowadays. On the move, waiting in line or out shopping but also while we’re watching TV or during downtime. 39% enjoys a quick game of angry birds while pooping (UH!).
![Page 22: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/22.jpg)
THIS USED TO BE THE WEBtill about 2007
Up until 2007-ish we built our digital products for this device.Befor 2007 smartphones weren’t so great and network connection was crappy (and very expensive).
![Page 23: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/23.jpg)
THIS IS THE WEB5 yearslater
In 2007 Apple came out with the first iPhone. In the 5 following years things changed… a lot.Network connectivity (and pricing) improved and a plethora of capable mobile devices started to appear.
![Page 24: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/24.jpg)
TOMORROW’S WEB?
? ??? ???????
??
? ???? ?? ?
??
who knows?
Nobody knows what tomorrow will bring but designing digital products for the desktop computer might become a continually backward way of doing things. It makes more sense to design for the smallest screens first.
![Page 25: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/25.jpg)
RESPONSIVE WEB DESIGN
feels clumsy not so great after all
short-sighted
COOL!
But…
The forward-thinking web designer has been designing responsive web sites for about a year now. Cool! A big step in the right direction. However we are finding that this way of working feels a bit clumsy and that the user experience doesn’t always scale down well.
![Page 26: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/26.jpg)
MOBILE-FIRST
feels ”right” progressivefuture friendly
This feels a lot better. Start from mobile and progressively enhance the user experience for larger screens. Feels better and feels like a safer—future friendly—bet in these rapidly changing times.
JACKPOT!
![Page 27: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/27.jpg)
4 BONUS POINTSfor you lovely IAs, usability experts and UX designers
![Page 28: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/28.jpg)
POINT 1 DESIGN FOR
A SMALL SCREENWhen you loose 80% of your screen you are
forced to focus on the stuff that matters
laser focus
![Page 29: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/29.jpg)
70+ links?
Take Flickr for example. Over the course of the last years the desktop website has grown into a behemoth with a multitude of fly-out menu’s containing more that 70 links.
![Page 30: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/30.jpg)
Compare that to Flick’s mobile website. I count 10 links. What changed? Smaller screen size forced Flickr to focus on the things that matter most to their users.
![Page 31: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/31.jpg)
On a lot of websites the actual content—you know, that thing users visit the site for—is hard to find.Only 20% of the screen is filled with content.
![Page 32: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/32.jpg)
80% of the screen is filled with… well, bullshit.Bonus point #1: going mobile first will cut the crap.
![Page 33: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/33.jpg)
POINT 2 DESIGN FOR
THE BIG THUMBGoing big for mobile
= better usability for desktop
Bonus point #2: using big touch targets for the mobile version of your digital product means a more usable desktop product. Bigger is better.
![Page 34: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/34.jpg)
big thumblittle links
Thumbs are clumsy devices compared to our mouse pointers.You need to accommodate for these big meat sticks.
![Page 35: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/35.jpg)
44px/pt
44px/pt
TOUCH TARGET SIZE
A comfortable touch target size is something around 44px by 44px. This is taken from Apple’s iOS human interface design guidelines by the way.
![Page 36: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/36.jpg)
POINT 3 DESIGN FOR
ONE EYEPartial attention
So keep it simple, keep it usable
Bonus point #3: mobile users give you partial attention. Design a simple and focused user experience. Again, what’s good for mobile works well on desktop too.
![Page 37: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/37.jpg)
focused design! check the guides
![Page 38: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/38.jpg)
All the big players (Apple, Microsoft, Google) have designer guidelines for a good mobile experience. These guidelines are solid universal UX design principles. Good for mobile and good for desktop.
![Page 39: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/39.jpg)
GOOD DESIGN ADVICE
A few guidelines taken from Apple’s iOS Human Interface guidelines. Good design guidelines, period.
Elevate the content that people care about
Give people a logical path to follow
Make usage easy and obvious
…
![Page 40: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/40.jpg)
POINT 4 DESIGN FOR
CRAPPY CONNECTIONSNot everyone’s on WIFI or 3G
Fast for mobile = lightning fast for desktopFast UX = better UX
Bonus point #4: going mobile-first forces you to keep things lightweight and fast. A fast mobile product is a very fast desktop product. A faster UX is a better UX.
![Page 41: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/41.jpg)
PROPS
http://lukew.com/presos
http://bradfrostweb.com/blog/web/for-a-future-friendly-web
I stole it all from these guys. Maximum respect!
That’s it! A big shout out to Luke Wroblewski and Brad Frost. These guys are amazing! Read their stuff, watch their presentations. I basically copy/pasted most of their stuff and slapped it up with some Gorilla visual style. Thanks guys!
![Page 42: Mobile-first, a quick introduction](https://reader033.vdocument.in/reader033/viewer/2022061218/54b79a7c4a7959956b8b4589/html5/thumbnails/42.jpg)
THANKS!@jdesramaults
http://gorilla-webdesign.be
Thanks for watching. I hope you liked it. I’d love to hear from you! Shout out on twitter or e-mail me with your questions and remarks.