Mobile First Converted

8/3/2019 Mobile First Converted

http://slidepdf.com/reader/full/mobile-first-converted 1/111

right © 2011 Luke Wroblewski

hts reserved

sher: Jeffrey Zeldman

gner: Jason Santa Maria

r: Mandy Brown

editor: Krista Stevens



positor: Rob Weychert

978-1-937557-02-7

ok Apart

York, New York

abookapart.com

8 7 6 5 4 3 2 1

LE OF CONTENTS

uction

1

y Mobile First?

ter 1

wth

ter 2

onstraints

ter 3

apabilities

2

ow to go Mobile

ter 4

rganization

ter 5

ctions

ter 6

puts

ter 7

Layout

lusion

owledgments

urces

ences

EWORD

Wroblewski is a data guy, so let’s check theHe has personally written 1,372 articles, givenresentations, and authored three books one and web usability, interaction, and design, hisand (I think) most important being the one you

hold in your hands. If that kind of output leaves youpressed, consider that Luke did all this writing inee time, while employed as digital product designor some of the biggest companies on the internet



d occasionally at his own startups.

highly accomplished, green-shirted, plain-spokenner has spent the past several years focusingsely on the mobile experience. That is lucky for as mobile is where the whole web and world arein a headlong rush.

ven luckier for you and me, because Luke not onlys mobile inside-out and backwards, he’s also ant designer who puts the user first. Plus he’s aof a great communi-cator. Luke writes from aation of 16 years of thought leadership and digital

uct design execution—not to mention therption of thousands of white papers, internalts, articles, books, and lectures. And he has

ed what he knows into every page of Mobile First.

ing this book is not only fun, it’s painlessly butoundly educational. Luke’s call to action isging the way my company and I approach then of websites, and it will change the way you do,

Mobile First is packed with the best kind of asion—persuasion from data, letting the facts

k for themselves. And it offers the best kind of e: practical, immediate, user-focused, big-picturehat sweats every detail and respects your IQ andexperience as a practitioner.

this book. I’m thrilled that we were lucky enoughblish it. I hope it ends up on every designer, front-eveloper, and UX person’s bookshelf. I want tour industry embrace the mobile experience in a

hat helps our users and us not merely succeede but thrive. If enough of us follow the precepts of tle book, I am confident about the future of the

frey Zeldman





idea in your hands.

ut this book

time is precious so this book is short and to the

rst section outlines why a mobile first approachebsites and applications makes sense now. Thend section details how designing mobile webriences is different (from designing desktop webriences) so you can take what you know aboutning for the web and get started on mobile today.

won’t find any code in this book; there are manyrammers out there who can provide better advice

obile development than I can. What you will find isiness case for mobile first and many designrns and best practices that you can continueng back to as you design and develop mobileexperiences.

BILE FIrSt

so worth pointing out up front that I’m going to userm “mobile web experience” instead of “mobileor “mobile website” throughout this book.amentally, there’s just one World Wide Web, but ite experienced in different ways on differentes. We’re focusing on the mobile experience inpages.

promised conciseness, so let’s dispense with

troductions and dive into how going small firstltimately help you go very, very big.

uctIon 3





t 1

MOBILE FIRST?

s the elevator pitch: designing for mobile first notprepares you for the explosive growth and newrtunities on the mobile internet, it forces you toand enables you to innovate in ways you

ously couldn’t.

urse there’s a lot of detai l behind that statement,h is what this part is all about.

OWTHTake a ride on The subway, stop by theor go anywhere near a high school and you’llunter the most recent evolution of the human race.

, light-emitting plastic screens attached toe’s hands are just about anywhere you look.

kfully, this isn’t some odd genetic mutation—

st our friend, the mobile device. And he’swhere.

se you haven’t been keeping up with the latestI’ll give you a quick recap: mobile is growing like

y technical, I know.) While analysts havected for years that mobile will be “the next big” their prophecies are finally coming true in a veryay. To understand just how big, let’s look at somet statistics:

artphones were boldly predicted to out-ship theined global market of laptop, desktop, andook computers in 2012. They did so in the laster of 2010

//bkaprt.com/mf/4, PDF; fig 1.1)—two yearsr than predicted!

th 7

RTPHONES

al Shipments in MM

10

E

E

E

E





Z3 was a high-end mobile device in the Uniteds in 2006. It featured SMS, email, instantaging, a two megapixel camera, a music player,color screen, and a WAP 2.0/XHTML webser; it connected to AT&T’s EDGE

speed data network, and the experience of usingeb on it...sucked.

th 9

2: the Motorola Z3 mobile phone was state-of-rt in the uS back in

.

how bad was it? I counted almost two minutesstarting the web browser to finally seeing a webthat consisted of just a few text links//bkaprt.com/mf/15). In a world where websi tesure their response times in mil-liseconds, it’s notto see how painful that could feel. But it wasn’t justait; using the phone’s keypad to triple-tap text

a chore, and even predictive text tools like T9/

rt.com/mf/16) didn’t fully ease the pain.

omething happened less than a year later thatchanged things. On June 29, 2007, Steve Jobs

n stage and introduced the first iPhone. Appleoy or not, it’s hard to deny the impact this devicead on the mobile internet.

was a mobile phone on which browsing the webdid not suck. Looking at AT&T’s mobile datafrom 2006

09 (when it was the exclusive carrier of thene in the US) tells the story quite clearly (fig 1.3).

g this time period, AT&T saw a 4,932% increase

bile data traffic (http://bkaprt.com/mf/9; PDF)—noer their service was spotty for so long! Theence between a device that sucks for browsingeb and one that is great 10 MoBILE FIrSt



rola Z3

ne

ne 3G

ne 3GS

3: At&t’s meteoric rise in mobile data traffic canen in more detail at http://

rt.com/mf/9. (Source: At&t, Morgan Stanleyrch.) for browsing the web is actually quitecant. In fact, in 2009, one iPhone wasnsible for as much mobile traffic as 30 basicre phones (http://bkaprt.com/mf/17)—no doubt



by the flat-fee data plan available with thee.

mobile isn’t growing just because devices areg better: they’re getting cheaper as well. People

could never afford a desktop or laptop computer ow get online using inexpensive mobile devicesncreasingly affordable data plans.

der coverage from faster networks has also beeng fuel to the fire. In 2010 alone, mobile networkds doubled. As networks became twice as fast,verage amount of data traffic used per tphone doubled as well.

his use of this data isn’t going to stop anytime

global mobile data traffic is projected toase 26-fold between 2010 and 2015//bkaprt.com/mf/17)!

s a whole lot of opportunity coming your way,fast.

th 11

DEVICES ARE NOT CREATED EQUAL

efore we get ahead of ourselves with pie-in-the-mobile web usage fantasies, let’s ground things a

rst, mobile data traffic includes a lot more thanhe web. Second, basic feature phones still makee vast majority of devices on the mobile networkhere’s a world of difference between feature

e use and usage of more capable mobilees.

what kinds of differences are we talking about?

martphone owners, 35% browse the mobileet at least daily, versus only 4% of feature phoners.

martphone users, 31% have accessed socialorks using their mobile browser, compared to onlyf feature phone users.

martphone users, 70% have accessed email onmobile device, versus only 12% of feature phone.

all this was in 2009! Plus this data includesrtphones” with painful web browsers as well/

rt.com/mf/18). So chances are there’s an evenr gap today.

sure everyone on the mobile web can accesscontent now you would need a solution for featurees, smartphones, and everything in between. Buts book, I’m going to focus mostly on designing for tphones. Not because Google is giving me aack for every Android phone sold, but because:

artphones have a disproportionate amount of webata usage. According to Cisco, smartphonessent only 13% of total global handsets in use

, but they make up 78% of total handset trafficce: http://

rt.com/mf/19; PDF).

rate of smartphone adoption is extremely fastetting faster. In the third quarter of 2010,tphone sales grew 96% from the previous year.more people are getting smartphones every

