Video icon 64
Learning to code? Skill up faster with our practical video courses. Start your free trial today.
Advertisement

Designing and Developing for the iPhone from Scratch

by

In this tutorial, we are going to be design a Website for the Mobile Safari Browser (found on the iPhone and the iPod Touch). We will be starting from scratch in Photoshop and work our way, step-by-step, to a finished product complete with an animated jQuery image slider.


Tutorial Details

  • Requirements: iPhone or iPod touch highly recommended. Mac users may also download the iPhone simulator.
  • iPhone Version: 3.1.2

Intro

With millions of iPhone users accessing the web daily, it is crucial for your company or brand to be able to provide mobile. users using the Mobile Safari browser, with a website that is designed for their device. Instead of struggling with small fonts, hard to press links and other website usability issues that come along with a mobile web browser, we can provide our visitors with an interactive experience that they will enjoy.


It is important for us to provide our users with an experience they will enjoy or we will end up frustrating our visitors and possibly even causing them to leave our site and never come back. We will be creating a site that focuses on a few key points. Our site should:

  • Have a font size that is readable even on the small screen of the device.
  • Use links that are styled in a such a way that the user can tell they are clickable without the typical visual cue of the "pointer-cursor".
  • Keep the content short. We should only provide them with the information they would need upon visiting your site from a mobile browser.
  • Keep the overall download sizes small. After all, they are most likely downloading your site over their phone connection.

If you are on a mac, you can download the iPhone SDK from Developer.Apple.com. Signup for a free account with them and download the latest version of the iPhone SDK with comes with the iPhone simulator. A true iPhone or ipod Touch will always be the best solution but the simulator works well for development purposes.


Design Photos in Photoshop

First download this cement texture from Flickr. Bring the image into a Photoshop document sized 320px (width) by 480px (height). Change the background color to #1D1D1D. Change the layer style on the texture to "Multiply" and add a white to black gradient mask.


Right click on a layer and flatten the image. Copy and paste into a new window so we can turn this into a repeating image. Go to Filter>Other>Offset. Set the Horizontal value to +162. Use the healing tool to clean up the problem area. Save the image as a jpg set the quality to 60%.


Open another Photoshop document and set it to 195px (width) by 75px (height). Create two layers each with a line drawn with the line tool. Separate the lines by one pixel. The top line should be white, the bottom a dark grey. Export the image as we did in the previous step. Both images should be saved under a folder named "images"



Coding the Homepage

Now it's time to code the homepage. We are going to add the basic code and then style it in the next step. Save this as index.html. The following code will give us basic html of the homepage and link to a Stylesheet which we will create.

 
	<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<title>Lorum Ipsum Mobile Site</title> 
		<link rel="stylesheet" href="styles.css" type="text/css" /> 
	<body> 
	<h1>Lorum <span>Ipsum</span></h1> 
 
	<div id="menu"> 
 
		<ul> 
			<li class="selected"><a href="index.html">Home</a></li> 
			<li><a href="about.html">About</a></li> 
			<li><a href="contact.html">Contact</a></li> 
		</ul> 
 
	</div> <!-- /menu --> 
 
	<div id="slideshow"> 
		<ul> 
			<li><img src="images/imageslider/img1.jpg" alt="Picture Name" /></li> 
			<li><img src="images/imageslider/img1.jpg" alt="Picture Name" /></li> 
			<li><img src="images/imageslider/img1.jpg" alt="Picture Name" /></li> 
		</ul> 
	</div> <!-- /slideshow --> 
	<h2>Lorem ipsum dolor</h2> 
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure in reprehenderit in voluptate velit esse cillum dolore eu <span id="hidden">fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p> 
 
	<div id="readmore"><a href="#" id="readmore-button" class="readmore">read more...</a></div> 
 
	<div id="footer"> 
		<p id="copyright"> Copyright 2009</p> 
		<p id="sitemap"> 
			<a href="index.html">Home |</a> 
			<a href="about.html">About |</a> 
			<a href="contact.html">Contact</a> 
		</p> 
	</div> <!-- /footer --> 
 
	</body> 
	</html>

