Meet “The Mobile Web Handbook”, A New Smashing Book By Peter-Paul Koch (Pre-Sale)

Update: we’re behind the schedule with our new Mobile Web Handbook1. The book will be released in late September, for good.

Argh! Weird browser bugs, inconsistent CSS/JavaScript support, performance issues, mobile fragmentation and complicated nuances such as device pixels, viewports, zooming, touch event cascade, pointer/click events and the 300ms delay. To make sense of it all, we created The Mobile Web Handbook, a new practical book by Peter-Paul Koch to help you understand technical issues on mobile and deal with them effectively.

Mobile Web Handbook, a new Smashing Book by Peter-Paul Koch142
Get the eBook.3 Get Print + eBook.4

We have all been there. With Responsive Web Design becoming a convenient strategy for device-agnostic design, we keep running into annoying technical issues that all those quirky (and not so quirky) mobile browsers are raising so very often. However, fixing these issues can be quite easy — once you understand exactly why they come up.

The book will be useful for mobile strategists, developers, designers, and everybody willing to better understand the intricacies of mobile — both technical and market-related. Whether you want to get a better picture or dive deep into common browser bugs on mobile, this is just the book you need.

250 pages. Written by Peter-Paul Koch. Reviewed by Stephanie and Bryan Rieger. Designed by Stephen Hay. Shipping starts late June 2014. Get the book.5

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, and some of them are quite confusing. In Mobile Web Handbook, you’ll learn to:

  1. Make sense of the mobile value chain of operators and device/OS vendors,
  2. Distinguish between different mobile/proxy browsers and ongoing browser developments,
  3. See through the complicated browser situation on Android devices,
  4. Understand CSS pixels, physical pixels, device pixels,
  5. Make sense of layout viewport, visual viewport and ideal viewport,
  6. How zooming works and why page zoom is different than pinch zoom,
  7. The intricacies of the meta viewport and related CSS/JS properties,
  8. How to deal with technical issues of touch events in JS,
  9. Understand the touch event cascade and its bugs,
  10. Handle 300ms 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 expectations for mobile networks and latency.

Mobile Web Handbook6
A look inside the book. One of the early drafts by Stephen Hay. (Large preview7)

8

Table Of Contents

CHAPTER TITLE DETAILS
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 Book9 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 Browsers

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 Android

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 Viewports

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 CSS

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

10

Peter-Paul Koch11 (PPK) has been around for quite some time. Known for his browser compatibility tables on Quirksmode.org, he is a mobile platform strategist, browser researcher, consultant, and trainer in Amsterdam, the Netherlands. He specialises in the mobile web, and especially mobile browser research, advising mobile and desktop browser vendors on their implementation of web standards.

Technical Details

  • 250 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
  • Quality hardcover with stitched binding and a ribbon page marker.
  • The eBook is included with the printed book for free (PDF, EPUB, Kindle),
  • Shipping starts late June 2014.
  • Worldwide airmail delivery12 from Germany ($5 intl. shipping).
  • Available as print and eBook.13

Mobile Web Handbook, a new Smashing Book by Peter-Paul Koch142
Get Print + eBook.15

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

  1. 1

    Just preordered it.

    I guess it will be awesome, like all the other books…

    4
  2. 2

    Bought!

    If it’s anything like the Smashing Book then it will be a great read.

    1
  3. 3

    I will definitely preorder this. Can we get the ebook sooner than June?

    3
  4. 4

    Is the print version available for UK customers? Meaning if I buy it will it be shipped? This looks like a good resource to have.

    0
  5. 6

    just ordered mine – yay!

    0
  6. 7

    Please this book in Spanish!! Thanks!!

    0
  7. 8

    Thomas Gallagher

    May 11, 2014 6:35 am

    I take it by the information in the post that this is not a book that is coming to the Smashing Library? Just want to confirm that I am understanding the article correctly.

    1
    • 9

      Markus Seyfferth

      May 11, 2014 11:12 am

      Dear Thomas, the book will be available in our Smashing Library as well, like any of the books we publish. :-)

      Should you have any other questions, don’t hesitate to ask. :-)

      1
  8. 13

    Hey,
    When is the book coming out?
    Isn’t it supposed to be today?
    Waiting anxiously…

    0
    • 14

      Markus Seyfferth

      June 30, 2014 3:36 pm

      Dear Eytan, we will have to postpone the release date a bit to finish the Handbook — and we will send an update to all who’ve pre-ordered the book very soon. Thanks! :-)

      0
  9. 15

    I love your books but hate your tardiness and also that you censor messages. All I said was I have preordered five of your books and all of them have been late. If I did that at my job I would be fired. Why is it so hard to stick to your schedule?

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top