e day (http://bkaprt.com/20).

oBILE FIrSt

h each new volley of devices, smartphones areg more and more affordable. What previously



several hundred dollars is now approaching $100elow; this opens up a huge new market of users.

t’s not outlandish to suggest that today’stphone will simply be tomorrow’s “phone.”

hese reasons and more, smartphones represent aopportunity for immediate and long-termmer engagement for many companies. Theref course, many opportunities with the vaster of feature phones out there today as well—cially through integrated services like SMS

pecialized mobile browsers like OperaMinih does a nice job of bringing better web browsingture phones).

ever, the mobile industry is moving towardtphones, and so will this book.

very device labeled a smartphone isn’t createdly, either. At the beginning of 2010, iPhone datae was over four times higher than any other tphone platform. But by the end of the year, other e devices had caught up, and iPhone data usage

only 1.75 times higher than Google’s Androidrm (http://bkaprt.com/mf/17).

e can also change dramatically within a singlerm.

n Research in Motion (RIM) introduced a moreble web browser with their Storm mobile device, it

y shot up to 16% of all of RIM’s mobile traffic onerizon network (http://bkaprt.com/mf/21). Theberry devices made by RIM today have an evenr web browser so expect usage to grow even

e examples not only illustrate the impact a moreble mobi le device can have on usage; they alsoght just how quickly things are changing. The rateovation in mobile devices is unparalleled; as a, it’s creating all kinds of new opportunities.

new capabilities come new ways to interact witheb and with digital services, information, ande.

talk a lot more about this later in the book, but for

just want to point out that more capable devicesaster Growth 13

orks don’t just amount to more traffic to your site.introduce entirely new opportunities for gement as well.

ider the local review service, Yelp. Their mobileucts are used by just 7% of their total audience butesponsible for 35% of all their searches. Everysecond Yelp’s mobile products manage a call to

al business or a request for driving directions//bkaprt.com/mf/22). That’s a whole new set of ctions Yelp didn’t have before people startedtheir service on mobile devices.

other example, let’s look at the real estate

ce, Zillow. Their customers are viewing actives 45% more often from mobile devices—ared to their desktop website//bkaprt.com/mf/23). These are primarily activers on location or scoping out neighborhoods; theysent a new kind of audience for the companyed by the growth of mobile.

T ABOUT THE NATIVES?

urse we can’t talk about mobile internet growthut mentioning the ongoing debate between nativee applications and mobile web solutions. Whilepeople try to argue for one side or the other, thes there are great reasons for doing both.



use native mobile applications run, well—natively

have access to system resources that webcations do not. This means user interfacetions and interactions are generally smoother in

e applications. Trying to replicate these effects inrowser can lead to noticeable hiccups and lags inser experience.

e mobile applications give you robust access toware capabilities that you currently can’t getgh mobile web browsers. Core features likess to the address book, SMS, camera, audios, and other built-in sensors are mostlyailable. Also absent is the ability to run processesbackground and easily monetize through mobiletores or in-app purchases. Non-native

cations can’t get into a native app store and havech harder time getting on 14 MoBILE FIrSt

4: Even though they have native mobilecations for ioS, Android,

berry, and Palm, the location-

d service Gowalla also has a

e web experience for anyone

wing links to Gowalla on their

e device.

ome screen of people’s mobile devices, whichega-tively impact discovery and ongoing usage.

your mobile product or business requires deeper ware access, background processes, app or in-ales, or more integrated placement on mobilees to be viable, you may need a native solution.

hat doesn’t mean you don’t need a mobile webon, too.

obile strategist Jason Grigsby is fond of pointing

links don’t open apps, they go to web pages,”/

rt.com/mf/24). Whether it’s through search, email,l networks, or on web pages, if you have content

e, people will find and share links to it. Not havingbile web solution means anyone that follows thoseon a mobile device won’t have a great experiencey can even access your content at all). Having a

e mobile application won’t help (fig 1.4).

ss might even be the biggest user benefit for a



e web experience. Even if you build a nativee application for one platform, chances are yoube able to create one for every platform. Apple’s

equires Objective C; Google’s Android needsMicrosoft’s Windows Phone 7 relies on Growth

rlight; Samsung’s Bada requires C++; RIM’sberry has Java, WebWorks, and Adobe Air ons. Finding a company that can build somethingof these technologies is rare. And even if youreate native applications for each platform, the

of maintaining them can quickly make itbitive.

he web might be your most popular mobile

