hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

“There Are More Bugs In Mobile Than… Particles In The Universe!”

“There Are More Bugs In Mobile Than… Particles In The Universe!”

Mobile is a difficult, unpredictable beast. If you run into technical problems in mobile, then you’ll know how annoying fixing them can be. That’s why we’ve teamed up with Peter-Paul Koch to create The Mobile Web Handbook, our practical new guide to dealing with front-end challenges in mobile. The book is finally ready and is now shipping worldwide. It’s available in print and as an eBook.1

div { display: table-cell; }
.options small { margin-bottom: 2em; }
.pre-order-now { max-width: 300px; }
.focus-on-the-book .rounded { border-radius: 8px !important; }
@media screen and (max-width:36em) { strong.details { display: none; }}
.focus-on-the-book {text-align: center; margin: 1em 0;}
.reporttable {
width: 100%;
margin: 1em 0;
border: 1px solid rgba(0,0,0,0.1); }
.reporttable td {
padding: 4px 15px;
border-bottom: 1px solid
.reporttable div.arrow {
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0,0,0,0.4);
top: 0.6em;
margin: 0 auto;
.reporttable div.arrow:hover {
border-top: 6px solid rgba(0,0,0,0.45);
.reporttable tr:hover {
cursor: pointer;
.reporttable tr:active {
.reporttable div.up {
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: none;
border-bottom: 6px solid
top: 9px;
.reporttable div.up:hover {
cursor: pointer;
border-top: none;
border-bottom: 5px solid rgba(0,0,0,0.45);
.reporttable .infobox {
border-top: 2px solid rgba(0,0,0,0.04);
background-color: rgba(0,0,0,0.02);
.faq td {
padding: 6px 15px;
padding-left: 3.5%;
.reporttable .infobox td {
padding: 3.5% 5% 2.5% 5% !important;
.faq .infobox td {
padding: 2.5% 5% 5% 3.5% !important;
.reporttable .bio-image { float: right; padding: 0 0.75em 0.75em 0.75em; border-radius: 50%; }
blockquote { border: none; background-color: none; }
.signature { text-align: right; }
.infobox .desc em,.infobox .keywords em { color: }
.infobox .lead { font-size: 0.9em; font-family: “Proxima Nova Bold”, Arial; letter-spacing: 1px; text-transform: uppercase; color: color: }
.infobox .desc span { color: color: }
.infobox .keywords .lead, .infobox .keywords span.main-keywords { color: }
.infobox .keywords span { color: }
p.keywords{ border-top: 1px solid rgba(0,0,0,0.05) !important; padding-top: 1em; margin-top: 1em; margin-bottom: 0.5em;}
shop-that {text-align:center;margin:0 auto;}
.option-one { float: left; }
.pricing {text-align: center; font-size: 1.75em; /* 24px */ font-family: “Proxima Nova”,”Helvetica Neue”,Arial,sans-serif; font-weight: bold; margin: 0.05em 0em 0em 0em;color: }
.pre-order-now {font-family:”Proxima Nova”,”Helvetica Neue”,Arial,sans-serif; font-size: 1.95em; /* 20px */color: padding: .45em 0.45em; vertical-align: middle; text-align: center; margin: 0 auto .08em;display: block; font-weight: bold;
background: width: 50%; line-height: 1.25em; background: -webkit-linear-gradient(top, #FA9334, #F4712B);background: -o-linear-gradient(top, #FA9334, #F4712B);background: linear-gradient(to bottom, #FA9334, #F4712B);
border: .04em solid rgba(0,0,0,0.15);opacity: 1;
border-radius: .5em;
text-shadow: 0 .08em .08em rgba(0,0,0,0.1);-webkit-box-shadow: 0 .08em .1em rgba(0,0,0,0.1);box-shadow: 0 .08em .1em rgba(0,0,0,0.1);
-webkit-transition: all ease .3s;-o-transition: all ease .3s;transition: all ease .3s; }
.option-one .pre-order-now, .option-two .pre-order-now { width: 45%; }
button.pre-order-now:hover {border: .04em solid rgba(0,0,0,0.15); }
.pre-order-now:hover,.pre-order-now:focus {cursor: pointer; opacity: .95; outline:0; border: 1px solid rgba(0,0,0,0.25) !important; /* box-shadow: 3px 4px 4px 0px */}
.pre-order-now:active {opacity: 1;-webkit-box-shadow: inset 0 .13em .13em rgba(0,0,0,.4), inset 0 -.13em .13em rgba(255,255,255,.1);box-shadow: inset 0 .13em .13em rgba(0,0,0,.4), inset 0 -.13em .13em rgba(255,255,255,.1);outline:0; color: position: relative; top: 2px;}
.im-loving-it {font-family: “Proxima Nova”,”Helvetica Neue”,Arial,sans-serif;font-size:1em;text-align:center;margin: 0.75em 0em 2em 0em;display: block;color: }
.reporttable { width: 100%; margin: 1em 0; border: .08em solid rgba(0,0,0,0.08); }
.reporttable td { padding: .375em .9375em; border-bottom: .08em solid }
.reporttable .infobox { border-top: .125em solid rgba(0,0,0,0.04); background-color: rgba(0,0,0,0.02); }
.reporttable .infobox td { padding: 3.5% 5% 2.5% 5% !important; }
.meta td { color: rgba(0,0,0,0.45); letter-spacing: .08em; font-size: 0.95em; }

Mobile Web Handbook, a new Smashing Book by Peter-Paul Koch2


eBook4PDF, ePUB, Amazon Kindle

About The Book

We have all been there. Whether you are developing a responsive website or an app or just dealing with WebViews, you always end up running into annoying technical problems that all of those quirky (and not so quirky) mobile browsers throw up so very often. Weird browser bugs, inconsistent CSS and JavaScript support, performance issues, mobile fragmentation and complicated nuances such as device pixels, viewports, zooming, touch event cascade, pointer and click events and the 300-millisecond delay. No, mobile isn’t actually dark matter, but it does require you to learn a few new things, some of which are quite confusing.

Mobile Web Handbook5
A look inside the book, with a draft by Stephen Hay (View large version6)

The Mobile Web Handbook will help you to make sense of it all. It’s a practical new guide, written by Peter-Paul Koch and published by yours truly, to help you tackle common front-end challenges in mobile effectively. Featuring data from recent research findings, the book shows the intricacies of mobile, with its common problems and workarounds, and it delivers what it promises: real-world, practical guidelines for mobile — unique and extremely useful.

Sample PDF7
Download a sample chapter (PDF)8, typeset in the beautiful Elena typeface.

The book will be useful to mobile strategists, developers, designers and anyone who wants to better understand the intricacies of mobile — on both the technical and market ends. Whether you want to get a better picture of mobile or dive deep into common browser bugs, this is the book to read. And if you pre-ordered it already, of course the book has shipped to you already.

232 pages. Written by Peter-Paul Koch. Reviewed by Stephanie and Bryan Rieger. Designed by Stephen Hay. Shipping now worldwide. Available in print and as an eBook.9

Download Free Sample Chapter (PDF)

We’ve prepared a sample chapter PDF10, to give you some insights into how the book looks like. The chapter provides a comprehensive overview of the browser market, worldwide market shares and ongoing developments—and a few browser stats. Happy reading!

New Smashing Book, “Mobile Web Handbook”, is now ready, and shipping. Large view.12

Why This Book Is For You

Developing websites for mobile is pretty much the same as it has always been, but it does require you to learn a few new things, some of which are quite confusing. In The Mobile Web Handbook, you’ll learn the following:

  1. Make sense of the mobile value chain of operators and of device and OS vendors.
  2. Distinguish between different mobile and proxy browsers, and learn about ongoing browser developments.
  3. See through the complicated browser situation on Android devices.
  4. Understand CSS pixels, physical pixels and device pixels.
  5. Make sense of the layout viewport, visual viewport and ideal viewport.
  6. Figure out how zooming works and why page zoom is different than pinch zoom.
  7. Learn the intricacies of the meta viewport and related CSS and JavaScript properties.
  8. Know how to deal with the technical issues of touch events in JavaScript.
  9. Understand the touch event cascade and its bugs.
  10. Handle the 300-millisecond delay, pointer events and the click event.
  11. Fix common bugs caused by position: fixed, overflow: auto and background-attachment.
  12. Set up a device testing lab and test on mobile.
  13. Reconsider outdated development practices.
  14. Adjust your expectations of mobile networks and latency.



eBook14PDF, ePUB, Amazon Kindle

Table Of Contents

Chapter 1
The Mobile World

Summary The mobile world is a complicated, highly fragmented environment. The mobile value chain involves operators, device vendors and OS vendors—all having their own interests and goals that shape the device market and complicate things for us, web developers. If you read The Mobile Book15 already, this chapter is a revised and extended version of the chapter. It’s been updated with the latest figures and developments, though, and contains a few new sections.

Keywords operators networks mobile value chain device vendors hardware fragmented market phone’s production cycle global device market OS vendors and sales developer relations identity management payments.

Chapter 2

Summary If you’re used to the simple five-browser ecosystem that exists on the desktop, you’re in for a rough surprise in the mobile market. There are 30 mobile browsers, ranging from lousy to great. Besides, there are also proxy browsers, default browsers, downloadable ones, confusing Android ones, and of course WebViews. What do you need to know about prevailing browsers and prevailing platforms? A comprehensive overview of the browser market, worldwide market shares and ongoing developments—and a few browser stats.

Keywords browser ecosystem rendering engines WebKits WebViews Android browsers platforms proxy browsers statistics.

Chapter 3

Summary The most complex part of the mobile world is Android. With Android now spanning about three quarters of the smartphone market, it has a few problems and oddities that are uniquely its own. In this chapter we’ll look at Google’s wishes and actions, the reactions of the device vendors, and the complicated browser situation caused by the gradual replacement of Android WebKit by Chrome.

Keywords differentiation Android updates Android WebKit Chrome.

Chapter 4

Summary Mobile devices have far smaller screens than desktop/laptop computers. As a result, browser vendors had to perform some sleight of hand in order to make sure desktop-optimized websites also display decently. They split the viewport, which on desktop means the browser window, into three. What are these viewports and why do we need them? By discussing pixels, viewports, resolutions, the meta viewport, media queries, and related JavaScript events and properties, you’ll gain some insight into how mobile browsers (and web developers) deal with the fundamental problem of the small screen.

Keywords device pixels CSS pixels layout viewport visual viewport ideal viewport zooming page zoom pinch zoom min/max-zoom resolution device-pixel-ratio meta viewport media queries CSS/JavaScript events.

Chapter 5

Summary There are a few CSS declarations that are harder to implement in mobile browsers than in desktop ones. Some, such as position: fixed, are dependent on the viewport, but which viewport? Others may have performance issues or special interface considerations, such as overflow: auto. It’s just about time to get to the bottom of this.

Keywords position: fixed overflow: auto overflow-scrolling background-attachment vw and vh units :active and :hover.

Chapter 6
Touch Events

Summary Mobile devices generally use touchscreens, and support a new set of touch events to monitor user actions. At first sight, touch events seem to be roughly the same as mouse events. What are the differences? How do they work? Do we need separate events for each interaction mode, or can we merge mouse and touch into one, as Microsoft wants? It is quite likely that future new web-enabled device classes such as TVs, cars, or even fridges, will bring new interaction modes and a new set of events. How do we prepare for them? That’s exactly what this chapter is all about.

Keywords touchcancel gesture events dropdown menu drag and drop scrolling layer event equivalencies merging touch and mouse detecting interaction modes touch event cascade the tap action anatomy of a click 300 ms delay touchLists pointer events.

Chapter 7
Becoming a Mobile Web developer

Summary This last chapter gives you practical details about how to become a mobile web developer, or to be more precise, how to set up a device library and conduct mobile tests. Which devices do you need? How do you run tests? What would an ideal device lab look like? And what should you keep in mind in terms of the improvements of the mobile networks in the future?

Keywords ideal device lab acquiring and sharing devices what and how to test device test batches managing updates browser detection JavaScript libraries mobile networks latency connection speed.

About the Author


Peter-Paul Koch17 has been around for quite some time. Known for his browser compatibility tables on QuirksMode, he is a mobile platform strategist, browser researcher, consultant and trainer in Amsterdam, Netherlands. He specializes in the mobile web, especially mobile browser research, whereby he advises mobile and desktop browser vendors on their implementations of web standards.

Technical Details

  • 232 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches)
  • Quality hardcover with stitched binding and ribbon page marker
  • The eBook is included with the printed book for free (PDF, ePUB, Kindle).
  • Shipping now worldwide
  • Worldwide airmail delivery18 from Germany ($5 for international shipping).
  • Get the book (print or eBook).19

Mobile Web Handbook, a new Smashing Book by Peter-Paul Koch20

“Like ‘The Mobile Book’, the Mobile Web Handbook is a volume that will be consulted over years.”
Dudley Storey22


  1. 1 #your-mobile-web-handbook
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9 #your-mobile-web-handbook
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19 #your-mobile-web-handbook
  20. 20
  21. 21
  22. 22

↑ Back to topShare on Twitter

Article source:


Submit a Review

If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.