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

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

• By Vitaly Friedman


• September 30th, 2014


• 
  
• 8 Comments



Mobile is a difficult, indeterminate beast. If we run into technical problems in mobile, afterwards you’ll know how irritating regulating them can be. That’s because we’ve teamed adult with Peter-Paul Koch to emanate The Mobile Web Handbook, a unsentimental new beam to dealing with front-end hurdles in mobile. The book is finally prepared and is now shipping worldwide. It’s accessible in imitation and as an eBook.¹




div display: table-cell;

.options tiny margin-bottom: 2em;

.pre-order-now max-width: 300px;

}

.focus-on-the-book .rounded border-radius: 8px !important;

@media shade 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 plain 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 plain transparent;

border-right: 6px plain transparent;

border-top: 6px plain rgba(0,0,0,0.4);

top: 0.6em;

margin: 0 auto;


.reporttable div.arrow:hover

border-top: 6px plain rgba(0,0,0,0.45);


.reporttable tr:hover

cursor: pointer;


.reporttable tr:active

color:

background-color:


.reporttable div.up

width: 0px;

height: 0px;

border-left: 6px plain transparent;

border-right: 6px plain transparent;

border-top: none;

border-bottom: 6px solid

top: 9px;


.reporttable div.up:hover

cursor: pointer;

border-top: none;

border-bottom: 5px plain rgba(0,0,0,0.45);


.reporttable .infobox

border-top: 2px plain 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 camber color: color:

.infobox .keywords .lead, .infobox .keywords span.main-keywords color:

.infobox .keywords camber color:

p.keywords border-top: 1px plain 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 automobile .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 plain 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 palliate .3s;-o-transition: all palliate .3s;transition: all palliate .3s;

.option-one .pre-order-now, .option-two .pre-order-now width: 45%;

button.pre-order-now:hover border: .04em plain rgba(0,0,0,0.15);

.pre-order-now:hover,.pre-order-now:focus cursor: pointer; opacity: .95; outline:0; border: 1px plain 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 plain rgba(0,0,0,0.08);

.reporttable td padding: .375em .9375em; border-bottom: .08em plain

.reporttable .infobox border-top: .125em plain 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;

]]>


²




$9.90




eBook⁴PDF, ePUB, Amazon Kindle




About The Book




We have all been there. Whether we are building a manageable website or an app or only traffic with WebViews, we always finish adult using into irritating technical problems that all of those quirky (and not so quirky) mobile browsers chuck adult so really often. Weird browser bugs, unsuitable CSS and JavaScript support, opening issues, mobile fragmentation and difficult nuances such as device pixels, viewports, zooming, hold eventuality cascade, pointer and click events and a 300-millisecond delay. No, mobile isn’t indeed dim matter, yet it does need we to learn a few new things, some of that are utterly confusing.




⁵
A demeanour inside a book, with a breeze by Stephen Hay (View vast version⁶)




The Mobile Web Handbook will assistance we to make clarity of it all. It’s a unsentimental new guide, created by Peter-Paul Koch and published by yours truly, to help we tackle common front-end hurdles in mobile effectively. Featuring information from new investigate findings, a book shows a intricacies of mobile, with a common problems and workarounds, and it delivers what it promises: real-world, unsentimental discipline for mobile — singular and intensely useful.




⁷
Download a representation section (PDF)⁸, typeset in a pleasing Elena typeface.




The book will be useful to mobile strategists, developers, designers and anyone who wants to improved know a intricacies of mobile — on both a technical and marketplace ends. Whether we wish to get a better design of mobile or dive low into common browser bugs, this is a book to read. And if we pre-ordered it already, of march a book has shipped to we already.




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




Download Free Sample Chapter (PDF)




We’ve prepared a representation section PDF¹⁰, to give we some insights into how a book looks like. The section provides a extensive overview of a browser market, worldwide marketplace shares and ongoing developments—and a few browser stats. Happy reading!




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




Why This Book Is For You




Developing websites for mobile is flattering many a same as it has always been, yet it does need we to learn a few new things, some of that are utterly confusing. In The Mobile Web Handbook, you’ll learn a following:



1. Make clarity of a mobile value chain of operators and of device and OS vendors.


2. Distinguish between opposite mobile and substitute browsers, and learn about ongoing browser developments.


3. See by a difficult browser conditions on Android devices.


4. Understand CSS pixels, earthy pixels and device pixels.


5. Make clarity of a blueprint viewport, visible viewport and ideal viewport.


6. Figure out how zooming works and because page wizz is opposite than splash zoom.


7. Learn a intricacies of a meta viewport and associated CSS and JavaScript properties.


8. Know how to understanding with a technical issues of hold events in JavaScript.


9. Understand a touch eventuality cascade and a bugs.


10. Handle a 300-millisecond delay, pointer events and a click event.


11. Fix common bugs caused by position: fixed, overflow: auto and background-attachment.


12. Set adult a device contrast lab and exam on mobile.


13. Reconsider old-fashioned growth practices.


14. Adjust your expectations of mobile networks and latency.



¹³




$9.90




eBook¹⁴PDF, ePUB, Amazon Kindle




Table Of Contents




CHAPTER
TITLE
DETAILS
Chapter 1

The Mobile World




Summary • The mobile universe is a complicated, rarely fragmented environment. The mobile value chain involves operators, device vendors and OS vendors—all carrying their possess interests and goals that figure a device marketplace and mystify things for us, web developers. If we review The Mobile Book¹⁵ already, this section is a revised and extended chronicle of a chapter. It’s been updated with a latest total and developments, though, and contains a few new sections.




Keywords • operators • networks • mobile value sequence • device vendors • hardware • fragmented marketplace • phone’s prolongation cycle • tellurian device marketplace • OS vendors and sales • developer family • temperament government • payments.