rience anyway. Fourteen percent of Twitter’sbers use the mobile web experience compared tosing the native iPhone app and 7% using theberry native app. The rest of Twitter’s nativee applications are each used by less than 4% of user base (http://bkaprt.com/mf/25).

ame pattern can be found on Facebook. Close to

cebook posts are created on the mobile webrience, while Facebook’s native iPhone, Android,Blackberry apps only account for about 4% of

each (http://bkaprt.com/

). It turns out access (anywhere) goes a long way.

t, native mobile applications are actuallyasing web use on mobile devices. Each time ank is shared or referenced in a native applicationns in a web browser window. So more native

cation use quickly turns into more web use.

e web experiences also don’t require users toload updates (a fix on the server is a fix on theand they enable you to do frequent A/B (or et) testing of multiple design options. If either of

considerations is of vital importance to you, ae web application can make more sense.

erhaps the best reason to start with a mobile webon is that it builds on web design andopment skills you already have. You don’t have too get started. In fact, I think you should start right

.

TIME IS NOW

d by capable devices and faster networks,e internet usage is exploding. Building mobileot only positions you to take advantage of thish, it also opens up new opportunities for ging your customers.

oBILE FIrSt

sn’t just an opportunity to create a mobile versionur web product; it’s an opportunity to provide anved overall experience for your customers.

ider the social networking service Facebook.

e are more than 250 million active users//bkaprt.com/

) accessing Facebook through their mobilees.

e users are twice as active on Facebook as non-e users.

combination of mobile and desktop experiencess in more engaged users across both sets of es. That’s because Facebook doesn’t just thinkmobile experience as a part of the desktop site; itaces it as a way to make the entire Facebookrience better.



words of Joe Hewitt, former lead developer of book’s iPhone application: “My goal was initiallyo make a mobile companion, but I becamenced it was possible to create a version of book that was actually better than the website,”//bkaprt.com/mf/28). That’s really the mobilertunity in a nutshell.

—how do the constraints and capabilities of e devices help get us there?

th 17

NSTRAINTS

iT’s True the incredible growth of the mobile

et has been fueled by better and better devices,e sti ll remains a very constrained environment.

ens are small, networks are unreliable, ande can find themselves in all kinds of si tuationsthey pull out their mobile devices.

hese constraints are not only good for business,e good for design as well.

s especially true if you subscribe to the adageesign is the process of gradually applyingraints until an elegant solution remains. In other s, embracing constraints (rather than fighting) will ultimately get you to better designs.

EEN SIZE

gh the topic of available screen real estate on theop was hotly contested for many years in the webn community, we finally settled on 1024×768

s as our 18 MoBILE FIrSt

hhead. Today, mobile takes our sunny beach andt down to little more than a sandbox.

rst volley of smartphones running iOS, Android,WebOS mostly stuck to a 320×480 pixelution, which meant 80% of the screen space fromesktop was miss-ing. So 80% of the links, ads,mages, and more from our desktop designs hadd a new home or disappear altogether.

e simply wasn’t room for them on a mobile screen.hat’s...terrific.

n you consider the amount of useless navigation,nt fluff, and irrelevant promotions that li tter a

al web experience, you realize why the mobile diete good for both businesses and customers. Oncee use the mobile version, it’s not uncommon for to pine for the desktop version to be “thate.”

e why, let’s look at the Southwest Airlinesite (fig 2.1), which seems to exemplify thething-including-the-kitchen-sink problem. Addings to a website is relatively easy so lots of thingsdded—especially when multiple stakeholders areed.

ent internal departments, feature owners,esses, and individuals have differentrements for websites. So web teams are often leftto balance many promotions, interactions,nt modules, navigation options and more in a

e layout. On a 1024×768 screen there are lots of s to fill!

mobile experience (in this case, Southwest’se iPhone application), on the other hand, has alike focus on what customers need and what

hwest does: book travel, check in, check flights, check miles, and get alerts (fig 2.2).

om for anything else. Only what matters most.



g that much screen space forces teams to focus.have to make sure that what stays on the screen isost important set of features for your customersour business. There simply isn’t room for anyace debris or content of questionable value. Youto know what matters most.

trAIntS 19

1: the Southwest Airlines website makes surepixel is filled with competing messages and callsion.

oBILE FIrSt



2: the Southwest Airlines iPhone application onlyoom for what

lly matters.

er to do that you need to really know your mers and your business. Designing for mobile

s you to get there, like it or not.

rther illustrate this point, let’s look at the popular o-sharing site, Flickr. While you may be familiar Flickr, chances are you are not familiar with all of er the years, the site has grown to boast over 60ation options in i ts top menu alone (fig 2.3).

n it came time to design their mobile webrience, the Flickr team was able to focus these 60options into six. How did they do it? By knowingtheir customers did on the site and why. Mostusers like to check in and see what’s happening

heir photos; see new photos from people they; and explore interesting images from across the

The mobile website put the focus on these keyns front and center (fig 2.4).

design for mobi le first, you can create agreementnt on what matters most. You can then apply therationale to the desktop (and any other)

rience of your conStrAIntS 21

3: All of Flickr’s top-level menu options—all at

product. If you can agree on the most importantfeatures and content for your customers andess, why should that priori tization change withscreen space?

e are, of course, differences based on mobile andop usage patterns; but the core value of a web



ce remains the same across both formats andnd. In fact, you’ll quickly find your customers willct to do just about everything (within reason) one. Especially those who primarily (or only) usemobiles to get online. So don’t dumb things downobile—focus on what really matters mosthere people can access your website.

mobile first, the end result is an experienceed on the key tasks users want to accomplishut the extraneous detours and general interfaces that litter many of today’s websites. Therey isn’t room in a 320×480 pixel screen for ents of questionable value.

FORMANCE

gh people try to use their mobi le devices justt everywhere (yes, there too!), mobile networksalways there to support them. Even when theyoverage can be expensive (depending on your plan) and spotty—leading to slower connectionsonger, frustrating wait times.

oBILE FIrSt

4: Flickr’s mobile web experience takes 60 plus

ation options down.

gning for mobile means designing for this reality.

ing that can be done to increase performance one should be done. At the highest level that meansng less stuff and using whichever browser andr technologies are available to you to speeds up and reduce people’s monthly carrier bi lls.

an require mobile users to download less byaging both the size and number of fi les (andby HTTP requests) you are sending to a device.obile devices, each HTTP request can be more

y because of mobile network latency. So make

you:

image sprites to group multiple images into ae en-coded file. (Just make sure it’s not too big

decoded!)

dle together and minify CSS and Javascript files.

t or remove dependencies on heavy Javascript-ies—especially if they are just being used for oneo functions.

wise, limit the use of CSS grid systems.

proper HTTP headers to ensure files areopriately cached in the browser’s memory.



trAIntS 23

ere appropriate, take advantage of modernser capabilities like Canvas//bkaprt.com/mf/29) and Appcache//bkaprt.com/mf/30) in HTML5.

my favorite: use CSS3 properties for roundedrs, gradients, text shadows, and box shadows.

reduces the need for images across your entirekeeps things looking great in modern mobilesers, and provides a decent fallback for browserson’t support CSS3 well.

don’t go overboard with heavy CSS3 effects, asany items for the browser to render could actually

erformance.

d isn’t just important on mobile. Testing done byzon, Yahoo!, Microsoft, and others hasstently shown that even very small delays (100ms)e desktop can turn users away. Long-term studiesoogle found that slow performance has lastings, reducing people’s activity for five weeks evena delay has been repaired (http://bkaprt.com/

). So performance matters on the desktop, too.

focus on mobile first and make things fastgh for spotty mobile networks, your websites andcations will be blazingly fast on the desktop andcustomers will love you for it—just another ntage to embracing mobi le constraints up front.

AND PLACE

simplest form, context is the circumstances under h something happens. For example, desktoputers are most often used at a desk (in an officeme); with a persis-tent connection to power andetwork; in relative privacy; from a seated position;o on. While someone can certainly use a mobi lee for a long period of time while seated at a desk,is a much wider set of circumstances possible

use mobile devices are naturally portable.

mobile devices are (just about) always with their rs, location and time play a big role in how theysed. And that context has a big impact on design.

n you 24 MoBILE FIrSt

n for mobile you are designing something thate used anywhere and anytime.

tion

n many people first imagine designing for mobile,picture a hurried businessman on the street. Whilean be a real use case to consider, the placese mobile devices are frequently used are muchdiverse. A recent survey (http://bkaprt.com/mf/32)d at where people used their smartphones and:

% use them at home,

% use them during miscellaneous downtimeghout the day,

% use them while waiting in lines or waiting for ntments,

% use them while shopping,

% use them at work,

% use them while watching TV (a different studys 84%), and

% use them during their commute.

act that 84% of people used their mobile device



me is telling. Catching a quick glance at your at home is perhaps a bigger part of the mobile

than our businessman on the go. What bothions have in common, though, is that we’rely to get someone’s full attention.

n reflecting on a lot of mobile usage patterns, I likeagine people as “one eyeball and one thumb.”humb because they are likely to be holding their e in one hand and using a single thumb to control

e eyeball because in many locations wheree devices are used we only have people’s partialtion.

re waiting in line and sneaking a peek at a sports; they have a baby on one arm and their mobile in

her; they are on a crowded subway on the way toor they are lounging on the couch with the TV

ng in the conStrAIntS 25

4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12

5: when people are reading saved articles oncomputer (http://bkaprt.com/

).

ground. Thinking “one eyeball, one thumb” forceso simplify mobile designs so they can berstood and used in these kinds of situations and

in distraction-free environments where focused

s possible, a simplified mobile experience goes away to making people feel comfortable anded.

people can technically use their computers atme, there are different periods of time during the

when different devices come out more often. Toate, the graph in fig 2.5 shows the number of es Read It Later users read each hour on their op and laptop computers. The number of readss more sharply until noon and then begins to falltil after work (6–9 p.m.).

econd graph shows the number of articles readhone users each hour (fig 2.6). There are four

r peaks: 6 a.m. (breakfast); 9 a.m. (the morningmute and start of workday); 5 p.m.–6 p.m. (end of ork day and the commute home); 8 p.m.–10 p.m.h time, prime time, bed time).

oBILE FIrSt

4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12

6: when people are reading saved articles onPhone (http://bkaprt.com/mf/33).

ly computer time is not mobile time. Nor is ittime. To further illustrate how different devices

mpact website or application usage, we can looken people are reading Read It Later articles onPad (fig 2.7). While there is a small spike in the

ng and steady use throughout the day, the bulk of reading happens in the evening—

d. I swear I’m just reading web design articles!

fferent devices often do come out at different.

me cases, it’s just a matter of proximity. What’sosest device I can use to get what I need done? Inother cases, though, it’s because different

es are better suited to specific types of tasks.becomes clear when you look at computer ande usage together in one chart (fig 2.8).





that sounds like something a corporaterPoint presentation would say, let me i llustrateea with a story.

NG THE TUBE

n I was last in London, I wanted to take in a fews.

ng been there before, I knew the Londonrground (or Tube) was the best way to move

nd, but I didn’t know where to find the stationsst to me. Solving this problem 30 MoBILE FIrSt

1: the transport for London website’s home pagey laptop only required a quick search thatped me off on the London Transport site (fig 3.1).

here, I easily found a link to the Tube map andd on a web page dedicated to “Maps” with a link

dard Tube Map.”

et me pause here for a moment and point out thatof web usability and information architecture bestces have been applied to the London Transportfig 3.2).

ear what’s a link, large images provide visualabout each section, and the links have even beentated with PDF icons and file sizes to let you knows behind them.

so sure they thought a lot about how to organizeAPABILItIES 31



2: Years of web design best practices at work onaps page.

oBILE FIrSt



3: the PdF of the tube map that ended my search.

us pages on the site and how people could moveeen them. So it wasn’t very hard for me to find the

nformation and access the PDF map of the Tube.3).

