• Like
  • Save
Mobile-first, a quick introduction
Upcoming SlideShare
Loading in...5

Mobile-first, a quick introduction



Mobile-first is a simple idea with big implications: digital products should be designed for mobile first. Not the other way around. ...

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:

Brad Frost:



Total Views
Views on SlideShare
Embed Views



23 Embeds 1,607

http://informatiearchitectuur.be 579
http://www.netlash.com 294
http://wijs.be 280
http://www.bram.us 166
http://preview.netlash-concept-001.openminds.be 121
http://www.svendemeyere.be 59
http://wijs.dev 43
http://feeds.feedburner.com 29
https://twitter.com 8
http://www.schuirink.net 5
http://www.linkedin.com 4
http://www.e-wiadomosci.cba.pl 3
http://www.online-studeren.net 3
https://twimg0-a.akamaihd.net 2
http://cloud.feedly.com 2
http://linkedin.dev 2
http://informatiearchitectuur.dev 1
http://www.nieuws.be 1
http://wijs.local 1
http://wijs.localhost 1
http://www.webwatch.be 1
http://us-w1.rockmelt.com 1
http://informatiearchitectuur.github.io 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Mobile-first, a quick introduction Mobile-first, a quick introduction Presentation Transcript

    • 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
    • Adobe
    • 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.