Creating mobile Web products is complicated. There are hundreds of different devices and screen sizes to contend with, different browsers with different capabilities, differences of opinion between devices on how certain HTML5 features ought to be implemented, and users who have come to expect extreme simplicity and ease of use.
If you started your mobile Web project from scratch today, with no knowledge of how the mobile Web differs from the desktop Web, you’d spend months chasing down strange bugs and figuring out how to create some bit of consistency between different devices.
If you knew just one trick, you could reduce this debugging time to weeks. This trick is an understanding of the browser viewport and how to configure it as described in this article from Apple.
With another trick, you could get it right pretty much out of the gate. This second trick is the use of HTML5 Mobile Boilerplate. HTML5 Mobile Boilerplate is a continuously updated template for creating mobile Web sites. It features all of the best practices that a team of really smart volunteers comes up with for making Web sites look great on mobile devices.
Despite these two pretty easily obtainable pieces of the puzzle, most of the Web sites we see are completely broken on mobile devices. If knowledge of just these two tricks (or even just of the 2nd one) were universal among Web developers, sites that don’t work on mobile devices would be rare.
What do you think? Do you agree? Do you have another tip? Join us on Facebook and discuss!