iPhone App Icon
First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.
Startup Screen
The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
HTML 5 page
HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>tony is here iPhone web app</title>
<link rel="stylesheet" href="html5css.css">
<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
<!-- Prompt user to install on iphone if accessed through mobile safari -->
<script type="text/javascript">
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}
</script>
</head>
<body>
<section id="wrapper">
<header>
<h1>Tony Phillips SharePoint and Web Design Blog</h1>
</header>
<article>
<section>
<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
</section>
</article>
</section>
</body>
</html>
You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.
<link rel="apple-touch-icon" href="images/tony-icon.jpg" /> <link rel="apple-touch-startup-image" href="images/tonystartup.png" />
The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <meta name="apple-mobile-web-app-capable" content="yes">
The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!
JavaScript
You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.
// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}
Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!
To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!