Successfully reported this slideshow.
Your SlideShare is downloading. ×

Designing for Touch... and Beyond - Josh Clark

Ad

josh clark
@globalmoxie
http://bit.ly/touch-wkshop
designing for
TOUCH

Ad

SCIENCE!
Friends, that’s what we’re here for.
To study the storied science of web design.
Part of the process is realizing...

Ad

There is no
one true input
for the web.
There is no one true INPUT for the web.
In other words: the web is not just for th...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 390 Ad
1 of 390 Ad

More Related Content

Similar to Designing for Touch... and Beyond - Josh Clark (20)

More from Uniq UI: Usability, UX, and UI design, consulting and training (20)

Designing for Touch... and Beyond - Josh Clark

  1. 1. josh clark @globalmoxie http://bit.ly/touch-wkshop designing for TOUCH
  2. 2. SCIENCE! Friends, that’s what we’re here for. To study the storied science of web design. Part of the process is realizing, every so often, that we’ve been doing SOMETHING wrong all along. That’s the nature of science and discovery: Periodic realizations that our assumptions need a tweak. A flash of insight that we’ve been understanding things naively. 10 years ago: web standards. We have to separate content from presentation. 3 years ago: responsive design. The web isn’t about one screen size. THERE IS NO ONE TRUE OUTPUT FOR THE WEB. There’s a new shift brewing. And it’s this realization.
  3. 3. There is no one true input for the web. There is no one true INPUT for the web. In other words: the web is not just for the mouse. Responsive: we have to anticipate a variety of displays. New wrinkle: we have to anticipate a variety of inputs, too. Like most truths, this one’s been staring us in the face all along. The web has always been device agnostic. It embraces: text-only devices. Screen readers. Speech is coming on strong, Natural gesture, too. LOTS of different inputs coming our way. But the big input-related design transition that we’re confronting now... and really we started confronting five years ago with mobile... is touch. Because right now, hands and fingers are coming to life on our interfaces...
  4. 4. no, it’s okay. TOUCH THAT As advertised, this talk is about designing for touch. We’ve been dealing with touch on smartphones, and tablets are coming on strong. So sure, I’ll talk about guidelines for designing on phones and tablets. But perhaps more important, I’ll also talk about designing for touch on the desktop. [next] Because friends, touch has erupted on the desktop, in just the last few months And that has some thorny implications for responsive design. ULTIMATELY, IT MEANS THIS: All desktop web designs have to be touch-friendly. [repeat] But first...let’s begin at the beginning: With the basics, with first principles. [twitter]31% of US adults own a tablet. Up from 12% a year ago, and basically zero 3 yrs ago. http:// j.mp/Xgyspe[/twitter] Jan 2013: http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
  5. 5. PIXELS ARE THE BUILDING BLOCK I have an ugly truth for you, friends. To date, we’ve thought about web design as a visual pursuit. A feat of visual design, of information design.
  6. 6. So we naturally approach our work in visual terms, we think in pixels. But when you add touch to the mix... [next] we go beyond the visual... and to the physical. Easy big guy. Easy.
  7. 7. So we naturally approach our work in visual terms, we think in pixels. But when you add touch to the mix... [next] we go beyond the visual... and to the physical. Easy big guy. Easy.
  8. 8. It’s not only how your pixels LOOK but how they FEEL It’s not just how your pixels look. But how they feel. How do your pixels feel in the hand? The very nature of our job is changing. [twitter]Designing for touch means: it’s not just how your pixels LOOK… but how they FEEL in the hand.[/twitter]
  9. 9. where is TOUCH? We’ve been dealing with phones
  10. 10. In fact, 31% of US adults own a tablet now. THIRTY ONE! A THIRD! Was only 12% a year ago. Basically zero three years ago. The iPad is the fastest growing consumer product in the history of consumer products. Amazing. Touch is already a huge mainstream input. So before diving into details of touch design, want to talk about how these tablets are used. And who uses them. We call this mobile. But really it’s portable. Use the phone on the way to the coffee shop, but we use this AT the coffee shop. Almost always used in settled environments. iPad has very different mindsets because it’s in much more settled environments.
  11. 11. 10% of US adults own a tablet DECEMBER 2011 iPad came out in March 2010. At the beginning of december in 2011. but look what happened the next month. And here’s where we stand as of January 2014. That’s up 8% from 34% in September 2013. For households making over $75k USD, it’s 65%. http://www.pewinternet.org/Reports/2012/E-readers-and-tablets.aspx?src=prc-headline http://www.emarketer.com/Article.aspx?R=1009106 http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx http://pewinternet.org/Reports/2014/E-Reading-Update/Tablet-and-Ereader-Ownership/Half-of-American-adults-now-own- a-tablet-or-ereader.aspx
  12. 12. JANUARY 2012 19% of US adults own a tablet iPad came out in March 2010. At the beginning of december in 2011. but look what happened the next month. And here’s where we stand as of January 2014. That’s up 8% from 34% in September 2013. For households making over $75k USD, it’s 65%. http://www.pewinternet.org/Reports/2012/E-readers-and-tablets.aspx?src=prc-headline http://www.emarketer.com/Article.aspx?R=1009106 http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx http://pewinternet.org/Reports/2014/E-Reading-Update/Tablet-and-Ereader-Ownership/Half-of-American-adults-now-own- a-tablet-or-ereader.aspx
  13. 13. 42% of US adults own a tablet JANUARY 2014 iPad came out in March 2010. At the beginning of december in 2011. but look what happened the next month. And here’s where we stand as of January 2014. That’s up 8% from 34% in September 2013. For households making over $75k USD, it’s 65%. http://www.pewinternet.org/Reports/2012/E-readers-and-tablets.aspx?src=prc-headline http://www.emarketer.com/Article.aspx?R=1009106 http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx http://pewinternet.org/Reports/2014/E-Reading-Update/Tablet-and-Ereader-Ownership/Half-of-American-adults-now-own- a-tablet-or-ereader.aspx
  14. 14. September 2012 http://www.asymco.com/wp-content/uploads/2012/08/Screen-Shot-2012-08-20-at-8-20-12.45.17-PM.png More iPads in two years than Macs in 25 years. Already talked about how many phones we’re selling. In Q3 2011, one out of every three Apple iOS devices sold during the last quarter was an iPad. 14 million iPads versus 26.9 million iPhones. As you can see from the curve, it’s actually getting steeper. Accelerating growth.
  15. 15. Who Owns What? Smartphone eReader Tablet 18% 20% 19% 26% 16% 2% 30% 21% 14% 18% 10% 7% 19% 18% 17% 22% 13% 11% 13-17 18-24 35-44 24-34 45-44 55+ Flattened out since a year ago, seeing big adoption at the older end. Was the more traditional 24-34 male. http://blog.nielsen.com/nielsenwire/online_mobile/changing-demographics-of-tablet-and-ereader-owners-in-the-us/ August 2011
  16. 16. Age distribution 13-17 18-24 25-34 35-54 55+ 17% 24% 26% 14% 19% 7% 21% 33% 21% 18% Smartphone Tablet The last chart showed what percent of each age group owned these devices. This one looks at actual users and shows the distribution of age. That is what percent of smartphone and tablet users are a certain age. As you’d expect from last graph, see flatter distribution for tablets. But here’s the point I want to make... http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Differences September 2011
  17. 17. Age distribution 13-17 18-24 25-34 35-54 55+ 17% 24% 26% 14% 19% 7% 21% 33% 21% 18% Smartphone Tablet Nearly 3/4 of smartphone users are 34 years of age or younger. [pause] http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Differences September 2011
  18. 18. Age distribution 13-17 18-24 25-34 35-54 55+ 17% 24% 26% 14% 19% 7% 21% 33% 21% 18% Smartphone Tablet But 2/3 of tablet users are 25 or older. These are grown-up, mainstream users. Not the typical early adopter. http://blog.flurry.com/bid/90987/The-Truth-About-Cats-and-Dogs-Smartphone-vs-Tablet-Usage-Differences September 2011
  19. 19. 49% of tablet owners are women Compared to 50% for smartphones and 58% for ereaders. Evening out. This number was in mid 30s a year earlier. My point here is that tablets are BIG. Not toys, not curiosities. They don’t yet have the install base of smartphones, but growing MUCH faster. And in a more mainstream demographic. http://www.pewinternet.org/Infographics/2012/A-Snapshot-of-Ereader-and-Tablet-Owners.aspx
  20. 20. You’re not “just” a visual designer. That means you’re not just a visual designer anymore.
  21. 21. You’re an industrial designer. You’re also an industrial designer. Or at least your job now includes aspects of industrial design, the art of crafting a physical thing. Because when you design a touchscreen interface, you have real, honest ergonomics to consider.
  22. 22. In a very real sense, you’re designing a physical device. Not literally. Virtual, flickering liquid crystals But because they’re explored by human hands— unlike desktop experiences to date— you’re designing how hands interact
  23. 23. Been dealing with this on mobile for 5 years. Phones and tablets confront us with a blank slate. Invite us to impose our own interface, ANY INTERFACE. Because that interface requires touch, defines device in very physical way. Soldering circuit boards, molding plastic, diecast Real ergonomics: Again how does it feel in your hand? But to know that, you have to know how someone will HOLD it in the hand. Basically three ways to hold a phone. [next] Steven Hoober did a field study, observed over 1300 people in the street tapping away at their phones. Big plurality, nearly half, were tapping with one hand, with their thumb. We switch between these grips often, very contextual. The most popular though is that one-handed grip. Gives us freedom to use the other hand. To write, to hold coffee, to juggle a baby. But I want to pause to look at that middle one, too, where we hold the phone in one hand and jab with the other.
  24. 24. 49% 36% 15% http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php Been dealing with this on mobile for 5 years. Phones and tablets confront us with a blank slate. Invite us to impose our own interface, ANY INTERFACE. Because that interface requires touch, defines device in very physical way. Soldering circuit boards, molding plastic, diecast Real ergonomics: Again how does it feel in your hand? But to know that, you have to know how someone will HOLD it in the hand. Basically three ways to hold a phone. [next] Steven Hoober did a field study, observed over 1300 people in the street tapping away at their phones. Big plurality, nearly half, were tapping with one hand, with their thumb. We switch between these grips often, very contextual. The most popular though is that one-handed grip. Gives us freedom to use the other hand. To write, to hold coffee, to juggle a baby. But I want to pause to look at that middle one, too, where we hold the phone in one hand and jab with the other.
  25. 25. This picture shows a finger doing the tapping. Turns out that most of the time, when we use this hold and stab posture, it’s not actually the finger that does the work.
  26. 26. Instead, Steven observed: 72% of the time people use the cradle grip, WE USE OUR THUMB.
  27. 27. 75% of phone interactions Add it up, and that means 75% of our phone interactions are these two grips. Three quarters of the time, WE TAP THE SCREEN WITH ONE THUMB. We often talk about how we’re designing for fingers...
  28. 28. All thumbs. In reality, we’re designing for thumbs. As we’ll see, that truth cuts across other device types, too. Thumbs are awesome. But they have their limits.
  29. 29. And this is it: the thumb-tapping hot zone. Comfort zone for thumb when held in right hand. Bottom of the screen opposite side of the thumb— left side for the right thumb— where tapping is easiest, where thumb naturally rests Obviously thumb can reach anywhere onscreen, but this is most comfortable zone.
  30. 30. Important implications: That’s why iOS puts primary controls at bottom. Turns desktop convention on its head LEFT VS RIGHT Steven’s study found that two-thirds of the time, we tap the screen with the right hand. But very fluid about which hand we use. More important bit is top vs bottom. And look what’s NOT in the thumb zone: edit button.
  31. 31. Common pattern, though, is also to put a primary action up there. Post a new message always there in the top right of Twitter app.
  32. 32. You see a similar approach in the Foursquare app. Foursquare puts the checkin button in top right corner. Still the same idea -- put this data-changing button out of harm’s way.
  33. 33. More recently, moved the checkin bottom to middle. Hide navigation options. Single primary action in single primary area.
  34. 34. Instagram puts primary action -- add photo -- in the middle and highlights it. Been talking about this in terms of thumb comfort, where your hand naturally falls on the screen. But not only a thumb comfort issue. Fingers obscure view. This brings up an age-old principle of industrial design. Content at top, controls at bottom.
  35. 35. Here are a few examples. Feet at bottom, scale at top.
  36. 36. Dial at bottom, display at top. Controls below, content above. Design to keep fingers out of way of content. Hands, feet, fingers at bottom make room for display at top. Meat on the bottom, content on top.
  37. 37. Isn’t that right little professor?
  38. 38. Design to keep fingers out of way of content. Hands, feet, fingers at bottom to make room for display at top. Consider this a cardinal rule: put controls below content. That’s what you see in iOS. But it all depends on who gets there first. So the story changes a little bit for Android.
  39. 39. Complicated by the presence of system buttons on the bottom. IThey’re doing the right thing: controls below content. The trouble is, where do you put YOUR app controls. The operating system beat you to the bottom of the screen. Do you stack them on top like you see here? Always bad to stack controls in touch devices —invites errors and mistaps— but it’s worst to do it at screen bottom.
  40. 40. Here’s the older version of Android—Gingerbread—that runs on most phones right now. Hardware buttons at bottom. There, the general guidelines was and remains: PUT APP NAVIGATION AT TOP, so it doesn’t interfere with those system buttons. Trouble is that this necessarily means that you’re covering the content when you go to tap that button. Take a look at the same legacy version of the Foursquare app in iPhone...
  41. 41. Navigation bar back on the bottom. And at top right: “check in” which affects data, safely tucked away at top right. Available but out of danger of mistap.
  42. 42. Got to move it to the top to get out of the way of the menu button at bottom. Android has a *lot* happening at the bottom of the screen. Ergonomically and visually better to have main controls at bottom, but Android already has lots there. This is changing in Android 4, Ice Cream Sandwich... This style of tab is going away, and so is the option menu. This is what we get instead...
  43. 43. Got to move it to the top to get out of the way of the menu button at bottom. Android has a *lot* happening at the bottom of the screen. Ergonomically and visually better to have main controls at bottom, but Android already has lots there. This is changing in Android 4, Ice Cream Sandwich... This style of tab is going away, and so is the option menu. This is what we get instead...
  44. 44. The recommended default navigation for newer versions of Android, Ice Cream Sandwich and Jelly Bean, uses the ACTION BAR pattern shown here. Again, at screen top. All to avoid that stacked navigation at screen bottom. So that’s Android.
  45. 45. And the web? Turns out the story changes yet again for touch on the web for phones and small screens. 3 problems pinning a navigation toolbar to either top or bottom. 1st is that you would normally use position:fixed to do that. Really pretty buggy. It doesn’t work at all on some browsers, other browsers it’s implemented poorly. So you have a technical challenge of just getting your navigation bar to sit still on top or bottom of the page.
  46. 46. Second, you start to choke out the content. Barney’s mobile website. Logo and toolbar are fixed on screen. Looks okay in portrait, even though over 1/3 of screen is browser chrome, logo, and toolbar. [next: scroll] so you’re giving up a lot of real estate that you could give to content. But much worse when you flip to landscape, barely a sliver of content peeks through. It’s barely a Blahnik! And worse, try to scroll by swiping on that fixed toolbar, and you can’t. doesn’t respond. all the interaction AND content is limited to that tiny strip. ---- The screen already has browser chrome. Fixing your own navigation tools on screen makes it worse. Nobody comes to your website to use your awesome navigation controls. Get them out of the way, FEATURE THE CONTENT.
  47. 47. 3rd problem is also related to browser chrome. In iOS, Safari has a fixed toolbar at screen bottom. Not all browsers do—Android doesn’t—but in this case, putting a toolbar on the bottom here would create that stacked toolbar problem. So three strikes against putting controls anywhere permanent on the page. Instead, this is my favorite pattern for small screens.
  48. 48. 3rd problem is also related to browser chrome. In iOS, Safari has a fixed toolbar at screen bottom. Not all browsers do—Android doesn’t—but in this case, putting a toolbar on the bottom here would create that stacked toolbar problem. So three strikes against putting controls anywhere permanent on the page. Instead, this is my favorite pattern for small screens.
  49. 49. PHONE GUIDELINES iOS apps Controls at screen bottom Android apps Controls at screen top Web Controls at page bottom Started with very simple concept: Content at top, controls at bottom. But it turns out, environment matters. Who gets there first. And as a result, you get three different rules for these different platforms.
  50. 50. millimeters SEVEN BUT HOW BIG, Josh? When we’re designing for touch, how big should touch targets be? 7mm, about ¼” Spread of fingertip as contact point on screen. Size of target that finger can reliably hit
  51. 51. missed taps 25% 20% 15% 10% 5% target size 3mm 5mm 7mm 9mm 11mm 1 in 30 (3%) missed taps 1 in 100 (1%) 1 in 200 (0.5%) http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx Microsoft did some research for Windows—for both desktop and phones— and found very consistent results. So 7mm pretty good for everyday, 9mm if you’re being super-cautious. I don’t know about you. For me, mm isn’t exactly my standard css unit. So how do we specify this size? Well maybe standards can help us out here. [twitter]How big should touch targets be? Microsoft study: 7mm good, 9mm to be safe. http://j.mp/ UzDGfZ[/twitter] http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
  52. 52. css 2.1 1 pixel = 1/96 inch 7mm = 26.457 pixels 30pixels Starting with CSS 2.1, pixel measurements don’t refer to dots on the screen but an actual physical distance. 1 pixel = 1/96 inch, like the old 96dpi monitors. Let’s round it up, call it 30 pixels. Done, right? Unfortunately, no. It SHOULD be 30 pixels, if all was neat and clean in the world. This doesn’t factor in the practical reality of dynamic viewports. You know these from your phones and tablets. This is the magic that lets you see a full-width website on a tiny screen. Pinching and zooming.
  53. 53. css 2.1 1 pixel = 1/96 inch 7mm = 26.457 pixels Starting with CSS 2.1, pixel measurements don’t refer to dots on the screen but an actual physical distance. 1 pixel = 1/96 inch, like the old 96dpi monitors. Let’s round it up, call it 30 pixels. Done, right? Unfortunately, no. It SHOULD be 30 pixels, if all was neat and clean in the world. This doesn’t factor in the practical reality of dynamic viewports. You know these from your phones and tablets. This is the magic that lets you see a full-width website on a tiny screen. Pinching and zooming.
  54. 54. css 2.1 1 pixel = 1/96 inch 7mm = 26.457 pixels Dynamic ViewportsStarting with CSS 2.1, pixel measurements don’t refer to dots on the screen but an actual physical distance. 1 pixel = 1/96 inch, like the old 96dpi monitors. Let’s round it up, call it 30 pixels. Done, right? Unfortunately, no. It SHOULD be 30 pixels, if all was neat and clean in the world. This doesn’t factor in the practical reality of dynamic viewports. You know these from your phones and tablets. This is the magic that lets you see a full-width website on a tiny screen. Pinching and zooming.
  55. 55. Launch the NYTimes and you get this. Where’s my 96 dpi pixel now? This is 972 pixels, but it sure doesn’t look like like 10” here. Squeezed into less than 3”. And that’s a good thing—the only way I can see the whole site. From there, I can zoom in to read it and it’s suddenly, much larger. Or this [next] or this or this. There’s seemingly no “true” size for this thing. By design, dynamic viewports destroy the very idea of mapping a pixel to a fixed physical size. But all is not lost. Devices do still report their device width. That’s basically their native, “true” size. These are the numbers our media queries hook onto. [twitter]CSS standard says pixel is 1/96 inch (96 dpi), but dynamic viewports mean it’s rarely the case. Vexing viewports: http://j.mp/WSj7vt[/twitter]
  56. 56. 320pixels iPhones for example, report their device width as 320 pixels. That means that, unless you specifically say the page should be wider, your designs will default to a 320 pixels wide on an iPhone. This has nothing to do with how many physical pixels are actually on the screen. Unrelated to retina display. These are called virtual pixels. Call them web pixels if you like. Here, iPhone says, it has a device width of 320 web pixels across in portrait. Even if, in practice, a retina iPhone has 640 hardware pixels across. [next] On iOS, that fixes a web pixel at around 160 dpi, not 96 as CSS spec suggests. Apple popularized this approach to the dynamic viewport, and most platforms and devices have followed suit with similar dpi numbers. So. Going with Apple’s recommended touch target turns out to do the trick in most cases. Forget about the “proper” 30 pixels we calculated earlier.
  57. 57. <meta name="viewport" content="width=device-width" /> Add this tag to the <head> tag of a page—and you should—sets the viewport to match the device width. So whatever the width of the device, that will be the width of your webpage.
  58. 58. 320pixels On iPhone, again, that will be 320 web pixels. So it turns out that, on individual devices at least, web pixels do have a fixed width, assuming you set the viewport to the device width. It’s just that it’s almost never the 96dpi size that the web specification says it should be. Apple’s decision to set the iPhone device width to 320px... [next] ...made iPhone’s web pixels 160dpi, and that choice impacted all the mobile browsers that followed. On iOS, that fixes a web pixel at around 160 dpi, not 96 as CSS spec suggests. Apple popularized this approach to the dynamic viewport, and most platforms and devices have followed suit with similar dpi numbers. So. Going with Apple’s recommended touch target turns out to do the trick in most cases. Forget about the “proper” 30 pixels we calculated earlier.
  59. 59. 160dpi On iPhone, again, that will be 320 web pixels. So it turns out that, on individual devices at least, web pixels do have a fixed width, assuming you set the viewport to the device width. It’s just that it’s almost never the 96dpi size that the web specification says it should be. Apple’s decision to set the iPhone device width to 320px... [next] ...made iPhone’s web pixels 160dpi, and that choice impacted all the mobile browsers that followed. On iOS, that fixes a web pixel at around 160 dpi, not 96 as CSS spec suggests. Apple popularized this approach to the dynamic viewport, and most platforms and devices have followed suit with similar dpi numbers. So. Going with Apple’s recommended touch target turns out to do the trick in most cases. Forget about the “proper” 30 pixels we calculated earlier.
  60. 60. 44pixels Boom. Forty-four pixels, friends: that’s the new hotness. 7mm in most touch browsers. Now. Most of us don’t work in pixels any more.
  61. 61. 2.75ems Boom. Based on the 16-pixel default size, 2.75 ems should give you a good touch target. [twitter]For the web, 44px is a sturdy minimum size for touch targets, or 2.75 ems.[/twitter]
  62. 62. 44 Compromise necessary sometimes. Have to get all the letters of the keyboard on the screen. Squeeze to 29 width. In iOS, 44 number is not just a guideline, but it’s actually cooked everywhere into the operating system.
  63. 63. 44 29x As long as one dimension is at least 44, can squeeze other to 29. Practical minimum for tap targets: 44x29 or 29x44.
  64. 64. 44 44 44 Again, though, 44 appears everywhere. Nav bar, height of rows in standard list view, tool bar.
  65. 65. 88 88 Home screen grid doubles up to 88. Idea is that organizing in multiples of 44 multiples of finger’s touch surface, app not only looks right but literally feels right Design to a 44 pixels rhythm. Gives you easy, to read, easy to touch interface. How cool is this! All elements sized exactly in proportion to your finger print.