et’s contrast this experience of finding nearbystations on the desktop by doing the same thinga native mobile application called Nearest Tube.

est Tube uses a few mobile device capabilities toer a very different experience. In particular, it reliescess to a mobile’s location detection services,l compass (or magnetometer), video camera,

accelerometer.

ion detection finds your position on a map, al compass determines the direction you areg, and the video camera allows you to displayl information over your current field of view. Soxperience of finding the nearest Tube station

Nearest Tube consists of opening thecation and just looking at the screen (fig 3.4).

aid on your current view of the world are markersng to the Tube stations closest to you, the routes

cAPABILItIES 33





ing down

ing ahead

ing up

5: nearest tube provides different informationnding on how you position your mobile device.

WHAT’S IN THE BROWSER?

e we get ahead of ourselves, not everything thatest Tube has done in their native mobilecation is currently possible in all mobile websers. Half the capabilities we just saw usedion detection and device orientation) are mostly

able, while the other half (video camera andetometer) are mostly not available in smartphone

browsers at the time of this writing. So (as Ied out earlier) there are still reasons to buildriences natively. But if you consider the glass half ere are a lot of interesting new cAPABILItIES 35

bilities available in mobile web browsers, andare being added all the time.

so worth pointing out that the most importantrtunities come from people’s needs and not frompecific hardware features. Technical capabilitieselp us meet these needs in new and interesting but building things just because we can usually

n’t help our customers.

tion detection

e desktop, we can be about 99% sure we knowoun-try a visitor to our website is in. While that hases, i t doesn’t really give us much to work with.smartphones, on the other hand, have severalto detect someone’s location that can be

ssed from within the browser. Table 3.1

mbled by Rahul Nair) provides a quick overviewtechniques at our disposal.

cell towers can be used to locate a modernre phone, a device like the iPhone relies on WiFions two-thirds to three-quarters of the time ites itself. WiFi beacons (based on where WiFiots are located) work indoors, don’t use uponal battery life, and can find locations almostntly. GPS units have problems on all three fronts,ey have much higher location accuracy. Wheneed a foolproof location, GPS and cell towers arech surer bet.

on’t worry too much about these issues. The websers that provide location APIs will simply givehe most accurate location information they havethe device when you ask for it.

ion detection is a big deal because it allowse web experiences to use your currenteabouts to deliver relevant information like theest movie theater or restau-rant, local weather,

information, digital artifacts (like photos or

ments) left by others, and more. Your currenton can also be used to set smart defaults inh results or to customize actions or optionsd on where you are (fig 3.6–3.7).

oBILE FIrSt

Y

R

itional eff

ble





%

with

mobile de

nd cell tw

0m (bas

mo

RA

0m (bas

S,

y: 99%

6%

(impr

ty)

ty)

ty)

%

PS.

aer

us

diff

only rar

Pw

e





current location.

7: Glympse’s mobile web

rience allows you to see how far

someone is from you and how

t will take them to arrive.

oBILE FIrSt

8: Flipping the Android Gmail application tocape mode gives you more room to composeemail message.

e saw earlier, the presence of accurate locationmation can create new kinds of uses for your ce. Every other second, someone using Yelp on

her mobile device calls a local business. Peopleewing 20,000 homes an hour using Zillow one. The opportunities for services to takentage of location information are huge.

ce orientation/accelerometer

use of the size of desktop monitors and laptops,not prone to moving them around a whole lot.e devices are different. They fit in the palm of our so they can easily be pivoted, rotated, andd. Accelerometers let us know when thatens so our websites and applications cannd accordingly.

implest use of an accelerometer is to detecta mobile device has been turned to be viewed

