HTML5 Quickstart Template – Mobile Viewport, CSS3, Google Font, Latest jQuery – All Ready


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

, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *