Mobile-first, a quick introduction

GO MOBILE-FIRST get IA, usability and UX bonus points Jelle Desramaults, IA day 2012 Netlash, GhentThese 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.

HELLO Jelle Desramaults Freelance design studio gorilla 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.

My website This is my studio’s website. http://gorilla-webdesign.be

ME a This is me.At Build 2011 (http://buildconf.com) by the way. Build rocks!

MARCEL This is my son. Marcel.Thought I’d score some bonus oohs from the ladies with this slide.

follow me @jdesramaults @jelled A-U-L-T-SI’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 :)

B-L-E-W-S-K-ILukeWroblewski@lukew follow him! Another guy with a difficult name. He had more luck with his twitter handle. Follow him, read him, watch him.

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!

Jelle @lukew @jdesramaults Desramaults 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.

GoogleLuke Wrobleski isn’t the only one thinking and working mobile-first. Some big players are adapting this way of working.

Facebook

better than desktop experiencejoe hewitt, former design lead facebook

Jelle @lukewtime Now is the @jdesramaults Desramaults NOW IS THE TIME yeah right, so was last yearThe 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.

Smartphones passed PC shipments in Q4 2010this was boldly predicted for Q4 2012, but happend 2 years early (end 2010)

CONTEXT IS BLURRING desktop use vs. mobile use is blurringAn important thing to realise is this: the difference in the way we use desktop versus mobile is blurring.

(this used to be) DESKTOP CONTEXT indoors fast connectioncomfortably seatedgood hardware

(this used to be) MOBILE CONTEXT on-the-go outsidecrappy connection

on-the-gostill true but NEW CONTEXT 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).

ANYWHERE ANYTIME (iphone, see?)

SMARTPHONE USE76% 62% 80%WAITING IN LINE WATCHING TV DOWNTIME 76% 39% IN STORES 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!).

THIS USED TO BE THE WEB till 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).

THIS IS THE WEB 5 years later 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.

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.

RESPONSIVE WEB DESIGN COOL! not so great after all But… feels clumsy short-sightedThe 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.

MOBILE-FIRST JACKPOT!future friendly feels ”right” progressive 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.

4 BONUS POINTSfor you lovely IAs, usability experts and UX designers

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

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.

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.

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.

80% of the screen is filled with… well, bullshit.Bonus point #1: going mobile first will cut the crap.

POINT 2 DESIGN FOR THE BIG THUMB Going big for mobile = better usability for desktopBonus point #2: using big touch targets for the mobile version of your digital product means a more usable desktop product. Bigger is better.

big thumb little linksThumbs are clumsy devices compared to our mouse pointers. You need to accommodate for these big meat sticks.

TOUCH TARGET SIZE 44px/pt 44px/pt 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.

POINT 3 DESIGN FOR ONE EYE Partial attention So keep it simple, keep it usableBonus 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.

focused design! check the guides

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.

GOOD DESIGN ADVICEElevate the content that people care about Give people a logical path to follow Make usage easy and obvious … A few guidelines taken from Apple’s iOS Human Interface guidelines. Good design guidelines, period.

POINT 4 DESIGN FORCRAPPY CONNECTIONS Not everyone’s on WIFI or 3GFast for mobile = lightning fast for desktop Fast 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.

I stole it all from these guys. Maximum respect! PROPS http://lukew.com/presos http://bradfrostweb.com/blog/ web/for-a-future-friendly-webThat’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!

THANKS! @jdesramaults jelle@gorilla-webdesign.be 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.

http://www.netlash.com	294
http://wijs.be	228
http://www.bram.us	151
http://informatiearchitectuur.be	124
http://preview.netlash-concept-001.openminds.be	121
http://wijs.dev	43
http://www.svendemeyere.be	34
http://feeds.feedburner.com	19
http://www.linkedin.com	4
http://www.e-wiadomosci.cba.pl	3
http://www.schuirink.net	2
http://wijs.local	1
https://twimg0-a.akamaihd.net	1
http://www.webwatch.be	1
http://us-w1.rockmelt.com	1
http://wijs.localhost	1
http://www.nieuws.be	1

Mobile-first, a quick introduction

by Jelle Desramaults on Feb 13, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

17 Embeds 1,029

Statistics

Mobile-first, a quick introduction — Presentation Transcript