ontally or vertically (http://bkaprt.com/mf/36). Thisbit of knowl-edge can be used to make small or atic changes to an application.



ABILItIES 39

9: tilt scrolling in Instapaper allows you to reades at your

pace without having to touch the

n.

ir native email application on Android, Google

advantage of this orientation change to givee more room to write when composing an email.device is flipped to horizontal mode, a wider textappears for the message and a “Done” buttonars on the right (fig 3.8).

out this design change, rotating this mobile deviceontally would have made typing an email harder.e would be less room and more text fields. Butad Google has provided people with more roomreby turning a potential limitation into a benefit.

erometers can also tell us the rate at which ae is moving in someone’s hand. This onebility can take a common task on the web andit easier and fun. Consider the act of reading an

e online: every day, millions of people skim thearagraph and perhaps scroll down using their e, or click on a scrollbar in their browser. Notmuch to innovate right?

again, though, we see the capabilities in mobilees outpacing what we can do on the desktop. For ple, 40 MoBILE FIrSt













t 2

W TO GO MOBILE

ear that mobile is an exciting new opportunity for of us. But if you’re coming from a desktop web

n background, how do you make the transition toning mobile web experiences? While a lot of your ng tools, experiences, and skills will still apply,probably want to start thinking a bit differentlyt organization, actions, inputs, and layout one.

next part, we’re going to dispense withucing the basic concepts behind web design andghlight where and why designing for mobile is

ent. So you can take what you already know andoing.

GANIZATION

iT comes To organizing the content and actionsobile, solid information architecture principles likelabeling, balanced breadth and depth, and

opriate mental models remain important. But thenization of mobile web experiences also needs to:

n with how people use their mobile devices and

phasize content over navigation.

vide relevant options for exploration and pivoting.

ntain clarity and focus.

N WITH MOBILE BEHAVIORS

previous part, we talked about the constraintsapabilities that make designing for mobilee. Similarly, the desktop web also has a set of tions and possibilities that make it distinct. Soy porting over what worked for you on the desktopbile often doesn’t make sense. Instead,nIZAtIon 49

eed to think about what mobile is uniquely goodd align it with the needs of your customers.

ng at this intersection at a high level can

nate how people are typically using their mobilees and why.

book Tapworthy, author Josh Clark focused oncritical mobile behaviors: micro-tasking, “I’m” and “I’m bored.” These align pretty well withle’s breakdown of mobile users into threevioral groups: urgent now, re-petitive now, andd now. Regardless of how you chose to label

behaviors, mobile usage generally consists of ae of interaction types:

kup/Find (urgent info, local): I need an answer tothing now—frequently related to my currenton in the world.

ore/Play (bored, local): I have some time to killust want a few idle time distractions.

ck In/Status (repeat/micro-tasking): Somethingrtant to me keeps changing or updating and I wanty on top of it.

/Create (urgent change/micro-tasking): I need toomething done now that can’t wait.

use they directly align with why people pull outmobile devices, these behaviors often determineyour mobile experience can be structured andnized to meet people’s needs. For example, the

photo sharing mobile web experience has four ry actions. Recent activity and uploads from your



cts let people check-in on what’s new with their s and photos; today’s interestingness and photosnearby give people a way to fill idle time by

ng at great pictures (fig 4.1).

arly, the Basecamp project management mobileexperience emphasizes the ability to check-in,and create new messages, to-dos, and more. people’s reasons for using Flickr andcamp are di fferent, both sites have thoughtgh how they’ll be used on mobile and adjustedorganization accordingly.

oBILE FIrSt

1: Both Flickr and Basecamp’s mobile webriences align with why people pull out their mobi lees.

ng with mobile behaviors also naturally alignswebsite with real-world needs. Since a mobilerience can be accessed anywhere andwhere, you need to think through how it can bel to people wherever they may be.

means lots of real-world use cases that groundsite’s organization in what people actually want to

ntly found a great example of this in action. Onobile in Higher Ed blog (http://bkaprt.com/mf/39),Olsen responded to an xkcd comic (fig 4.2) with:

was looking at the right side of the Venn diagram





3: ESPn and Youtube’s mobile web experiences

e focus on content instead of navigation.

is filled with timely content to check-in on (ESPN)opular time killers to explore (YouTube) (fig 4.3).

T AND EXPLORE

ait—if content always takes precedence over ation, how can I find my way around mobile webriences?

we need a way to navigate and discover what’sable? Of course, but allowing people to exploreivot to relevant content doesn’t have to meanof navigation bars that bury content.

xample, it’s great that Facebook puts relevant

nt I can frequently check-in on front and center inmobile web experience; but because of the threeation bars at the top of their pages, I can only seepdate on my screen.

Google Finance mobile web experience also hasant, timely content—but it’s sandwiched below fiveation orGAnIZAtIon 53



4: Facebook and Google Finance fill preciouse with lots of navigation options in their mobileexperience.

That’s a lot of precious screen space spent onation options people might not need—space thathave been devoted to useful content instead (fig

book recently redesigned their mobile webrience and actually reduced the number of



ation options (fig 4.5). If you don’t count the Top and Most Recent filters on their news feed, theye number of navigation choices in half (from ten toThat’s a pretty good start!

examples from YouTube and ESPN (fig 4.3) bothasize content over navigation, but they handle the

y to pivot and explore the rest of their site throughation differently. YouTube provides a shortcut to areen experience dedicated to getting around the

fig 4.6). This approach requires you to activelyout navigation options 54 MoBILE FIrSt

5: Facebook’s recent redesign cut down on theer of navigation

ns in their mobile web

rience.

6: Youtube’s mobile web experience includes aage of navigation options accessible from theer.

nIZAtIon 55







Gmail mobile web experience (fig 4.11), axtual menu of actions can be accessed from thef the screen. Because these actions are directlyd to the current email message being shown,g them at the bottom of a web page wouldn’t be

efficient. Instead, they are always present at thend thereby instantly accessible.

oBILE FIrSt

9: An anchor link in the Bagcheck header jumpso the site’s

ation menu at the bottom of the

.

TING BACK

ways interesting to see how design solutions

te across digital borders. For example, manye iPhone applications have prominent “back” linksir navigation header (fig 4.12). Apple’s mobilees lack a physical back button and don’t displayystem chrome actions for native apps.

he presence of a “back” button in the header hascessarily migrated to mobile web experiences.devices (Android, Blackberry, Windows Phone

.) have physical back buttons (fig 4.13). Evene’s mobile web browser includes a prominentcontrol in the application toolbar (fig 4.14).ng another back button in your mobilenIZAtIon 59





10: contextual navigation

s on the Bagcheck mobi le web

rience allow people to explore

d content.

11: contextual actions in the Gmail mobile webrience allow people to quickly act on their email.

oBILE FIrSt



12: the “back” button is a

mon feature in native iPhone

cations.

13: Android devices feature a hardware backn on the device.

14: Apple’s mobile web browser has aanent back button in the

m toolbar.

nIZAtIon 61

15: Yahoo! Mail’s mobile web

rience uses a navigation menu

to the bottom of the browser









site.

ucing the amount of navigation choices andme on key tasks maintains clarity and focus onpeople need to accomplish—helpful when theyurried or in less than ideal situations.

when they do have some relaxing time on theh with their mobile, people will still appreciate thecity of your design!

ng your mobile web experience organized willpeople find their way around; but once they findthey’re looking for, they need to act on it. Next,ook at how they can do just that.

oBILE FIrStTIONSwhen screens are small and used in our s, touch screens make a lot of sense. Theyntially turn the entire mobile device (not just thead or trackball) into an interactive surface. As a, touch is being integrated into more and moree devices each day. Looking at the percent-agekia’s smartphones that support touch illustratestory very well (fig 5.1).

some of these devices have hardware inputols like trackpads, trackwheels, and keyboards,uch that increasingly manages people’sctions with the web on mobile. So how can we

re everyone is able to interact with our sites using? Designing the right affordances and controls for

-based user interfaces requires:

uring that touch targets are appropriately sizedpositioned.

ng familiar with common touch gestures and howmap to people’s objectives.

nS 67

JECTED

ad

ty Only

h

es QUERTY + Touch

1: nokia’s smartphones illustrate the transition toin mobile devices. (Source: nokia.)

ering the loss of hover-based interactions.

king sure we don’t forget about indirectpulation along the way.

MALL BY GOING BIG

ot uncommon for web designers to respond toer mobile devices by shrinking things down into fit them on screen. After all, there’s less roomrk with, so smaller is better, right? Despite thedness of this reasoning, you actually want to moveopposite direction and make things bigger—even bigger than you’re naturally comfortable with.2).

an fingers are imprecise pointing instruments:ack the pixel-level accuracy of a mouse pointer;come in different sizes; and it’s not uncommon for to slip or move around as we interact with our es. Bigger actions mean bigger touch targets that





3: Microsoft’s windows Phone 7

target guidelines.

target itself should fall in this range, but the visualsentation of the action can be 50–100% of thel touch target size. The image from Microsoft (figlustrates the use of padding or margins to ensurets are the right size without having every visiblenterface element appear the same.

soft’s guidelines also do a nice job of specifyingtouch targets may need to be bigger than 9mm: if

UI element is frequently touched; the result of aerror is se-vere or really frustrating; the UI

ent is located toward the edge of the screen or ult to hit; or when the UI element is part of aential task—like using the dial pad,” (http://

rt.com/mf/44; PDF).

n it comes to what we touch on mobile, bigger isrally better. Ensuring actions are appropriatelyand spaced apart can avoid serious usabilitys as well—not 70 MoBILE FIrSt



4: Quora’s login screen places

el” and “Login” much too close

uch-target comfort.

ccidental slips of the finger. Take a close look atobile login screen of Q&A site Quora ( fig 5.4).e any potential problems?

s right, in this case poorly sized and spacedns (remember 2mm between touch targets!) the difference between logging in and canceling

’s advanced search screen is another example of

too close to touch comfortably (fig 5.5). The sizepacing between each search option couldtely benefit from “bigger is better.”

RE DO WE TOUCH?

n talking about the placement of navigationols earlier, I mentioned that actions toward them of the device naturally align with how peopleand use their mobiles.

there’s a bi t more to i t than that. Where youct to find primary actions on a touch-screene often depends oPtIonS 71

5: Flickr’s Advanced Search

ns are too close together and too

to tap accurately.

hich fingers (thumb or index) you are using for ng and if you are right or left-handed.

the majority of people are right-handed (about0%) and use their thumbs while operating a











9: Yahoo! Mail’s mobile web experience allowse to use touch gestures to reveal mail actionsull down to expose search. Because there are no

e affordances for these gestures, they introducee to them in an overview up front.

10: twitter’s mobile web experience allowse to use the drag (down) gesture to refresh the

n.

n you do, try to align with natural gestures (thosemon to us in our daily lives) in order to aidvery. A recent study across nine differentries found very few cultural differences in theres people attempted to use for oPtIonS 77





12: Placing your mouse cursor over a book’s titlearnes & noble’s website brings up a pop-upow

ust a bit more info.

of actions and options (fig 5.12). Unlike clicks,rs are usually not explicit actions.

over menus on the web have also become dump-rounds for actions not deemed important enoughon the screen but still important enough to revealver.

that amounts to a miscellaneous bin of optionseally don’t have a place as primary controls on an. These hovers won’t be missed when you makeansition to mobile.

obile, your options for on-hover menus are: onn, on tap/swipe, on a separate screen, or (myte) gone for good.

creen

t’s in a hover is important enough, taking actionsnformation out of on-hover menus and placingdirectly on the screen could be the right

oach. This is the solution Twitter used on their al mobile web experience.

e desktop, placing your mouse over a messagewitter reveals several important actions: Favorite,eet, and Reply (fig 5.13).

er thought these actions were important enoughn their mobile web experience, they placed themly on the screen (fig 5.14).

nS 79











s high time we stop thinking of input as somethingoid and instead think of mobile as an incrediblertunity for getting lots of diverse input from people.

e devices are with us all the time. So whenever or ever inspiration strikes we can speak our mind,, or just contribute online. Capabilities likeon detection, device orientation, audio, videoras, and more, give us new ways to provide inputon’t require lots of typing with imprecise fingers.

importantly, though, we need to stop assumingeople won’t do things just because they are onmobile devices. After all, someone bought a000 plane using eBay’s iPhone app//bkaprt.com/mf/48, http://bkaprt.com/

)! Once we come to terms with the fact thate input should be welcomed and encouraged, wetart talking about how to design for it.

oBILE FIrSt

ILE ASKS

we ask people for their input goes a long wayd determining the kind of answers we’ll get. Oneb, most questions are asked through forms, anduse labels to ask for what they need. Form

s on mobile, however, come with their own set of raints and capabilities that determine how theyd be designed.

ens on mobile are small and web forms need tot.

st cases, there isn’t room for left-aligned or right-ed labels because there isn’t enough room for twomns on a mobile device’s display. Instead, top-ed labels work best; not only do they optimize for n real estate and accommodate longer labels

y, they also stay visible when a virtual keyboard isnt and taking up half of the room available onn.

er’s mobile sign-up form (fig 6.1) uses top aligneds to ask questions and includes supporting textw the input field for clarification and additionals. Both of these elements remain visible when a

l keyboard is present.

while we’re on the subject of Twitter, did you know6% of new Twitter users in a five-month periodg 2010

d up through mobile (http://bkaprt.com/mf/25)?40%

tweets come from a mobile device//bkaprt.com/

)? Still don’t think input on mobile matters?

gh top-aligned labels work well within the tightraints of mobile screens, labels inside input fields

work even better. As proof, just about every native

e application platform supports labels within inputand uses them in their default applications. Oneb, however, implementing labels within fieldsres some work.

gh labels within input fields seem great on thece, there are some challenges to overcome. Awithin an input field:

uld never become part of someone’s answer.seems simple enough but still happens quiteently when things haven’t been loaded or aren’td correctly.

S 87





2: Mailchimp’s mobile sign-in form illustratesof the challenges with labels inside input fields.

attribute placeholder which, according to theis intended for tips, not labels.) After an answer een provided, the difference in color between theer (“lukew”) and the next label (“password”) is justtle shade of gray.

er of these two issues are likely to be a very bigem in such a simple form. But as forms getr, problems stem-ming from these issues can get

worse.

e are, however, ways to mitigate things so thats within input fields work better. The mobile sign-





L

kbox

t type=" checkbox"> radio button

t type=" radio"> password field

t type=" password"> dropdown lists

ct><option>...

cker

t type=" file"> submit button

t type=" submit"> plain text

t type=" text"> Table 6.1: Standard input typese web when displayed at a larger “zoomed” sizeng it hard for people to read through their options.6).

