Creating websites for mobile HTML5 Mobile Boilerplate Mobile Sites
More and more users are using mobile devices to surf the web is becoming critical for developers to optimize their mobile sites to display correctly browsers these new devices.
HTML5 is an excellent choice for developers who want to create a site compatible with most modern mobile devices and begin to offer new and innovative services using all the new features of HTML5.
However, this language is currently only in its infancy and still has many problems of implementation and compatibility on different mobile platforms. To create a mobile optimized website using HTML5 is indispensable to apply a series of tricks and best practices to ensure consistent results.
Fortunately a group of professional developers aware of this problem created a project that offers everything you need to instantly create a mobile site HTML5 professional quality.
Mobile Boilerplate Mobile Sites
This project is a derivative of the legendary HTML5 Boilerplate. Using the same principles, the Mobile Boilerplate is an optimized version for smartphones and other high-end handsets.
Includes a lot of tricks and techniques to ensure compatibility, consistency and performance of your website, its main features are:
Created using best practices for development, both in structure and in the CSS code
Optimized to run on major smartphones and high-end devices (Android, iPhone OS, Symbian, Blackberry mobile sites)
Settings viewing area or viewport to avoid problems of scale involuntary Site
Media queries that allow to adapt the site based on team size and resolution
Favicons multiple resolutions.
Technical tricks … and many more, that will give you a solid starting point for any mobile site project.
Important to note that this template is planned to give the best experience on smartphones, cell phones and modern high-end equipment, to give support to low-end computers and mobile essentials, it is best to apply other techniques.
How to install Mobile Boilerplate Mobile sites
Installation takes just minutes, all you have to do is download the file available on the official website of Mobile Boilerplate or if a member of github, you can make a fork in your repository
Once downloaded simply extract the file and you have a group of files something like this:
You can copy these files mobile sites to the database direct to your web project and begin working on them immediately. The index.html file and is ready to be the basis for your project, open it and start to edit it from the tag <body>.
In the CSS folder find a file called style.css based on the principles of normalize.css (standarizar standardize and graphic elements for all browsers) but adapted specifically for mobile site browsers.
Finally in the img folder, there are 3 subfolders with the names “h”, “l”, “m” each home favicons and home screens for computers of different resolutions (high, low, medium) you can edit these pictures with your logos and icons for display on the navigation bars and startup screens IOS and Android devices on their mobile sites.
Bonus: you can use Mobile sites Mobile Boilerplate PhoneGap project basis
Mobile Boilerplate already thought about the appearance of a structure and consistency HTML5 file running on mobile devices and that is precisely the basis of a PhoneGap application makes no sense to duplicate the work to create a mobile application.
To use Mobile Boilerplate simply have to add the script PhoneGap to index.html and you can use this template as the basis for robust PhoneGap projects as well as mobile sites that were deployed successfully in multiple screens and platforms.The latest array of article spinner products.