Let's add some style by creating a new file named styles.css. The following code will give us style for the html code of the homepage.

 
	html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label{ 
		margin: 0; 
		padding: 0; 
		border: 0; 
		outline: 0; 
		font-size: 100%; 
		vertical-align: baseline; 
		background: transparent; 
	} 
 
	/*  Main Styles  */ 
 
	body{ 
 
		background: #1d1d1d url('images/background.jpg') repeat-x; 
		color: #FFF; 
		font-family: "Arial" ,sans-serif; 
		line-height: 20px; 
		font-size: 13px; 
		-webkit-text-size-adjust: none; 
	} 
 
	p{ 
		padding: 10px 5px; 
	} 
 
	h1{ 
		color: #b5b5b5; 
		font-size: 26px; 
		margin: 10px 5px; 
	} 
		h1 span{ 
			color: #d5ac55; 
		} 
	h2{ 
		color: #d5ac55; 
		font-size: 18px; 
		font-weight: normal; 
		margin-top: 10px; 
		padding-left: 5px; 
	} 
 
	#hidden{ 
		display: none; 
	} 
	.show{ 
		display: inline; 
	} 
	#readmore{ 
		height: 30px; 
	} 
	#readmore-button{ 
		background: #000; 
		color: #d5ac55; 
		display: block; 
		float: right; 
		padding: 5px 7px; 
		text-align: center; 
		text-decoration: none; 
		width: 76px;	 
	}	 
 
	/* Menu Styles */ 
	#menu ul{ 
		border-bottom: 1px solid #FFF; 
		height: 23px; 
		list-style: none; 
		margin: 0 5px; 
	} 
		#menu ul li{ 
			float: left; 
			margin-right: 30px; 
		} 
			#menu ul li a{ 
				color: #FFF; 
				text-decoration: none; 
				text-transform: uppercase; 
			} 
		#menu ul li.selected{ 
			border-bottom: 3px solid #FFF; 
		} 
 
	/*  Sideshow Styles */ 
	#slideshow{ 
		border: 1px solid #786334; 
		border-bottom: 1px solid #22201d; 
		margin-bottom: 20px; 
		margin-top: 10px; 
	} 
		#slideshow ul li{ 
			height: 174px; 
			list-style: none; 
			width: 316px; 
		} 
 
	#controls{ 
		position: absolute; 
		margin-top: -40px; 
		list-style: none; 
	} 
		#controls li{ 
			background: rgb(0,0,0); 
			background: rgba(0,0,0,0.9); 
			border: 2px solid #202020; 
			border-bottom: 1px solid #797979; 
			float: left; 
			text-align: center; 
		} 
			#controls li a{ 
				display: block; 
				color: #FFF; 
				height: 20px; 
				padding: 7px; 
				text-decoration: none; 
				width: 20px; 
			} 
 
	/*  Footer Styles */	 
	#footer{ 
		background: #000; 
		height: 40px; 
		margin-top: 10px; 
	} 
		#footer p#copyright{ 
			float: right; 
			width: 100px; 
		} 
		#footer p#sitemap{ 
			width: 200px; 
		} 
		#footer a{ 
			color: #FFF; 
			text-decoration: none; 
		}

Coding the Slideshow and other jQuery Elements

Save the image of the Fire truck to a folder called "imageslider" inside of the "images" folder. Save the image as img1.jpg. This will be image displayed in the image slider.


Download the Easy Slider 1.7 jQuery Slider and copy the "js" folder into the same folder as our index.html file. Copy the following code into your head tags on the index.html file.

 
		<script src="js/jquery.js" type="text/javascript"></script> 
		<script src="js/easySlider1.7.js" type="text/javascript"></script> 
		<script type="text/javascript"> 
		$(document).ready(function(){	 
			$("#slideshow").easySlider({ 
				auto: 		true,  
				continuous: true, 
				speed:		800, 
				pause:		3000, 
				numeric: 	true 
			}); 
 
				$(".readmore").toggle(function () { 
				$(this).prev('#hidden').addClass("show"); 
				$("#hidden").slideDown("fast"); 
		        $(this).text("...read less"); 
		       }, function() { 
		       	$('#hidden').removeClass("show"); 
		       	$("#hidden").slideUp("fast"); 
		        $(this).text("read more...") 
		        $(this).prev("p").slideUp("fast"); 
 
		    }); 
 
		});	 
	</script>

You will now have a functioning homepage.


To remove the address bar, replace the body tag with the following:

 
		<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

And add the following meta tag to your head to handle zooming and text resizing issues.

 
		<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;">

Creating the About Page