n displayed within a custom control, lengthy selects also don’t get the full screen height available.

ad, people are forced to find the option they areng for by scrolling within a smaller window. On ae like the iPhone, you can only see four to fivens at once.

the content within one of your select menus isto stretch the vertical or horizontal limits of aard select control, you’re probably better off witharate page on mobile that allows people to pick

ption they need from a full-screen list.

may also opt to leave select menus behind when ae touch control can get the job done faster andr.

urns out, select menus are pretty tap-intensive:e menu once to open it, swipe the list that showsfind the answer you want to select, tap it, and thenone or close to go back to the form. That’s four just in case you weren’t counting). So it’s not hard

e that when a form uses several select menus (figthe taps can quickly add up.

S 91



4: the iPhone’s mobile

ser uses a touch-

ized (swipe-able, big

targets) control for

ard select menus.

5: Android’s mobile

browser also optimizes

t menus for touch.

y, we can be a lot more tap-efficient with a fewm controls designed specifically for touch-basedaces.

ad of using select menus to set the number of s and rooms, the travel site Kayak (fig 6.8) usesnner control.

nput only requires a single tap to adjust (just hit” or “-”) and works well for questions that have arange of 92 MoBILE FIrSt





vings go a long way.

k also uses a custom control for their date picker.

ad of the three select menus American Airlinesfor date selection (fig 6.7), the date picker onk’s mobile web experience uses appropriatelytouch targets that allow people to tap between

hs and select the days they want to travel (fig 6.9).again, saving people from a bunch of

cessary tapping around.

oBILE FIrSt

9: Kayak’s date picker makes use of opriately sized touch targets.

decide to use custom input controls in your e web experience to make things more efficientuch screens, don’t forget about non-touch andd devices.

sure your controls can be used through indirectpulation (trackballs, trackpads, etc.) by specifyingorder within the web form and setting :focus andr states.

new standards

er to implement custom input controls we need tocustom code. But mobile web browsers areng extremely fast and elements that currentlyre a procedural solution may soon only need to bered in markup (http://

rt.com/mf/53). In fact, there are a number of rative solutions that can make input easier one today.

tarters, several new HTML5 input types can helpe accurately answer questions that require afic format.

mobile browser like Safari, specifying an input of

url brings up a virtual alphanumeric keyboard with and “.com” keys. Specifying an input of typebrings up InPutS 95





plain text inputs on mobile can be made easier gh the use of input attributes, including:

ocapi talize: Turn this off on email, password, URL,ther case-sensitive fields; turn it on for proper

s like names and locations.

ocorrect: Turn this off on email, password, URL,ther non-alphabetical inputs; turn it on for text and free-form inputs; trim trailing spaces in

s that might come from auto-correction features.

again, browsers that don’t support theseutes will simply ignore them so there is no harm inding them in your designs. Where they do work,ver, people will thank you after the answer they

n’t eradicated by an over-zealous auto-correcting

S 97

11: A basic input mask—in this, case a specificformat—in action.

KING THE HARD STUFF

fying input types and attributes can help peopleobile provide accurate answers without a lot of But we can do even better by taking advantageut masks.

masks can help make complex inputsageable on mobile by providing clear input cuesont and restricting people’s inputs so they don’t

mistakes.

mobile operating systems have built in supportput masks so it’s not uncommon to find theme native mobile applications. In the browser,ver, a lot of the heavy lifting required to makemasks possible falls on us and JavaScript. As a, it’s useful to know what makes a good inputwork.

most basic form an input mask can ensure that aner is entered in a valid format. To illustrate, let’sne we need someone to provide his or her email

ess at me.com.

an use an input mask to “mask” or cover over ng that isn’t part of the format we require. In this

the email address we collect has to end ine.com” so we can mask any characters that areed after the “@” to make sure a me.com emailess is provided.

an see this in action in fig 6.11. As someones to enter an email address, the “@me.com”n of the input remains visible. If any charactersntered after the “@” they are ignored. This notcuts down on errors, i t also 98 MoBILE FIrSt





est “___-___-____” as it feels more like aion than an answer.) But as soon as you enter theumber, this format disappears, and twotheses surround your input. That’s unexpected.

u continue, the formatting required by this inputgradually reveals itself as numbers are entered.

n you’re done, the final answer uses parentheses,ce, and one dash—not at all what was promisednt.

commonly understood question like a phoneber, this might not be a big deal. But as a generalnput masks that stick to the expectations they setnt are easier to manage than ones that decide to

ually reveal themselves or show up after the fact.we want input masks to make things easier one, not more confusing.

MoBILE FIrSt



14: the original Boingo “Get online” form had fiverate screens. here are just three of them.

NG OUT THE OPTIONS

labels and input fields are the building blocks of , they ultimately need to come together as a

ersation between organizations and their mers. In other words, we need to layout the inputasking for appropriately. At a high-level, thereree input scenarios we have to consider: a

ence of related questions, non-linear updates,n-context inputs for immediate responses.

uential set of inputs is a group of questions thatto be asked together in order to complete a task.

most common examples online are registrationheckout forms. But anything that requires people

ovide answers to a set of questions before theyccomplish their goal (of InPutS 101



15: My quick redesign of the Boingo form cuts down to a single screen that lets people gete fast.

ng up, buying something, etc.) counts as aential set of inputs.

the label and input field best practices wessed in this chapter can go a long way toward



ng sequential forms easier to complete one, the quantity of information you require peopleout is likely to have the most direct impact. Thequestions you ask, the better.

pare the original Boingo “Get Online” form (fig102 MoBILE FIrSt

16: Editing your profile on Bagcheck uses ag window for each input.

my redesign (fig 6.15) to see just how much cant when you aim to be concise. When it comes toe forms, be brutally efficient and trim, trim, trim.

e don’t always need people to answer a bunch of uestions at once. There are many situationse only some inputs (in a bigger set) need to beted or adjusted. In these si tuations, exposing inputfor every possible answer makes it hard to find

ne or two inputs you need to adjust—especially onmobile screens.

r non-linear input updates a different kind of t makes sense. For example, editing your profile

mation on Bagcheck is a rare occurrence andg every part of your profile is rarer still. As a, the “Edit Profile” screen lists available inputsheir current answers but doesn’t expose all thefields for these answers by default. Instead, eachble input can be tapped and edited in a dialogow (to set focus and pop-up the virtual keyboard



diately) or on a separate screen (fig 6.16).

S 103

17: An in-context comment form on Quora’se web experience.

n designing single input screen or dialogs, makeyou take the height of virtual keyboards intount (usually half the screen height). It’s best if theand actions are visible while the keyboard isnt so people can see their answers and options.

but not least, in-context inputs provide a way for e to quickly contribute or create without a lot of An in-context input shows up directly inline wheree can contribute and usually only consists of a

e input field. For example, Quora allows you toment directly on an answer without leaving thent screen (fig 6.17); this enables immediatebutions and aligns well with the quick ways

e often use their mobile devices.

OND FORMS AND INPUT FIELDS

y’s mobile devices are full of capabilities that takeyond the input field. Location detection, devicetation, audio input, video input, near field

munications, and 104 MoBILE FIrSt



18: one tap access to your current location onk and twitter means no typing is required.

can be used to allow people to participate andbute without typing into a form.

ustrate, let’s look at location detection. Whenng a hotel on Kayak, you can enter a locationthe keyboard, or you can use your current

on by tapping the icon to the right of the inputSimilarly, Twitter allows you to append a locationur post with a single tap (fig 6.18). No typingred.

e other side of the spectrum, Google Gogglesthe video camera on a mobile device to identify

ucts, wines, works of art, and landmarks; to scansiness cards; or to translate foreign languages.19). Imagine all the typing you’d have to do in ato accomplish what Google Goggles does whenmply point your camera at something.

near field communications (NFC) can take thisfurther. Mobile devices that can communicateadio frequency ID tags (RFID) just need to besomething that broadcasts its identity using one

se tiny “digital bar-codes” in order to interact withnt to learn more about a InPutS 105





that we’ve tackled inputs, actions, andnization on mobile, we need to address the varietyvices where all these elements will live. Whichs us to our next chapter: layout.

S 107

OUTappropriaTe adapTaTions of how we thinkt organization, actions, and input on the desktopwhat we know about web design and make ite on mobile. But how do we ensure it’s alsoe across the wide range of mobile devices

able now and in the coming months—not toon years?

me to terms with the fact that mobile is going to

ge at a breakneck pace for the foreseeable future.

mobile browsers know you are creating designst them.

lexible, fluid, and responsive in your layouts.

w where to sketch the lines between deviceriences.

uce to the minimum amount necessary.

MoBILE FIrSt

ONLY CONSTANT IS CHANGE

g the time I’ve been thinking about and writingook, the mobi le industry has changedatically several times. Mobile platform leadersbeen unseated. Devices with new capabilitiesonstraints have been released. New partnerships

een device manufacturers, mobile platformors, and network carriers have been announced.

ome to mobile where the only thing you can countchange. Because things are currently in anuous state of flux, I’ve focused this book onn principles for mobile device trends that haveholding steady for quite a while: more powerfulssors, faster networks, touch-screen interfaces,etter web browsers. Despite my best attempts to

you mobile design principles that will endure,ge is coming.

hat’s a web designer to do—get swept up in af constant instability? Quite the opposite.use things continue to be so Wild West out there,eed to be a cowboy.

risks, try new things, and accept that not all thed-ary lines between devices, browsers, and thehave been drawn yet.

that in mind, let’s saddle up and talk about how tod up the diversity of devices out there with mobilet skills. (And I promise that’s it for the Old Westgy.) YOU’RE HERE FOR THEM

aps the most important thing we can do to createive mobile layouts is to let mobile web browserswe’ve taken the time to design for them. While I

sed not to get into code, knowing about the metaport tag is really useful for designing mobile webriences.

a name="viewport" content="width=device-"> To quote Peter-Paul Koch, who has writtent viewports and mobi le development extensively//bkaprt.com/

):

ut 109

ally the layout viewport takes a width that theor has decided is optimal for viewing desktop









it

d Y

sign in action on the 3200

.4

MoBILE FIrSt



5: though the netflix experiences on thetation3, iPhone, and iPad are built using theweb technologies, the user interface is designedch unique device experience.

ut 115

have to be dramatic, but they don’t have to bee either (fig 7.4). As a different resolution breakis passed, the layout adapts to make the bestf the space available to it.

single web page can adapt to a large variety of n sizes using responsive web design. But screensn’t the only difference between devices.

CE EXPERIENCES

ces are different not just because they haveent technical capabilities and limitations, butuse people use them differently as well. Consider

fferences between connected TVs,ops/laptops, tablets, smartphones, and featurees. Each of these device experiences has ae:

mmon user posture: 10 foot lean-back experiencee couch, long periods of use at a desk, casualh or bed use, or quick bursts of activity in variousons throughout the day.

mary input method: remote/gestures,e/keyboard, touch/sensors, keypads.

rage display size: wall-sized, desk-sized, lap-, palm-sized, or smaller still.







sers are not substitutes for the real thing.

u can’t get your hands on a few mobi le devices,over to a local mobile device shop and look at

mobile web experience on their floor models.

otype, prototype, prototype. The sooner a mobileexperience is in your hands, the faster you’ll knoworks in the real world.

ast but not least, don’t be afraid to start small.e of the biggest successes in mobile today camesmall experi-ments and teams of passionate webners and developers.

don’t need to know everything about mobile—just

what you do know and go.MoBILE FIrSt

THANKS

g a book, no matter how small, is a bigrtaking.

kfully I got a lot of help along the way. Jeffreyman, Eric Meyer, and the entire An Event Apartgave me the chance to talk Mobile First for theme at their wonderful web conference. There, andwhere else I presented my Mobile First ideas, Ived invaluable feedback and questions thatd shape and refine what’s in this book.

detailed feedback and many big ideas camemy esteemed set of technical reviewers: BryanStephanie Rieger, Jason Grigsby, Craig Villamor,

Paul Koch, Josh Clark, and a little bit of Ethanotte (that went a long way).

ning is just as vital to creating a book as writing,hese were the people I spent a lot of time listeninger the past few years.

n it came time to actually turn ideas into words, theok Apart team made it easy. My editor Mandyn, copyeditor Krista Stevens, designer ordinaire Jason Santa Maria, and ringmaster y Zeldman were an absolute joy to work with.

of this, though, would be possible without the

ess support of my wife Amanda. With our newgirl, two-year old son, my start-up, and my non-ravel sched-ule, she somehow believed I was noty out of my mind when I decided to write a bookell. Perhaps she was the only one, which is whyook is lovingly dedicated to her.

owLEd GEMEntS 121

OURCES

data, please

an Stanley’s Mobile Internet Report was a hugee of supporting facts and information for me. It’swith hundreds of slides with data about thest trends in mobile (http://bkaprt.com/mf/58).

Meeker was the primary author of the Mobileet Report and has gone on to publish more of her ngs in her new role at Kleiner Perkins//bkaprt.com/

).

