Whenever I want to quickly make a webpage, I don’t want to have to build the whole page everytime. Here is my starter code for an HTML5 page. The key points are :
- HTML5 Doctype – Ready
- Viewport and Mobile – Ready
- Title tags, Character Set, Keyword and Description Meta, Favicon, Stylesheet tags – Ready
- Google Font – Ready
- Javascript and jQuery – Ready
- jQuery CDN for lastest version of jQuery – Ready
- HTML5 Shiv for IE9 and less – Ready
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Starter Template</title>
<meta name="keywords" content="HTML5,quickstart,template">
<meta name="description" content="HTML5 Quickstart Template">
<meta name="author" content="GetPowers Coding">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/quickstyle.css">
<style>
/* Your CSS3 styling here */
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--- Observable Content Here -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
/* Javascript and jQuery here */
});
</script>
</body>
</html>
It’s useful to have some quick CSS, but not something bloated. Here is my CSS template as well. I set the width to 90% so that it will quickly work on mobile or full screen.
/* quickstyle.css */
body {
width:90%;
margin:10px auto;
font-family:'Open Sans',verdana,arial;
font-size:14px;
color:#111;
background-color:#fff;
}
If you want to make your site feel more like a web application. Try adding the following:
<meta name="apple-mobile-web-app-title" content="DriversTestInfo"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <link rel="apple-touch-startup-image" href="/startup-image.png"> <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> <link rel="icon" sizes="196x196" href="nice-highres.png"> <link rel="icon" sizes="128x128" href="niceicon.png">
For Chrome and iOS web application details try the following:
https://developer.chrome.com/multidevice/android/installtohomescreen#comparison-to-ios
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
http://blog.teamtreehouse.com/optimizing-mobile-web-apps-ios
https://gist.github.com/tfausak/2222823