Designing for Touch, A Book Apart

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="google-site-verification" content="9ex0_Z0xQO5TbWWWG_YdS_AOVUveCyat58PnkSv7E3o" /> <title>Designing for Touch, A Book Apart</title> <link href="../cdn/shop/t/4/assets/2019-screen.scss%EF%B9%96v=60548189626548252431720553516.css" rel="stylesheet" type="text/css" media="all" /> <link rel="preload" href="../cdn/shop/t/4/assets/TitlingGothicFBCondensedRegular-subset%EF%B9%96v=144323233704978956321589824711.woff2" as="font" type="font/woff2"> <link rel="preload" href="../cdn/shop/t/4/assets/TitlingGothicFBSkylineRegular-subset%EF%B9%96v=82076782130832495991589824635.woff2" as="font" type="font/woff2"> <link rel="preload" href="../cdn/shop/t/4/assets/AdelleSans-Regular-subset%EF%B9%96v=170044181468326467751589824607.woff2" as="font" type="font/woff2"> <link rel="alternate" title="A Book Apart: Press Room RSS Feed" type="application/rss+xml" href="https://feeds.feedburner.com/a-book-apart"> <link rel="shortcut icon" href="../cdn/shop/t/4/assets/favicon%EF%B9%96v=90145869007515973581537450570.ico" type="image/x-icon"> <link rel="apple-touch-icon" sizes="57x57" href="../cdn/shop/t/4/assets/apple-touch-icon-57x57%EF%B9%96v=65803350735019661971537450561.png"> <link rel="apple-touch-icon" sizes="60x60" href="../cdn/shop/t/4/assets/apple-touch-icon-60x60%EF%B9%96v=150262060825672676901537450561.png"> <link rel="apple-touch-icon" sizes="72x72" href="../cdn/shop/t/4/assets/apple-touch-icon-72x72%EF%B9%96v=147896007713647014101537450561.png"> <link rel="apple-touch-icon" sizes="76x76" href="../cdn/shop/t/4/assets/apple-touch-icon-76x76%EF%B9%96v=44952889816077047171537450561.png"> <link rel="apple-touch-icon" sizes="114x114" href="../cdn/shop/t/4/assets/apple-touch-icon-114x114%EF%B9%96v=115119225902024552321537450560.png"> <link rel="apple-touch-icon" sizes="120x120" href="../cdn/shop/t/4/assets/apple-touch-icon-120x120%EF%B9%96v=102068666138980899281537450560.png"> <link rel="apple-touch-icon" sizes="144x144" href="../cdn/shop/t/4/assets/apple-touch-icon-144x144%EF%B9%96v=135072051314031706611537450560.png"> <link rel="apple-touch-icon" sizes="152x152" href="../cdn/shop/t/4/assets/apple-touch-icon-152x152%EF%B9%96v=57942616554089397631537450561.png"> <link rel="apple-touch-icon" sizes="180x180" href="../cdn/shop/t/4/assets/apple-touch-icon-180x180%EF%B9%96v=64316675395298681401537450561.png"> <link rel="icon" type="image/png" href="../cdn/shop/t/4/assets/android-chrome-192x192%EF%B9%96v=119341456129549094591537450560.png" sizes="192x192"> <link rel="me" href="https://front-end.social/@abookapart"> <meta name="description" content="Get the know-how to design for interfaces that let you touch鈥攕tretch, crumple, drag, flick鈥攊nformation itself."> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@abookapart" /> <meta name="twitter:title" content="Designing for Touch by Josh Clark" /> <meta name="twitter:description" content="Get the know-how to design for interfaces that let you touch鈥攕tretch, crumple, drag, flick鈥攊nformation itself." /> <meta name="twitter:image" content="http://abookapart.com/cdn/shop/products/aba-000014-pp-1_large.jpg" /> <meta property="og:title" content="Designing for Touch by Josh Clark" /> <meta property="og:description" content="Get the know-how to design for interfaces that let you touch鈥攕tretch, crumple, drag, flick鈥攊nformation itself." /> <meta property="og:site_name" content="A Book Apart" /> <meta property="og:image" content="http://abookapart.com/cdn/shop/products/aba-000014-pp-1_large.jpg" /> <script src='../cdn/shop/t/4/assets/jquery-3.3.1.min%EF%B9%96v=61395414644828968241561739218.js' type='text/javascript'></script> <style>.site-nav { background-color: #35827f; } .logo-tagline, a, .feature-title, .product-out-of-stock-notify em, .product-header__edition { color: #35827f; } #announcement { border-bottom-color: #35827f; } </style> <script> // Picture element HTML5 shiv document.createElement( "picture" ); </script> <script src="../cdn/shop/t/4/assets/picturefill%EF%B9%96v=131268525102640775091537450576.js" async></script> <link rel="canonical" href="designing-for-touch.html"> </head> <body id="product"> <header role="banner"> <a class='branding' href='/'> <picture class="branding__logo"> <source media="(max-width: 599px)" srcset="../cdn/shop/t/4/assets/aba-icon%EF%B9%96v=99583976875288395861537450559.svg" type="image/svg+xml"> <source srcset="../cdn/shop/t/4/assets/aba-logo-2%EF%B9%96v=5628627351356293221537450559.svg" type="image/svg+xml"> <img srcset="../cdn/shop/t/4/assets/aba-logo%EF%B9%96v=14272058534771725271537450560.png" alt="A Book Apart"> </picture> <div class="branding__wordmark">A Book Apart</div> </a> <div class="site-nav"> <nav class='site-nav__primary'> <ul> <li id='nav-store'> <a href='/products/'>Shop</a> </li> <li id='nav-press'> <a href='/blogs/press/'>Blog</a> </li> <li id='nav-about'> <a href='../pages/about/'>About</a> </li> </ul> </nav> <nav class='site-nav__secondary'> <ul> <li id='nav-twitter' class="site-nav__social"> <a href='http://twitter.com/abookapart' class="site-nav__link--icon"> <svg viewBox="0 0 15 12" width="15" height="12" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M15 1.42a6.32 6.32 0 0 1-1.53 1.57v.4c0 4-3.09 8.61-8.75 8.61A8.77 8.77 0 0 1 0 10.77c.24.03.49.05.73.05 1.44 0 2.78-.61 3.82-1.44a3.06 3.06 0 0 1-2.87-2.1 3.25 3.25 0 0 0 1.4-.05A3.04 3.04 0 0 1 .6 4.26v-.04c.41.22.88.36 1.39.38A3 3 0 0 1 .62 2.09c0-.57.16-1.03.42-1.47a8.8 8.8 0 0 0 6.34 3.1 3.04 3.04 0 0 1 3-3.73c.89.01 1.69.39 2.26.97.7-.14 1.35-.4 1.94-.74-.22.7-.7 1.3-1.35 1.68A6.16 6.16 0 0 0 15 1.42z"/></svg> </a> </li> <li id='nav-instagram' class="site-nav__social"> <a href='http://instagram.com/abookapart' class="site-nav__link--icon"> <svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M8 0c2.17 0 2.45.01 3.3.05.85.04 1.43.17 1.94.37.53.2.97.48 1.42.92.44.45.72.9.92 1.42.2.5.33 1.09.37 1.94.04.85.05 1.13.05 3.3s-.01 2.45-.05 3.3a5.87 5.87 0 0 1-.37 1.94c-.2.53-.48.97-.92 1.42-.45.44-.9.72-1.42.92-.5.2-1.09.33-1.94.37-.85.04-1.13.05-3.3.05a56.3 56.3 0 0 1-3.3-.05 5.85 5.85 0 0 1-1.94-.37c-.53-.2-.97-.48-1.42-.92a3.9 3.9 0 0 1-.92-1.42c-.2-.5-.33-1.09-.37-1.94C0 10.45 0 10.17 0 8s.01-2.45.05-3.3c.04-.85.17-1.43.37-1.94.2-.53.48-.97.92-1.42.45-.44.9-.72 1.42-.92.5-.2 1.09-.33 1.94-.37C5.55 0 5.83 0 8 0m5.23 3.73a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0M8 3.89a4.1 4.1 0 1 0 0 8.22 4.1 4.1 0 0 0 0-8.22m0 6.78a2.67 2.67 0 1 1 0-5.34 2.67 2.67 0 0 1 0 5.34"/></svg> </a> </li>  <li id='nav-help'> <a href='/pages/help/'>Help</a> </li> <li id='nav-login'> <a href='/pages/help/#access_account'>Sign In</a> </li> </ul> </nav> <a id='nav-cart' class='shopping-cart' href='https://abookapart.com/pages/about' title='View Cart'> <span class='shopping-cart__count'>0</span> <svg class='shopping-cart__icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 20"><circle cx="11.55" cy="18.23" r="1.77"/><circle cx="20.02" cy="18.23" r="1.77"/><path d="M22.1 13.24H9.77L5.5.6C5.4.26 5.05 0 4.67 0H.9C.4 0 0 .4 0 .9s.4.9.9.9H4l4.26 12.63c.12.37.47.6.85.6h13c.5 0 .9-.4.9-.9s-.4-.9-.9-.9zm1.94-9.83L8.74 2.1c-.48-.04-.75.3-.6.77l2.67 7.94c.18.47.7.85 1.2.85h11.17c.5 0 .95-.4 1-.9l.68-6.35c.05-.5-.3-.95-.8-1z"/></svg> <span class='shopping-cart__text'>Cart</span> </a> </div> </header> <main id="main"> <head> <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Book", "name": "Designing for Touch", "url": "https://abookapart.com/products/designing-for-touch", "author": { "@type": "Person", "name": "Josh Clark", "sameAs": "https://bigmedium.com/" } , "datePublished": "2015-10-28", "inLanguage": "English", "isbn": "978-1-952616-41-9", "numberOfPages": "169", "publisher": { "type": "Organization", "name": "A Book Apart", "sameAs": [ "https://abookapart.com/", "https://www.instagram.com/abookapart/", "https://linktr.ee/abookapart", "https://twitter.com/abookapart" ] }, "genre": "Web Design" } </script> <div class="product-header"> <img src="../cdn/shop/products/aba-000014-pp-1_660x@2x.progressive%EF%B9%96v=1482333929.jpg" class="product-header__media" alt=""> <div class="container container--alt"> <div class="product-header__main"> <h1 class='product-header__header'> <span class='product-header__author'>Josh Clark</span> <span class='product-header__title'>Designing for Touch</span> </h1> <h2 class="product-header__byline">foreword by <span class='product-header__foreword'>Brad Frost</span></h2> <div class="product-header__description">Get the know-how to design for interfaces that let you touch鈥攕tretch, crumple, drag, flick鈥攊nformation itself.</div> </div> </div> </div> <style>@media (min-width: 660px) { .product-header { background-image: url(../cdn/shop/products/aba-000014-pp-1_769x@2x.progressive%EF%B9%96v=1482333929.jpg); } } @media (min-width: 769px) { .product-header { background-image: url(../cdn/shop/products/aba-000014-pp-1_960x@2x.progressive%EF%B9%96v=1482333929.jpg); } } @media (min-width: 960px) { .product-header { background-image: url(../cdn/shop/products/aba-000014-pp-1_1100x@2x.progressive%EF%B9%96v=1482333929.jpg); } } @media (min-width: 660px) { .product-header { background-color: #2f7471; } } </style> <div class="product-details"> <div class="product-purchase"> <h2 class="section__title section__title--small section__title--flush">Get this book</h2> <div class="product-vendors"> <p>Please reach out to <a href="#author">this book鈥檚 author</a> to inquire about availability.</p>  <p class="vendor-note">A Book Apart no longer sells or distributes books.</p> </div> </div> <div class="product-info"> <section class="product-description text text--large-staggered"> <section class="product-foreword subsection"><p>Touch introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark guides you through the touchscreen frontier. Learn about ergonomic demands (and rules of thumb), layout and sizing for all gadgets, an emerging gestural toolkit, and tactics to speed up interactions and keep gestures discoverable. Get the know-how to design for interfaces that let you touch—stretch, crumple, drag, flick—information itself. It’s in your hands.</p></section> </section> <section class="product-topics"> <h2 class="section__title section__title--small">Topics Covered</h2> <div class="product-topics__text text text--med"> <ul><li>A Physical Interface</li><li>The Unreliable Screen</li><li>Faster Fingers</li><li>Gestures</li><li>Discovery</li></ul> </div> </section> </div> </div> <section class="product-quotes section--brown"> <div class="product-quote-target" id="quote-1"></div> <div class="product-quote-target" id="quote-2"></div> <div class="product-quote-target" id="quote-3"></div> <div class="product-quote-target" id="quote-4"></div> <ul class="product-quote-nav"> <li><a href="#quote-1">Quote 1</a></li> <li><a href="#quote-2">Quote 2</a></li> <li><a href="#quote-3">Quote 3</a></li> <li><a href="#quote-4">Quote 4</a></li> </ul> <div class="product-quotes__wrap"> <div class="product-quote section section--flush-bottom"> <div class="product-quote__inner"> <blockquote class="container container--narrow"> <div class="product-quote__quote text"><p class="product-review-quote">Device guru Josh’s <em>Designing for Touch</em> is the in-depth guide designers have waited for, to help them truly understand the subtle dance between human touch and programmed interface.</p></div> <cite class="product-quote__cite"> <a href='http://carladiana.com/blog/'> <div class="product-quote__person"><span>Carla Diana</span></div> <div class="product-quote__bio">Designer-futurist and lecturer at the University of Pennsylvania</div> </a> </cite> </blockquote> <a href='#quote-4' class="product-quote__btn product-quote__btn--prev"><span>Previous</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> <a href='#quote-2' class="product-quote__btn product-quote__btn--next"><span>Next</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> </div> </div> <div class="product-quote section section--flush-bottom"> <div class="product-quote__inner"> <blockquote class="container container--narrow"> <div class="product-quote__quote text"><p class="product-review-quote">In this excellent book, Josh keeps it practical: offering rationale behind the guidelines, and curating the info at a level that doesn’t bog down or intimidate.</p></div> <cite class="product-quote__cite"> <a href='https://www.billbuxton.com/'> <div class="product-quote__person"><span>Bill Buxton</span></div> <div class="product-quote__bio">Principal researcher with Microsoft Research</div> </a> </cite> </blockquote> <a href='#quote-1' class="product-quote__btn product-quote__btn--prev"><span>Previous</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> <a href='#quote-3' class="product-quote__btn product-quote__btn--next"><span>Next</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> </div> </div> <div class="product-quote section section--flush-bottom"> <div class="product-quote__inner"> <blockquote class="container container--narrow"> <div class="product-quote__quote text"><p class="product-review-quote">A magnificent book and a welcome breath of fresh air. It has intelligent design principles, an overall refreshing philosophy for touch and gesture, and excellent examples and illustrations.</p></div> <cite class="product-quote__cite"> <a href='https://jnd.org/'> <div class="product-quote__person"><span>Don Norman</span></div> <div class="product-quote__bio">Director of DesignLab at UC San Diego and author of <em>The Design of Everyday Things</em></div> </a> </cite> </blockquote> <a href='#quote-2' class="product-quote__btn product-quote__btn--prev"><span>Previous</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> <a href='#quote-4' class="product-quote__btn product-quote__btn--next"><span>Next</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> </div> </div> <div class="product-quote section section--flush-bottom"> <div class="product-quote__inner"> <blockquote class="container container--narrow"> <div class="product-quote__quote text"><p class="product-review-quote">Touchscreens create a fresh physical interface to digital systems—are you ready? Josh offers not only guidance but also inspiration for building new, more intuitive ways to interact with information.</p></div> <cite class="product-quote__cite"> <a href='https://twitter.com/hinman'> <div class="product-quote__person"><span>Rachel Hinman</span></div> <div class="product-quote__bio">Author of <em>The Mobile Frontier</em></div> </a> </cite> </blockquote> <a href='#quote-3' class="product-quote__btn product-quote__btn--prev"><span>Previous</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> <a href='#quote-1' class="product-quote__btn product-quote__btn--next"><span>Next</span><svg viewBox="0 0 16 15" width="16" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M15.4 7.3V7L7.7 0a.6.6 0 0 0-.8 1l6.3 5.8H1a.6.6 0 0 0 0 1.2h12.2L7 14a.6.6 0 1 0 .8 1l7.5-7a.7.7 0 0 0 .2-.3.6.6 0 0 0 0-.3z"/></svg></a> </div> </div> </div> </section> <section class="section section--flush-bottom product-author"> <div class="container"> <div class="grid"> <div class="grid__item small--c-1of3"> <img class="product-author__photo" src="https://abookapart.com/cdn/shop/t/4/assets/author-josh-clark-1608310626313.jpg" alt="Josh Clark"> </div> <div class="grid__item small--c-2of3"> <h2 class="section__title section__title--small" id="author">About the Author</h2> <div class="product-author__bio text text--med"> <p><a href="http://globalmoxie.com/"><strong>Josh Clark</strong></a> is the founder of <a href="https://bigmedium.com/">Big Medium</a>, a design agency specializing in connected devices, mobile experiences, and responsive web design for the world’s most forward-thinking companies. Josh has written four other books, including <a href="http://shop.oreilly.com/product/0636920001133.do"><em>Tapworthy: Designing Great iPhone Apps</em></a> (O’Reilly, 2010), and he speaks around the globe on what’s next for digital interfaces. In 1996, Josh created an entirely different kind of user interface: the Couch-to-5K (C25K) running schedule, which has helped millions of skeptical exercisers take up jogging. (His motto is the same for fitness as it is for software user experience: no pain, no pain.)</p> </div> </div> </div> </div> </section><section class="section section--flush-bottom"> <div class="container"> <div class="product-spec"> <div class="grid"> <div class="grid__item medium--c-1of3"> <h2 class="section__title section__title--small">Product Details</h2> <div class="product-spec__specs text"> <ul> <li><strong>ISBN:</strong> 978-1-952616-41-9</li> <li><strong>Paperback:</strong> 169 pages</li> <li><strong>Published:</strong> Oct 28, 2015</li> <li><strong>Also available in:</strong> <a href="http://www.editions-eyrolles.com/Livre/9782212143911/design-tactile">French</a></li> </ul> </div> </div> <div class="grid__item medium--c-1of6 product-spec__badge-box"> <h2 class="feature__badge feature__badge--inline product-spec__badge">Part of<br>a Pack!</h2> </div> <div class="pack-grid pack-grid--alt grid__item small--c-1of2 medium--c-1of4"> <a class='pack-grid__item' href='/collections/bulk-partners'> <div class="pack-grid__images"> <img class="pack-grid__image" src="../cdn/shop/products/aba-cover-44_48x%EF%B9%96v=1677444687.png" srcset="../cdn/shop/products/aba-cover-44_48x%EF%B9%96v=1677444687.png 48w, ../cdn/shop/products/aba-cover-44_34x@3x%EF%B9%96v=1677444687.png 102w, ../cdn/shop/products/aba-cover-44_48x@3x%EF%B9%96v=1677444687.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="Immersive Content and Usability" loading="lazy"> <img class="pack-grid__image" src="../cdn/shop/products/aba-cover-43_48x%EF%B9%96v=1666635531.png" srcset="../cdn/shop/products/aba-cover-43_48x%EF%B9%96v=1666635531.png 48w, ../cdn/shop/products/aba-cover-43_34x@3x%EF%B9%96v=1666635531.png 102w, ../cdn/shop/products/aba-cover-43_48x@3x%EF%B9%96v=1666635531.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="The Business of UX Writing" loading="lazy"> <img class="pack-grid__image" src="../cdn/shop/products/aba-cover-42_48x%EF%B9%96v=1660142571.png" srcset="../cdn/shop/products/aba-cover-42_48x%EF%B9%96v=1660142571.png 48w, ../cdn/shop/products/aba-cover-42_34x@3x%EF%B9%96v=1660142571.png 102w, ../cdn/shop/products/aba-cover-42_48x@3x%EF%B9%96v=1660142571.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="Inclusive Design Communities" loading="lazy"> <img class="pack-grid__image" src="../cdn/shop/products/aba-cover-41_48x%EF%B9%96v=1644089034.png" srcset="../cdn/shop/products/aba-cover-41_48x%EF%B9%96v=1644089034.png 48w, ../cdn/shop/products/aba-cover-41_34x@3x%EF%B9%96v=1644089034.png 102w, ../cdn/shop/products/aba-cover-41_48x@3x%EF%B9%96v=1644089034.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="Leading Content Design" loading="lazy"> <img class="pack-grid__image" src="../cdn/shop/products/aba-cover-40_48x%EF%B9%96v=1639007990.png" srcset="../cdn/shop/products/aba-cover-40_48x%EF%B9%96v=1639007990.png 48w, ../cdn/shop/products/aba-cover-40_34x@3x%EF%B9%96v=1639007990.png 102w, ../cdn/shop/products/aba-cover-40_48x@3x%EF%B9%96v=1639007990.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="You Should Write a Book" loading="lazy"> </div> <h3 class='pack-grid__title'><span>Bulk Partners</span></h3> <div class="pack-grid__text text"> <p></p> </div> </a> </div> <div class="pack-grid pack-grid--alt grid__item small--c-1of2 medium--c-1of4"> <a class='pack-grid__item' href='/collections/design-for-any-device'> <div class="pack-grid__images"> <img class="pack-grid__image" src="../cdn/shop/products/ABA-cover-14_48x%EF%B9%96v=1463456340.png" srcset="../cdn/shop/products/ABA-cover-14_48x%EF%B9%96v=1463456340.png 48w, ../cdn/shop/products/ABA-cover-14_34x@3x%EF%B9%96v=1463456340.png 102w, ../cdn/shop/products/ABA-cover-14_48x@3x%EF%B9%96v=1463456340.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="Designing for Touch" loading="lazy"> <img class="pack-grid__image" src="../cdn/shop/products/ABA-cover-13_48x%EF%B9%96v=1463456319.png" srcset="../cdn/shop/products/ABA-cover-13_48x%EF%B9%96v=1463456319.png 48w, ../cdn/shop/products/ABA-cover-13_34x@3x%EF%B9%96v=1463456319.png 102w, ../cdn/shop/products/ABA-cover-13_48x@3x%EF%B9%96v=1463456319.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="Responsible Responsive Design" loading="lazy"> <img class="pack-grid__image" src="../cdn/shop/products/aba-cover-6_a810ec60-d08b-4203-bc4e-0386e8935602_48x%EF%B9%96v=1511796703.png" srcset="../cdn/shop/products/aba-cover-6_a810ec60-d08b-4203-bc4e-0386e8935602_48x%EF%B9%96v=1511796703.png 48w, ../cdn/shop/products/aba-cover-6_a810ec60-d08b-4203-bc4e-0386e8935602_34x@3x%EF%B9%96v=1511796703.png 102w, ../cdn/shop/products/aba-cover-6_a810ec60-d08b-4203-bc4e-0386e8935602_48x@3x%EF%B9%96v=1511796703.png 144w" sizes="(min-width: 960px) 42px, (min-width: 769px) 30px, (min-width: 480px) 34px, 48px" alt="Mobile First" loading="lazy"> </div> <h3 class='pack-grid__title'><span>Design for Any Device</span></h3> <div class="pack-grid__text text"> <p>Everything聽you need to know, from screen to screen.</p> </div> </a> </div> </div> </div> </div> </section> <div id="shopify-section-product-recommendations" class="shopify-section section"><section class="section product-recommendations" data-base-url="/recommendations/products" data-product-id="2272135553" data-limit="10" > <div class="container"> <h2 class="section__title section__title--underlined">Also From A Book Apart</h2> <ul class="book-grid grid"> <li class="grid__item c-1of2 small--c-1of3 medium--c-1of6"> <a class='book-grid__item' href='/products/javascript-for-web-designers'> <img src="../cdn/shop/products/ABA-cover-20_df2e81de-294a-4a93-9721-d2e2ae2cfc97_212x%EF%B9%96v=1475079617.png" srcset="../cdn/shop/products/ABA-cover-20_df2e81de-294a-4a93-9721-d2e2ae2cfc97_112x%EF%B9%96v=1475079617.png 112w, ../cdn/shop/products/ABA-cover-20_df2e81de-294a-4a93-9721-d2e2ae2cfc97_212x%EF%B9%96v=1475079617.png 212w, ../cdn/shop/products/ABA-cover-20_df2e81de-294a-4a93-9721-d2e2ae2cfc97_112x@3x%EF%B9%96v=1475079617.png 336w, ../cdn/shop/products/ABA-cover-20_df2e81de-294a-4a93-9721-d2e2ae2cfc97_160x@3x%EF%B9%96v=1475079617.png 480w, ../cdn/shop/products/ABA-cover-20_df2e81de-294a-4a93-9721-d2e2ae2cfc97_212x@3x%EF%B9%96v=1475079617.png 636w" sizes="(min-width: 960px) 160px, (min-width: 769px) 112px, (min-width: 480px) 212px, 202px" alt="JavaScript for Web Designers" class="book-grid__img" loading="lazy"> <p class='book-grid__byline'>Mat Marquis</p> <h3 class='book-grid__title'>JavaScript for Web Designers</h3> </a> </li> <li class="grid__item c-1of2 small--c-1of3 medium--c-1of6"> <a class='book-grid__item' href='/products/sustainable-web-design'> <img src="../cdn/shop/products/aba-cover-34_212x%EF%B9%96v=1612877288.png" srcset="../cdn/shop/products/aba-cover-34_112x%EF%B9%96v=1612877288.png 112w, ../cdn/shop/products/aba-cover-34_212x%EF%B9%96v=1612877288.png 212w, ../cdn/shop/products/aba-cover-34_112x@3x%EF%B9%96v=1612877288.png 336w, ../cdn/shop/products/aba-cover-34_160x@3x%EF%B9%96v=1612877288.png 480w, ../cdn/shop/products/aba-cover-34_212x@3x%EF%B9%96v=1612877288.png 636w" sizes="(min-width: 960px) 160px, (min-width: 769px) 112px, (min-width: 480px) 212px, 202px" alt="Sustainable Web Design" class="book-grid__img" loading="lazy"> <p class='book-grid__byline'>Tom Greenwood</p> <h3 class='book-grid__title'>Sustainable Web Design</h3> </a> </li> <li class="grid__item c-1of2 small--c-1of3 medium--c-1of6"> <a class='book-grid__item' href='/products/flexible-typesetting'> <img src="../cdn/shop/products/aba-cover-27_212x%EF%B9%96v=1532470792.png" srcset="../cdn/shop/products/aba-cover-27_112x%EF%B9%96v=1532470792.png 112w, ../cdn/shop/products/aba-cover-27_212x%EF%B9%96v=1532470792.png 212w, ../cdn/shop/products/aba-cover-27_112x@3x%EF%B9%96v=1532470792.png 336w, ../cdn/shop/products/aba-cover-27_160x@3x%EF%B9%96v=1532470792.png 480w, ../cdn/shop/products/aba-cover-27_212x@3x%EF%B9%96v=1532470792.png 636w" sizes="(min-width: 960px) 160px, (min-width: 769px) 112px, (min-width: 480px) 212px, 202px" alt="Flexible Typesetting" class="book-grid__img" loading="lazy"> <p class='book-grid__byline'>Tim Brown</p> <h3 class='book-grid__title'>Flexible Typesetting</h3> </a> </li> <li class="grid__item c-1of2 small--c-1of3 medium--c-1of6 small--is-hidden"> <a class='book-grid__item' href='/products/the-new-css-layout'> <img src="../cdn/shop/products/aba-cover-24_212x%EF%B9%96v=1501539522.png" srcset="../cdn/shop/products/aba-cover-24_112x%EF%B9%96v=1501539522.png 112w, ../cdn/shop/products/aba-cover-24_212x%EF%B9%96v=1501539522.png 212w, ../cdn/shop/products/aba-cover-24_112x@3x%EF%B9%96v=1501539522.png 336w, ../cdn/shop/products/aba-cover-24_160x@3x%EF%B9%96v=1501539522.png 480w, ../cdn/shop/products/aba-cover-24_212x@3x%EF%B9%96v=1501539522.png 636w" sizes="(min-width: 960px) 160px, (min-width: 769px) 112px, (min-width: 480px) 212px, 202px" alt="The New CSS Layout" class="book-grid__img" loading="lazy"> <p class='book-grid__byline'>Rachel Andrew</p> <h3 class='book-grid__title'>The New CSS Layout</h3> </a> </li> <li class="grid__item small--c-1of2 medium--c-1of4"> <a class='book-grid__item' href='/products/ten-tote'> <img src="../cdn/shop/products/tote-colors-1x1_212x%EF%B9%96v=1604952210.jpg" srcset="../cdn/shop/products/tote-colors-1x1_112x%EF%B9%96v=1604952210.jpg 112w, ../cdn/shop/products/tote-colors-1x1_212x%EF%B9%96v=1604952210.jpg 212w, ../cdn/shop/products/tote-colors-1x1_112x@3x%EF%B9%96v=1604952210.jpg 336w, ../cdn/shop/products/tote-colors-1x1_160x@3x%EF%B9%96v=1604952210.jpg 480w, ../cdn/shop/products/tote-colors-1x1_212x@3x%EF%B9%96v=1604952210.jpg 636w" sizes="(min-width: 960px) 160px, (min-width: 769px) 112px, (min-width: 480px) 212px, 202px" alt="The *10* Tote Bag" class="book-grid__img" loading="lazy"> <h3 class='book-grid__title'>The *10* Tote Bag</h3> </a> </li> <li class="grid__item small--c-1of2 medium--c-1of4"> <a class='book-grid__item' href='/products/laurel-leaf-pin'> <img src="../cdn/shop/products/aba-leaf-pins-2-sq_212x%EF%B9%96v=1522165740.jpg" srcset="../cdn/shop/products/aba-leaf-pins-2-sq_112x%EF%B9%96v=1522165740.jpg 112w, ../cdn/shop/products/aba-leaf-pins-2-sq_212x%EF%B9%96v=1522165740.jpg 212w, ../cdn/shop/products/aba-leaf-pins-2-sq_112x@3x%EF%B9%96v=1522165740.jpg 336w, ../cdn/shop/products/aba-leaf-pins-2-sq_160x@3x%EF%B9%96v=1522165740.jpg 480w, ../cdn/shop/products/aba-leaf-pins-2-sq_212x@3x%EF%B9%96v=1522165740.jpg 636w" sizes="(min-width: 960px) 160px, (min-width: 769px) 112px, (min-width: 480px) 212px, 202px" alt="Laurel Leaf Pin" class="book-grid__img" loading="lazy"> <h3 class='book-grid__title'>Laurel Leaf Pin</h3> </a> </li> </ul> </div> </section> </div> </main> <footer role="contentinfo"> <div class="section section--close-top section--tan"> <div class="container"> <div class="site-footer grid"> <div class="grid__item medium--c-5of12"> <h3 class="site-footer__title">Newsletter</h3> <form action='' class="newsletter__form " method='post' target='_blank'> <div style="display: none;" aria-hidden="true"> <label for="website">Website</label><br /> <input type="text" id="website" name="website" tabindex="-1" autocomplete="false" value="" /> </div> <div class='newsletter__field-group'> <label for='newsletter-email'>Email<span> Address</span></label> <input class='email not-allowed' id='newsletter-email' name='fields[email]' type='email' value='' disabled /> <button class='btn--rounded not-allowed' type='submit' disabled>Subscribe</button> </div> </form> <p class="newsletter__note">By signing up, you agree to our <a href='/pages/privacy-policy'>Terms of Use</a>.</p> </div> <div class="grid__item small--c-1of3 medium--c-3of12"> <h3 class="site-footer__title">Follow Us</h3> <ul class="site-footer__nav site-footer__nav--social"> <li class="site-footer__item--icons"> <a href='http://twitter.com/abookapart'><svg viewBox="0 0 15 12" width="15" height="12" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M15 1.42a6.32 6.32 0 0 1-1.53 1.57v.4c0 4-3.09 8.61-8.75 8.61A8.77 8.77 0 0 1 0 10.77c.24.03.49.05.73.05 1.44 0 2.78-.61 3.82-1.44a3.06 3.06 0 0 1-2.87-2.1 3.25 3.25 0 0 0 1.4-.05A3.04 3.04 0 0 1 .6 4.26v-.04c.41.22.88.36 1.39.38A3 3 0 0 1 .62 2.09c0-.57.16-1.03.42-1.47a8.8 8.8 0 0 0 6.34 3.1 3.04 3.04 0 0 1 3-3.73c.89.01 1.69.39 2.26.97.7-.14 1.35-.4 1.94-.74-.22.7-.7 1.3-1.35 1.68A6.16 6.16 0 0 0 15 1.42z"/></svg>@abookapart on Twitter</a> </li> <li class="site-footer__item--icons"> <a href="http://instagram.com/abookapart"><svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M8 0c2.17 0 2.45.01 3.3.05.85.04 1.43.17 1.94.37.53.2.97.48 1.42.92.44.45.72.9.92 1.42.2.5.33 1.09.37 1.94.04.85.05 1.13.05 3.3s-.01 2.45-.05 3.3a5.87 5.87 0 0 1-.37 1.94c-.2.53-.48.97-.92 1.42-.45.44-.9.72-1.42.92-.5.2-1.09.33-1.94.37-.85.04-1.13.05-3.3.05a56.3 56.3 0 0 1-3.3-.05 5.85 5.85 0 0 1-1.94-.37c-.53-.2-.97-.48-1.42-.92a3.9 3.9 0 0 1-.92-1.42c-.2-.5-.33-1.09-.37-1.94C0 10.45 0 10.17 0 8s.01-2.45.05-3.3c.04-.85.17-1.43.37-1.94.2-.53.48-.97.92-1.42.45-.44.9-.72 1.42-.92.5-.2 1.09-.33 1.94-.37C5.55 0 5.83 0 8 0m5.23 3.73a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0M8 3.89a4.1 4.1 0 1 0 0 8.22 4.1 4.1 0 0 0 0-8.22m0 6.78a2.67 2.67 0 1 1 0-5.34 2.67 2.67 0 0 1 0 5.34"/></svg>@abookapart on Instagram</a> </li> <li class="site-footer__item--icons"> <a href="http://feeds.feedburner.com/a-book-apart"><svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>RSS</title><path d="M16 12.6c0 1.9-1.5 3.4-3.4 3.4H3.4A3.4 3.4 0 0 1 0 12.6V3.4C0 1.5 1.5 0 3.4 0h9.2C14.5 0 16 1.5 16 3.4v9.2zM4.3 13a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8zm-1.5-5a5 5 0 0 1 5 5H10a7 7 0 0 0-7-7v2zm0-3.7c4.8 0 8.7 4 8.7 8.7h2c0-5.9-4.8-10.7-10.7-10.7v2z"/></svg>A Book Apart News RSS</a> </li> </ul> </div> <div class="grid__item small--c-1of3 medium--c-2of12"> <h3 class="site-footer__title">Shop</h3> <ul class="site-footer__nav"> <li> <a href='/collections/books' title='Books'>Books</a> </li> <li> <a href='/collections' title='Privacy Policy'>Starter Packs</a> </li> <li> <a href='/collections/gear' title='Gear'>Gear</a> </li> </ul> </div> <div class="grid__item small--c-1of3 medium--c-2of12"> <h3 class="site-footer__title">Company</h3> <ul class="site-footer__nav"> <li> <a href='/pages/help/' title='Help & Contact Us'>Help & Contact</a> </li> <li> <a href='../pages/about/' title='About Us'>About Us</a> </li> <li> <a href='/pages/resources-for-authoring/' title='Resources for Authoring'>Resources for Authoring</a> </li>  </ul> </div> </div> </div> </div> <div class="section section--close-top section--tan--dark"> <div class="container"> <div class="site-footer__legal"> <p class="site-credits">© Copyright <script>document.write(new Date().getFullYear())</script>, A Book Apart, LLC <a href='/pages/privacy-policy' title='Privacy Policy'>Privacy Policy</a></p> </div> </div> </div> </footer> </body> </html>

CINXE.COM

Designing for Touch, A Book Apart