ngoing mobile market information and data, keepth Horace Dediu’s articles and pointers onco (http://

rt.com/mf/60).

publish design-related data points about mobileuting and more every Monday on my blog



//bkaprt.com/

).

le first development

this book doesn’t dig into mobile first webopment, others have.

n and Stephanie Rieger’s write-up about theruc-tion of their si te, Yiibu, outlines how they

oached markup, style sheets, and contentopment (http://bkaprt.com/

).

n Marcotte’s Responsive Web Design book

es how flexible grids, flexible images, and mediaes can be used to adapt web site layouts acrossdevices (http://bkaprt.com/

Cloud Four blog is fi lled with many great articlest the intersection of mobile devices and the web/

rt.com/mf/63).

MoBILE FIrSt

great debates

ything in technology and design gets debated and

e is no different. Here are a few summaries of of the thornier issues still being discussed.

e mobile applications vs. mobile web solutions:does each one make sense and why

//bkaprt.com/mf/64, http://bkaprt.com/mf/65)?

we really understand and design for mobilext?

n Grigsby sums up the issues and provides linksny pertinent articles (http://bkaprt.com/mf/66).

ast but not least: separate mobile web pages or nsive web design? It depends, says Josh Clarksum-mary of the issue (http://bkaprt.com/mf/67).

urcES 123

ERENCES

ened URLs are numbered sequentially; thed long URLs are listed below for reference.







apter 1

://www.smartonline.com/smarton-ucts/smarton-mobile/

tphones-pass-pc-sales-for-the-first-time-in-y/

p://articles.businessinsider.com/2011-02-ch/29983706_1_tablet-market-pcs-smartphones

www.comscore.com/Press_Events/Press_releases/2011/1/web-d_Email_Shows_Signs_of_decline_in_the_u.S._while_Mobile_Email_

e_on_the_rise

://news.bango.com/2010/02/16/600-percent-h-in-mobile-web-usage/

://mobithinking.com/mobile-marketing-latest-mobile-stats 9www.morganstanley.com/institutional/techresearch/pdfs/MS_

omy_Internet_trends_102009_FInAL.pdf

p://www.mediapost.com/publications/?ticles.showArticle&art_

20590

tp://www.lukew.com/ff/entry.asp?1361


tp://techcrunch.com/2010/12/13/google-mobile-hes-grew-130-percent-in-q3/

tp://www.mobiadnews.com/?p=5133

tp://www.youtube.com/watch?v=8aaotVJQcg0

tp://en.wikipedia.org/wiki/t9_(predictive_text) 17www.cisco.com/en/uS/solutions/collateral/ns341/ns525/ns537/

5/ns827/white_paper_c11-520862.html

www.comscore.com/Press_Events/Press_releases/2010/3/

book_and_twitter_Access_via_Mobile_Browser_Grows_by_triple-

MoBILE FIrSt

newsroom.cisco.com/dlls/ekits/cisco_VnI_Global_Mobile_data_

c_Forecast_2010_2015.pdf

tp://www.gartner.com/it/page.jsp?id=1466313

tp://blog.admob.com/2008/12/18/impact-of-new-andsets-storm-rising/

tp://officialblog.yelp.com/2011/02/via-yelp-mobile-rs-call-a-local-business-every-other-second.html


tp://www.cloudfour.com/links-do-not-open-appstp://blog.twitter.com/2010/09/evolving-ystem.html 26 http://danzarrella.com/new-data-on-e-facebook-posting.html 27www.facebook.com/press/info.php?statistics 28joehewitt.com/post/ipad/





apter 2

tps://developer.mozilla.org/en/canvas_tutorial 30www.html5rocks.com/en/tutorials/appcache/beginner/

googleresearch.blogspot.com/2009/06/speed-rs.html 32blog.compete.com/2010/03/12/smartphone-rs-a-ready-and-willing-audience/

tp://readitlaterlist.com/blog/2011/01/is-mobile-ing-when-we-read/






apter 3

tp://itunes.apple.com/us/app/nearest-d322436683?mt=8

p://stackoverflow.com/questions/1649086/detect-on-of-android-phone-in-the-browser-with-cript

tp://mail.glustech.com/SnowGlobe/

tp://thenextweb.com/apps/2010/12/21/hidden--mobile-feature-reveals-augmented-reality-bility/





apter 4

tp://www.dmolsen.com/mobile-in-higher-11/02/07/the-university-home-page-mobile-first/

p://xkcd.com/773/

rEncES 125









camp 50–52, 89–90

berry 13, 16, 59

ooth 43

go 101–102

tt, Joe 17

an, Rachel 27

r 78–83, 95

L5 24, 88–89, 95, 97, 116

as 24

P requests 23

, Josh 50

ower 37

o 12

3 24, 110, 112

e sprites 23

masks 98–100

types 90–91, 95–97

paper 40–41

traffic 10–11

26, 75, 115

e experiences 116–117

ne 10–11, 13, 16–17, 26, 36, 42, 62,

e width 110

2, 110, 115

Into HTML5 96

5, 19, 61–63, 73

g 27–28

Human Interface Guidelines 69

MoBILE FIrSt

aMini 13

73

15

Script 23, 57, 110, 113

Steve 10

ora 9

al 9



k 38, 92, 94–95, 105

rmance 22–24

Peter-Paul 97, 109–110

m, Mark 96

density 110–111

tation 115

s 87–89

on (when using mobile devices)

6

a 71, 104

on detection 33, 36–39

on Underground 30–35

h, Kevin 2

frequency ID (RFID) 44, 105–106

R 9

It Later 26–29

Chimp 88–89

arch in Motion (RIM) 13, 16

etometer 33–34

nsive web design 112-117

otte, Ethan 113

a queries 110, 113

viewport tag 109–110

soft 15, 24, 69–70

sung 15

Touch Lab 69

midt, Eric 2

e in Higher Ed 51

n size 18–22

e Web Design and Development 86

t menus 91–92

rola 9

rlight 16

ch a Search 43

t defaults 36, 94

9, 13, 14



110–111

eling 27–28

Rahul 36

globe 41–42

e mobile applications 14–16

hwest Airlines 19–21

al user interface (NUI) 75–76

er control 92, 94

ation 52–59, 62–64

m 13

est Tube 33–35

Field Communications (NFC) 44,

106

x 115–116

0

s One 110

orthy 50

a 27, 67, 69

26–28

42–43

gestures 73–76

see London Underground

ctive C 15

er 16, 28, 63–64, 77, 79–80,

n, Dave 50

8, 105

eyeball and one thumb” 25–26,

8, 86

x 129

tu 69

on 13

mor, Craig 73

om Bamboo 73

OS 19, 73

Works 16

36–37

Dan 73

ows Phone 7 15, 59





uct Officer (CPO) of Bagcheck

//bagcheck.com/) which was

red by Twitter, Inc., just nine

hs after being launched pub-

Prior to this, Luke was an

preneur in Residence (EIR) at

hmark Capital and the Chief

gn Architect (VP) at Yahoo! Inc.

e he worked on product align-

and forward-thinking integrated customer riences on the web, mobile, TV, and beyond.

is the author of two popular web design books—

Form Design (Rosenfeld Media, 2008) and Site-ng: A Visual Approach to Web Usability (Wiley,)—and many articles about digital product designtrategy. He is also a top-rated speaker atrences and companies around the world, and aunder and former Board member of the

action Design Association (IxDA).

ously, Luke was the Lead User Interfacegner of eBay Inc.’s platform team, where he ledrategic design of new consumer products (such

Bay Express and Kijiji) and internal tools andsses. He also founded LukeW

on & Design (http://www.lukew.com/), a productgy and design consultancy; taught graduateace design courses at the University of Illinois;worked as a Senior Interface Designer at thenal Center for Supercomputing ApplicationsA), the birthplace of the first popular graphical

browser, NCSA Mosaic.

Date post:	06-Apr-2018
Category:	Documents
Upload:	eliezer-malo-cavazos
View:	216 times
Download:	0 times

Mobile First Converted

Documents