[Mobile Development] Tips for Building Mobile Web Sites
I thought I’d share some tips/tricks that I’ve acquired as a result of the mobile web development classes I’ve participated in for my Master’s Program at NYU. I’ve built a couple of mobile web sites by now, and these lines of code and URLs for frameworks and tutorials have been very useful. For the most part the code here is open source and freely available on the web. Leave me some comments if you find these useful!
The php code below can be included in the index page of your website. It is intended to identify whether/not the visitor is accessing your site using either an iPhone, iPod Touch or an Android. If it is one of those devices, the script will re-direct the user to what can be your mobile-optimized website. Otherwise it will do nothing.
<?php
if((strpos($_SERVER['HTTP_USER_AGENT'], ‘iPhone’) !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'], ‘iPod’) !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],’Android’) !== FALSE) && !isset($_GET['noiphone'])) {header(‘Location: http://putyourwebsiteaddresshere.com’);}
php>
Adding this code below between the <head></head> section of the HTML for your mobile website will assist in optimizing the website for display in iPhone/Android/webkit resolution:
<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Adding this code below between the <head></head> section of the HTML for your mobile web site will allow you to add an icon to the iPhone home screen such that access to the website can be obtained through the home screen of the iPhone.
<link rel=”apple-touch-icon” href=”http://yourdomainhere.com />
This tutorial shows how to make and the save the icon and the appropriate size and file type (45×45 and .png)
http://www.askdavetaylor.com/how_to_create_custom_apple_iphone_website_icon.html
Adding this code below between the <head></head> section of the HTML for your mobile web site will hide the web browser bar from the screen and thus, make it appear even more like a native app:
<script type=”text/javascript”>
<!– <![CDATA[/*http://ajaxian.com/archives/iphone-web-development-tips-and-official-documentation-released */
window.onload = function() { setTimeout(function(){window.scrollTo(0, 1);}, 100);}
// ]]> –> </script>
The link below provides an easy-to-use open source CSS framework that offers the ability to stylize a mobile website to look and feel like an iPhone/Android App. I’ve used it for a couple of projects in my Master’s Program at NYU. There are a few others out there, but this one has been the easiest I’ve found.
To boot, there are now open source development kits that allow you to build an app using traditional web languages such as HTML, Javascrip, CSS and then port that site into the development kit which will wrap the other necessary layers around it to function as a iPhone app that can be submitted to Apple for approval in their App store. Here are examples of two available
http://phonegap.com/
http://www.informit.com/store/product.aspx?isbn=0321604555
Maty reynold
Can I link this post from my website?