Copy the index.html page to create the about page. Remove the code specific to the jQuery slider. Add the follow under the read more button to create the "sidebar".

 
	<div id="sidebar"> 
 
		<h2>about me</h2> 
		<p class="fade"> 
			<span class="contactinfo">p <a href="tel:1234567890">123.456.7890</a></span> 
			<span class="contactinfo">e <a href="mailto:email@email.com">email@email.com</a></span> 
			<span class="contactinfo">a <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=New+York+City&sll=37.0625,-95.677068&sspn=41.139534,68.554688&ie=UTF8&hq=&hnear=New+York&z=11&iwloc=A">123 Someplace ST</a></span> 
 
 
		<br /><img src="images/cat.jpg" alt="Cat" align="left" />fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
		<h2>social media</h2> 
		<p class="fade">fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
		<ul id="social-links"> 
			<li><a target="_blank" href="http://m.twitter.com/tylorskory">Twitter</a></li> 
			<li><a href="#">Facebook</a></li> 
			<li><a target="_blank" href="#">LinkedIn</a></li> 
			<li><a href="#">YouTube</a></li> 
			<li><a href="#">Screenr</a></li> 
			<li><a href="#">MySpace</a></li> 
		</ul> 
 
		<br class="clear" /> 
 
	</div> <!-- /sidebar -->

Save the following image to your images folder. Name it cat.jpg.


Next it's time to add some style to the elements inside of the sidebar. We will need to do that with some CSS. Add the following to your styles.css file.

 
	/* Sidebar Styles */ 
 
	#sidebar{ 
		background: -webkit-gradient(linear, left top, left bottom,  
					color-stop(0.0, #e1d9ce),  
					color-stop(0.1, #e6e6e6)); 
		color: #000; 
		margin-top: 10px; 
		padding: 0px 5px 5px 5px; 
	} 
		#sidebar p.fade{ 
			background: url('images/fade.jpg') repeat-x; 
		} 
		#sidebar h2{ 
			color: #000; 
			font-size: 18px; 
			font-weight: normal; 
			padding: 7px 0; 
		} 
		#sidebar img{ 
			border: 1px solid #FFF; 
			margin: 5px 10px; 
		} 
 
	.contactinfo{ 
		border-bottom: 3px dotted #656565; 
		display: block; 
		color: #2f2f2f; 
		font-size: 20px; 
		margin-left: 10px; 
	} 
		.contactinfo a{ 
			display: block; 
			background: #646363; 
			color: #efaa19; 
			float: right; 
			text-decoration: none; 
		} 
 
	#social-links{ 
		list-style: square; 
		padding: 10px 0 10px 20px; 
		width: 95%; 
	} 
		#social-links li{ 
			float: right; 
			width: 33%; 
		} 
			#social-links li a{ 
				background: #646363; 
				color: #efaa19; 
				padding: 2px 4px; 
				text-decoration: none; 
			} 
 
	.clear{ 
		clear: both; 
	}


Coding the Contact Page

Copy the about page and name it contact.html. Add the following code to the head of your html. It is code to extend the google map using their API. You will need a Google Maps API key if you are going to be using this on a live server. You can use an online service to produce the code if you are not comfortable writing it yourself.

 
		 <style type="text/css"> 
	    v\:* { 
	      behavior:url(#default#VML); 
	    } 
	    </style> 
 
		<script src="js/jquery.js" type="text/javascript"></script> 
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg" 
	            type="text/javascript"></script> 
	    <script type="text/javascript"> 
	    //<![CDATA[ 
	    // Google Map code generator 
	    // Mobilefish.com 
	    // http://www.mobilefish.com/services/googlemap/googlemap.php 
	    var map = null; 
	    function load() { 
	      if (GBrowserIsCompatible()) { 
	        map = new GMap2(document.getElementById('map'), {draggableCursor: 'default', draggingCursor: 'move'}); 
	        map.setCenter(new GLatLng(52.1857,5.3899), 5); 
	        map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_LEFT)); 
	        map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT)); 
	        map.setMapType(G_NORMAL_MAP); 
	        map.enableDoubleClickZoom(); 
	        keyboardhandler = new GKeyboardHandler(map); 
	      } 
	    } 
	    //]]> 
		</script>

Simply add the following code where you would like your map to appear.

 
		<div id="map" style="width:100%; height:500px"></div>

Feel free to update your menu to fit each page by moving the "selected" class to the appropriate list item.

For further research feel free to look into the Engage Interactive article as well as the Nettuts+ tutorial.

Advertisement