Creating our application framework

With every project, it's important to create a framework that adjusts to your project's needs. It's critical to think about every aspect of the project. From the required document to the team's strengths and weaknesses, it's important we establish a solid foundation that helps us build and adjust accordingly.

Modifying the boilerplate

We'll now modify our boilerplate for the needs of the projects we will be building. For simplicity, we'll remove the following items from the folder:

CHANGELOG.md
crossdomain.xml
README.md
/doc (Directory)

Now that the directory has been cleaned up, it's time to take a look at some of the boilerplate code and customize.

Customizing our markup

First, open up the application in your favorite text editor. Once we've opened up the application in the editor of our choice, let's look at index.html. The index file needs to be cleaned up in order to focus on iPhone Web Application development, and also unused items such as Google Analytics need to be removed. So let's remove some code that is not necessary for us.

Look for the following code:

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js">
<!--<![endif]-->

And modify it to this:

<!DOCTYPE html>
<html class="no-js">

What we've done here is removed detection for IE Mobile. Although this may be helpful for other projects, for us it doesn't really help in creating a fully compatible application just for the iPhone. However, we also need to remove an IEMobile specific meta tag:

<meta http-equiv="cleartype" content="on">

The previous meta tag turns on cleartype (a utility that assists with the rendering of fonts) for the IE mobile. This isn't necessary for us and is not a requirement for our applications.

Now that we've removed some unnecessary markup from our page, we can go ahead and start enabling features that will enhance our application. Look for the following meta tags and enable them, by removing the comments surrounding them:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

These directives inform our application that it can run in fullscreen and they set the status bar to black.

We can also remove the following code from the <head> of the document:

<!-- This script prevents links from opening in Mobile Safari.
https://gist.github.com/1042026 -->
<!--
	<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.
location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.
target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.
indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.
href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->

Once we've removed the previous script, your markup should now look like the following:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <link rel="apple-touch-icon-precomposed" sizes="144x144"
href="img/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
href="img/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/
touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/touch/appletouch-
icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"
content="black"<
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>

Now, we can focus on cleaning up our body. Lucky for us, we only need to remove one thing-Google Analytics, since we will not be focusing on tracking for iPhone Web Apps.

To do this, find the following code and remove it:

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.
getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".googleanalytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
</script>

The only scripts that you should have on the page should be the following:

<script src="js/vendor/zepto.min.js"></script>
<script src="js/helper.js"></script>

Once we've completed the previous steps, our markup should be clean and simple as follows:

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <link rel="apple-touch-icon-precomposed" sizes="144x144"
href="img/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
href="img/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/
touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/touch/appletouch-
icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"
content="black">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
    <body>

	<!-- Add your site or application content here -->

	<script src="js/vendor/zepto.min.js"></script>
	<script src="js/helper.js"></script>
    </body>
</html>

From here, we should examine our stylesheets and scripts for every project and optimize it as much as we can prior to beginning a project. However, this boilerplate that we will be using has been optimized by the community and continuously enhanced with support from many developers, and for our use here, both styles and scripts are good to go. If you are curious, I encourage you to look at the normalize. css file, which contains excellent directives for resetting a page. It would also be beneficial to review the main.css file that has been enhanced with this boilerplate to support mobile devices.

Now, we will move on to establishing our framework.

[Contents] [Next]

Creating our application framework

Modifying the boilerplate

Customizing our markup

In this tutorial: