So I’ve been developing a few websites mainly to be viewed on iPhones and iPods and this has raised several issues. Obviously you have to develop for mobile browsers such as safari which runs on iPhones or iPods and develop accordingly for this browser and the unique screen resolutions used on mobile devices. In this article I’m going to look at, what I feel, are the most important code snippets you’ll need to get started developing for iPhones or iPods.
Detect iPhones
First off we need to be able to detect iPhones in order to develop for them, after all we don’t want to develop solely for iPhones so we need know when an iPhone is viewing the page to make the relevant adjustments.
PHP
To detect iPhones in PHP use the folowing code:
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
//TODO: Enter your iPhone/iPod code here
}
JavaScript
To detect iPhones in JavaScript use the folowing code:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
//TODO: Enter your iPhone/iPod code here
}
Source: http://davidwalsh.name/detect-iphone
Define Viewport for iPhone
This is an important feature to include in all your iPhone or iPod enabled pages, without this your page will open as if its zoomed out, trust me its annoying. To stop this from happening you need to include width=device-width to tell safari that the website is the same width as the iPhone Screen, to do this simply include this meta tag in your pages header:
<meta name="viewport" content="width=device-width;>
if you are developing and iPhone only page you can also restrict the user from scaling the page and messing up your nice layout, to do this set the initial-scale & maximum-scale values to 1.0:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Source: engageinteractive.co.uk/../tutorial-building-a-website-for-the-iphone/
Adding an iPhone home screen icon
When someone adds a webpage to their home screen on the iPhone then a new icon is generated so that the user can quickly access the page. We can choose what that icon is by setting rel=”apple-touch-icon” to the desired icon. First you need to design a relevant icon, it needs to be in .PNG format and 57px by 57px. As for the code simply add this to your header replacing the link with the link to your icon file:
<rel="apple-touch-icon" href="images/template/engage.png"/>
Source: engageinteractive.co.uk/../tutorial-building-a-website-for-the-iphone/
Common iPhone page layout
Most pages developed for iPhones have a single column structure with a floating width that contains three main sections, the header, content and footer. This layout is used by many websites including Flickr, here is a breakdown of the iPhone Flickr page:
Source: woorkup.com/…/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/
A simple example of how to code this simple layout can be seen below, note we never set a relative width in the CSS, this this may stop the page from filling the iPhones screen:
CSS:
#header{
background:#0CF;
}
#content{
background:#CCC;
height:200px;
}
#footer{
background:#0CF;
}
HTML:
<body> <div id="header"> <center>Header</center> </div> <div id="content"> <center>Content</center> </div> <div id="footer"> <center>Footer</center> </div> </body>
Common iPhone page NavBar
Most iPhone pages have a header that often contains a logo and a navigation bar. A navigation bar is an important part of any page, without it the users will be stuck on one page, and we don’t want that. Here is a good example of a navigation bar to use in your iPhone page headers:
EXAMPLE :
CSS:
#header{
height:25px;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
#nav{position:relative;line-height:14px}
#nav_main{height:30px;color:#111}
#nav_main li{float:left;width:25%;margin:2px 0 0 -1px;background:#f3f3f3;border:1px solid #e3e3e3;border-width:0 0 1px 1px;text-align:center}
#nav_main li.first{border-left:none}
#nav_main li.selected{z-index:10;margin-top:0;margin-left:-2px;background:#fff;border-width:1px;border-bottom:1px solid #fff;font-weight:bold}
#nav_main li.last.selected{border-right:none}
#nav_main li a{display:block;padding:6px 0 7px}
#nav_main li.selected a{padding-top:7px;color:#000}
HTML:
<div id="header">
<div id="logo">
<img src="" width="100" height="30" alt="LOGO">
</div>
<div id="nav">
<ul id="nav_main">
<li id="activity-tab"><a href="/activity/" >Activity</a></li>
<li id="you-tab"><a href="/photos/tyleruk2000/" >You</a></li>
<li id="contacts-tab"><a href="/people/" >Contacts</a></li>
<li id="more-tab"><a href="/more">More</a></li>
</ul>
</div>
</div>
Starter iPhone Page Template
This is a very simple template I put together to get you started creating iPhone websites, it has a logo in the header, a simple Navigation bar and a simple footer:
EXAMPLE :
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPhoneStartTemplate</title>
<style>
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
#nav{position:relative;line-height:14px;}
#nav_main{height:30px;color:#111}
#nav_main li{float:left;width:25%;margin:2px 0 0 -1px;background:#f3f3f3;border:1px solid #e3e3e3;border-width:0 0 1px 1px;text-align:center}
#nav_main li.first{border-left:none}
#nav_main li.selected{z-index:10;margin-top:0;margin-left:-2px;background:#fff;border-width:1px;border-bottom:1px solid #fff;font-weight:bold}
#nav_main li.last.selected{border-right:none}
#nav_main li a{display:block;padding:6px 0 7px}
#nav_main li.selected a{padding-top:7px;color:#000}
#header{background:#f3f3f3;}
#content{background:#f7f7f7;border-width:1px;border-bottom:1px solid #fff;}
#footer{background:#f3f3f3;border-width:1px;border-top:1px solid #DDD;font-size:x-small;height:31px;}
#logo.footer{float:left;}
#footer_nav{float:right;font-size:x-small; margin-top:8px; margin-right:5px;}
</style>
</head>
<body>
<!----------------------START OF HEADER---------------------->
<div id="header" class="toolbar">
<div id="logo">
<img src="" width="100" height="30" alt="LOGO">
</div>
<div id="nav">
<ul id="nav_main">
<li class="first"><a href="/activity/" >Activity</a></li>
<li><a href="/photos/" >You</a></li>
<li><a href="/people/" >Contacts</a></li>
<li class="last"><a href="/more">More</a></li>
</ul>
</div>
</div>
<!----------------------START OF MAIN CONTENT---------------------->
<div id="content">
<p>Ve da aspetta deserta purezza porpora. Ci ricomincia emergevano mi inebriarti persuadere riprodurre trascinato. Cosi nevi far sul qui dita ella. Rote vero mani un pare me teco. Ferro ma ci su volto da umile. Sapro prima prime tue getti manca mia. Ardi sara dara sul tele tra meco. </p>
</div>
<!----------------------START OF FOOTER---------------------->
<div id="footer">
<div id="logo" class="footer"><img src="" width="100" height="30" alt="LOGO"></div>
<div id="footer_nav"><span style="text-align:right"><a href="/activity/">HOME</a> | <a href="/photos/">TOP</a> | <a href="/people/">PRINT</a> | <a href="/forum/">FORUM</a> | <a href="/about/">ABOUT</a></div>
</div>
</body>
</html>
Screen Resolution
This is important to know as if you’re using pictures or static dimensions you don’t want your content to spill over the edge of the screen. This isn’t so much of a problem if your content is rather high as users are used to scrolling up and down however if you include wide content you start messing with the zoom level and the page may not display as you originally as you thought. Another difficulty is that there are two types of iPhone resolution, that of the iPhone and the iPhone 4 so make sure you test your sites on both resolutions, they are:
iPhone: 320×480
iPhone 4: 640×960
Inspiration
Here I have included my favourite websites optimized for the iPhone, though this isn’t realy a tip for developing websites for iPhones its always helpful to look at other sites to see if you can learn something from how they do it. Notice none of these sites (apart from flicker) don’t use a lot of images, this is to make much cleaner and user friendly on the small screens and a lot quicker to load over the relatively slow internet connection that iphones have:
I hope you find this information helpful, if you have any comments or questions please leave a comment.