Chapter 2

Browsers




Summary • If you’re used to a elementary five-browser ecosystem that exists on a desktop, you’re in for a severe warn in a mobile market. There are 30 mobile browsers, trimming from lousy to great. Besides, there are also substitute browsers, default browsers, downloadable ones, treacherous Android ones, and of march WebViews. What do we need to know about prevailing browsers and prevalent platforms? A extensive overview of a browser market, worldwide marketplace shares and ongoing developments—and a few browser stats.




Keywords • browser ecosystem • digest engines • WebKits • WebViews • Android browsers • platforms • substitute browsers • statistics.




Chapter 3

Android




Summary • The many formidable partial of a mobile universe is Android. With Android now travelling about 3 buliding of a smartphone market, it has a few problems and oddities that are singly a own. In this section we’ll demeanour during Google’s wishes and actions, a reactions of a device vendors, and a difficult browser conditions caused by a light deputy of Android WebKit by Chrome.




Keywords • apart • Android updates • Android WebKit • Chrome.




Chapter 4

Viewports




Summary • Mobile inclination have distant smaller screens than desktop/laptop computers. As a result, browser vendors had to perform some sleight of palm in sequence to make certain desktop-optimized websites also arrangement decently. They apart a viewport, that on desktop means a browser window, into three. What are these viewports and because do we need them? By deliberating pixels, viewports, resolutions, a meta viewport, media queries, and associated JavaScript events and properties, you’ll benefit some discernment into how mobile browsers (and web developers) understanding with a elemental problem of a tiny screen.




Keywords • device pixels • CSS pixels • blueprint viewport • visible viewport • ideal viewport • zooming • page wizz • splash wizz • min/max-zoom • fortitude • device-pixel-ratio • meta viewport • media queries • CSS/JavaScript • events.




Chapter 5

CSS




Summary • There are a few CSS declarations that are harder to exercise in mobile browsers than in desktop ones. Some, such as position: fixed, are contingent on a viewport, yet that viewport? Others might have performance issues or special interface considerations, such as overflow: auto. It’s only about time to get to a bottom of this.




Keywords • position: bound • overflow: automobile • overflow-scrolling • background-attachment • vw and vh units • :active and :hover.




Chapter 6

Touch Events




Summary • Mobile inclination generally use touchscreens, and support a new set of hold events to guard user actions. At initial sight, hold events seem to be roughly a same as rodent events. What are a differences? How do they work? Do we need apart events for any communication mode, or can we combine rodent and hold into one, as Microsoft wants? It is utterly expected that destiny new web-enabled device classes such as TVs, cars, or even fridges, will move new interaction modes and a new set of events. How do we ready for them? That’s accurately what this section is all about.




Keywords • touchcancel • gesticulate events • dropdown menu • drag and dump • scrolling covering • eventuality equivalencies • merging hold and rodent • detecting communication modes • hold eventuality cascade • a daub movement • anatomy of a click • 300 ms check • touchLists • pointer events.




Chapter 7

Becoming a Mobile Web developer




Summary • This final section gives we unsentimental sum about how to turn a mobile web developer, or to be some-more precise, how to set adult a device library and conduct mobile tests. Which inclination do we need? How do we run tests? What would an ideal device lab demeanour like? And what should we keep in mind in terms of a improvements of a mobile networks in a future?




Keywords • ideal device lab • appropriation and pity inclination • what and how to exam • device exam batches • handling updates • browser showing • JavaScript libraries • mobile networks • latency • tie speed.




About a Author




¹⁶




Peter-Paul Koch¹⁷ has been around for utterly some time. Known for his browser harmony tables on QuirksMode, he is a mobile height strategist, browser researcher, consultant and tutor in Amsterdam, Netherlands. He specializes in a mobile web, generally 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 contracting and badge page marker


• The eBook is enclosed with a printed book for giveaway (PDF, ePUB, Kindle).


• Shipping now worldwide


• Worldwide airmail delivery¹⁸ from Germany ($5 for general shipping).


• Get a book (print or eBook).¹⁹



²⁰




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

— Dudley Storey²²








Footnotes



1. 1 #your-mobile-web-handbook


2. 2 https://shop.smashingmagazine.com/checkout/cart/add?product=601


3. 3 https://shop.smashingmagazine.com/checkout/cart/add?product=601


4. 4 https://shop.smashingmagazine.com/checkout/cart/add?product=602


5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/touchmove-900.jpg


6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/touchmove-900.jpg


7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/09/Sample-Chapter-Mobile-Web-Handbook.pdf


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/Sample-Chapter-Mobile-Web-Handbook.pdf


9. 9 #your-mobile-web-handbook


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/Sample-Chapter-Mobile-Web-Handbook.pdf


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/mobile-web-handbook-1-1200px.jpg


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/Mobile-Web-Handbook-2-1200.jpg


13. 13 https://shop.smashingmagazine.com/mobile-web-handbook.html


14. 14 https://shop.smashingmagazine.com/checkout/cart/add?product=602


15. 15 https://shop.smashingmagazine.com/the-mobile-book-digital-edition.html


16. 16 http://www.quirksmode.org/about/


17. 17 http://www.quirksmode.org/about/


18. 18 https://shop.smashingmagazine.com/delivery-times/


19. 19 #your-mobile-web-handbook


20. 20 https://shop.smashingmagazine.com/mobile-web-handbook.html


21. 21 https://shop.smashingmagazine.com/checkout/cart/add?product=601


22. 22 http://demosthenes.info/blog/928/Book-Review-The-Mobile-Web-Handbook



↑ Back to topShare on Twitter

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