How To Build A Website For The IPhone

October 31, 2011

Everywhere you look you see people playing on their smart phones. Where it is checking their Facebook, writing their latest tweet, or even checking out near by restaurants. By creating a mobile website it makes it easier for viewers to view your website without all that annoying scrolling. You can get your message across with only one page.

As we promised we created this tutorial on how to create a mobile website from beginning to end. Using Photoshop to create our layout and bringing it into Dreamweaver to create the magic. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device – whether it be landscape or portrait. To accomplish this we will be using javascript, and some Safari mobile specific CSS tags.

To make this easy, I have provided a mobile template for you to download, which means that all we will have to do is set up redirects for mobile browsers. You can customize the template landing page however you see fit – it’s just standard HTML/CSS. Or you can follow bellow to see how this is done.

Step 1: Getting Started

We’re first going to start off with creating the PSD file that fits the design for your site. The size we are using is 320 x 626px( standard iPhone size is 320 x 480px. Height can change to whatever size you want. Just keep in mind the higher the number the more scrolling is involved)

Now we create the look and feel of the site.You can create any look and feel you like. But for this tutorial we are using the contact page for our mobile website.

Now this is the last step in Photoshop. Slice or crop out all our main elements that we want to bring into Dreamweaver ( or any HTML editor you like). I prefer to crop my images so I have better control over what I want to save.

Step 2: The HTML

We will start working on the iPhone HTML page; the code below has some key differences from a regular XHTML transitional document.

<!DOCTYPE html>
<html>
<head>
<title>Final Elements Studio</title>
<meta name="author" content="Final Elements" />
<meta name="copyright" content="copyright 2011 www.finalelements.com" />
<meta name="description" content="Final Elements Studio" />
<meta name = "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">

<link rel="apple-touch-icon" href="images/myiphone_ico.png"/>
<style type="text/css">@import url("iphone.css");</style>
</head>

The code above explained line by line:

Line 1 – 7: This is standard HTML5 Transitional Doctype.

Line 8 -9 This line is the iphone specific. It sets initial values for the viewport in the device’s browser.

Width= states the width of the page to be the same width of the device
Initial = maximum scale set the starting point for the zoom of the page

Line 11 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. You do not need to add the shine or corners as the iPhone will do that for you.

Line 12: Standard CSS function

Step 3: Laying Out The Divs

We now continue with the rest of the html before we add any javascript functions. Code the site the same way you do with a website.

</pre>
<div id="page_wrapper"><header>
<h1>Final Elements Studio | Digital Creative Agency</h1>
<div id="logo">
<h2><a href="index.html">Final Elements Studio</a></h2>
</div>
</header><nav id="mainNav"> <!--
<ul>
	<li> Nav will go here</li>
</ul>
    -->
</nav>
<div id="bodyWrapper"><article>We are a digital creative agency located in Long Island, New York. We strive to find creative solutions for our clients while pushing the envelope on what technology can do. Our work includes website design, print design, logo development, and helping our clients market themselves online.</article><nav class="contactPanel">
<ul>
	<li class="call"><a href="tel:15167921426">Call</a></li>
	<li class="email"><a href="mailto:info@finalelements.com">Email</a></li>
</ul>
</nav></div>
<footer><img src="images/slogin.png" alt="" width="294" height="56" />
<div id="copyright">© 2011 Final Elements Studio, LLC</div>
<nav id="footerNav">
<ul>
	<li><a class="full-site" href="http://finalelements.com/">Continue to Full Site</a></li>
</ul>
</nav></footer></div>
<pre>

Step 3: Clickable Phone Number

First, most handheld devices include a phone, so let’s make our phone numbers clickable

On line 16 <li class=”call”><a href=”tel:15167921426″>Call</a></li>

Now mobile users can click this number to call it, however there are a few things to note. First, the number in the actual link starts with a 1 which is important since the web is international (1 is the US country code).

Second, this link is clickable whether or not the user has a mobile device. Since we’re not using the server-side method, our best option is to simply hide the fact that the number is clickable via CSS. So use the call class to disable the link styling in your screen stylesheet, and then include it again for mobile.

Step 4: The CSS

The CSS is very important in switching the content. Using classes and ID’s we can make sure that only the correct content is being displayed. First though, we need to set up the page so that none of the iPhone’s default styles will interfere.

/*-----------------------------
RESET STYLES
-----------------------------*/

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none; /* This stops the iPhone from automatically changing the size of the text when you flip the phone */
	background:#000 url(images/bg.png) repeat;
}
body{
	font-size: 10px;
}
body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}
ul, li, ol, dl, dd, dt{
	list-style:none;
	padding:0;
	margin:0;
	}
a{
	text-decoration:none;
	}

/*-----------------------------
	SITE SPECIFIC STYLES
-----------------------------*/

body{
	background:#000;
	font-family: Helvetica; /* Helvetica is on the iPhone already, so you may as well take advantage */
	color:#999;
	}
p{
	font-size:12px;
	padding-bottom:8px;
	}
a{
	color:#E30000;
	text-decoration:none;
	}

/*-----------------------------
	HEADINGS
-----------------------------*/

h1{
	display:block;
	width:112px;
	height:41px;
	background-image:url(images/logo.gif);
	text-indent:-5000px;
	}

/*-----------------------------
	BASIC LAYOUT
-----------------------------*/

#page_wrapper{
	padding-top:0px;
	overflow:auto;
	width:320px;
	}
header{
	background:url(images/headerBg.png) repeat-x;
	height:74px;

}
header h1{
	display:block;
	width:181px;
	height:54px;
	background:url(images/finalElements.png) no-repeat;
	text-indent:-5000px;
	float:right;
	margin-top:10px;
	margin-right:20px;
}
#logo{
	background:#E30000;
	width:98px;
	height:89px;
	position:absolute;
	z-index:4px;
}
#logo h2 a{
	display:block;
	width:98px;
	height:89px;
	background:url(images/logo.png) #E30000 no-repeat;
	text-indent:-5000px;
}
#banner{
	background:url(images/banner.png) no-repeat;
	width:320px;
	height:154px;
	border-bottom:3px solid #E30000;
}
nav#mainNav{
	background:url(images/navBg.png) no-repeat;
	width:320px;
	height:49px;
}
nav#mainNav li{
	float:left;
	padding-top:10px;
}

.home a{
	background:url(images/home.png) no-repeat;
	width:79px;
	height:27px;
	display:block;
	text-indent:-5000px;
	padding-left:20px;
}
.about a{
	background:url(images/about.png) no-repeat;
	width:104px;
	height:27px;
	display:block;
	text-indent:-5000px;
	padding-left:20px;
}
.contact a{
	background:url(images/contact.png) no-repeat;
	width:94px;
	height:27px;
	display:block;
	text-indent:-5000px;
}
#bodyWrapper{
	padding:5px;
}
article{
	padding:10px 10px 0px 10px;
}
article h2{
	background:url(images/services.png) no-repeat;
	width:294px;
	height:37px;
	display:block;
	text-indent:-5000px;
	margin-top:10px;
}
article h3{
	background:url(images/social.png) no-repeat;
	width:294px;
	height:37px;
	display:block;
	text-indent:-5000px;
	margin-top:10px;
}
article li{
	padding:10px;
	border-bottom:1px solid #FFF;
	font-size:14px;

}
nav.contactPanel{
	padding:10px 10px 0px 10px;
}
nav.contactPanel li{
	float:left;
	padding-top:5px;
}
.call a{
	background:url(images/callus.png) no-repeat;
	width:134px;
	height:39px;
	text-indent:-5000px;
	display:block;
	padding-left:10px;

}
.email a{
	background:url(images/email.png) no-repeat;
	width:134px;
	height:39px;
	text-indent:-5000px;
	display:block;

}
footer{
	padding:10px 0px 0px 0px;
}
footer img{
	padding-top:20px;
	padding-left:10px;
}
#copyright{
	text-align:center;
	padding-bottom:10px;
}
nav#footerNav {
	background:url(images/footerbg.png) no-repeat;
	height:33px;
}
nav#footerNav li{
	float:left;
	display:block;
	padding-left:20px;
	padding-top:10px;
	text-align:center;
}
#social {
	margin-bottom:20px;
}
#social ul{
	display:block;
}
#social li a{
	float:left;
	display:block;
	margin-bottom:20px;
}
.facebook a{
	background:url(images/facebook.png) no-repeat;
	width:74px;
	height:55px;
	text-indent:-5000px;
}
.twitter a{
	background:url(images/twitter.png) no-repeat;
	width:77px;
	height:55px;
	text-indent:-5000px;
}
.flickr a{
	background:url(images/flickr.png) no-repeat;
	width:88px;
	height:55px;
	text-indent:-5000px;
}
.digg a{
	background:url(images/digg.png) no-repeat;
	width:70px;
	height:55px;
	text-indent:-5000px;
}

Step 4: The Javascript

The following javascript detects and sets the iPhone’s viewport orientation by evaluating the innerWidth property of the window object and setting the orient attribute of the body element at regular intervals:

<script type="text/javascript">// <![CDATA[
		var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};
<script type="text/javascript">
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

// ]]></script>

Currentwidth ==320 sets the size of the website allowing Safari to stretch the site if it is displayed in portrait or landscape.

Step 6: The Removing the toolbar in Safari

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

<script type="text/javascript">// <![CDATA[
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
// ]]></script>

Now to make this work we need to add a function into the <body> tag.

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

Step 7: Setting it all up

Now the last part which has two steps. Creating the sub folder and redirecting the main site to the mobile site. First create the sub folder and name it m (stand for mobile, a lot of company use this folder name for redirecting). From here we place all our files that we created for the iphone website (images, js, and html).

Now to make the mobile website work we have to tell our website to redirect. By doing so we will need to add a JavaScript code to the index of your original site. JavaScript file can be downloaded here.

<script type="text/javascript" src="js/redirection_mobile.min.js"></script><script type="text/javascript">// <![CDATA[
SA.redirection_mobile ({param:"isDefault", mobile_prefix : "m", cookie_hours : "1" });
// ]]></script>

Line 3 redirects the site to the mobile sub folder, here we called our folder “m”. This means when the iPhone loads up your website it automatically redirects it to m.domainname.com ( for us m.finalelements.com).

Step 8: Conclusion

As the worldwide shift to mobile continues, handheld device support will become increasingly important. Hopefully this article has left you with both the desire and toolset necessary to make mobile support a reality in your websites.

Although mobile occupies a significant chunk of global web browsing, the technology is still very much in its infancy. Just as standards emerged for desktop browsing, new standards are emerging to unify mobile browsers. This means that the techniques described in this article are only temporary, and it is your responsibility to stay on top of this ever-changing technology.

Final Elements is a digital creative agency located in Long Island, New York. We strive on finding creative solutions for our clients while pushing the envelope on what technology can do. Our work involves designing websites, print, logo development, and helping our clients market themselves online.

Categories: Case Study,Insight,Resources

Tags: Design, Insight, Mobile, Tutorials

Written by Anthony Fabrizio

Anthony Fabrizio did his undergraduate at Briarcliffe College. His career started in 2005 doing freelance work for company’s (magazine ads, business cards, logos, and websites). Later on he grew more into photography and mix media painting.

http://twitter.com/simdif SimpleDifferent

This is great information but what about a little something for those of us who don’t code and don’t really know where to start when it comes to getting out sites optimized for the web. There are now some great tools out there for non-professionals (and professionals) to create websites and not have to think about code or optimization for mobile devices because all the hard work has been taken care of.

Specifically I am thinking about sites like Simple Different
http://www.simple-different.com
where the resulting websites are so simple that no extra optimization for mobile devices is needed. The sites just look great whether they are viewed from a computer, or a mobile device like the iPad or iPhone.

Its not for everyone but it is a very good way to forget about what has traditionally been the key to creating websites, the code, and focus on what is really important, the content and its organization.
Anthony Fabrizio

We are very big with the traditionally way in creating website. To us we have more freedom control over what we create and how it functions. We should never be limited to what we do on the web.

As for the link you shared I am not to fimliar with it but it does seem simple for people who are unfamiliar with coding. By using those type of sites, to us you are stuck in a template world with limited selections. But for people who are starting out and want to create there own website those types of sites will be perfect for them.

Thank you for sharing that site with us.
Anonymous

We are very big with the traditionally way in creating website. To us we have more freedom control over what we create and how it functions. We should never be limited to what we do on the web.

As for the link you shared I am not to fimliar with it but it does seem simple for people who are unfamiliar with coding. By using those type of sites, to us you are stuck in a template world with limited selections. But for people who are starting out and want to create there own website those types of sites will be perfect for them.

Thank you for sharing that site with us.
Anonymous

We are very big with the traditionally way in creating website. To us we have more freedom control over what we create and how it functions. We should never be limited to what we do on the web.

As for the link you shared I am not to fimliar with it but it does seem simple for people who are unfamiliar with coding. By using those type of sites, to us you are stuck in a template world with limited selections. But for people who are starting out and want to create there own website those types of sites will be perfect for them.

Thank you for sharing that site with us.

Quick Links

Navigation

Recent Posts

Archives

Step 1: Getting Started

Step 2: The HTML

Step 3: Laying Out The Divs

Step 3: Clickable Phone Number

Step 4: The CSS

Step 4: The Javascript

Step 6: The Removing the toolbar in Safari

Step 7: Setting it all up

Step 8: Conclusion

Services

Navigation

A Little About Final Elements

Our Slogan

Follow Us

Contact Us

Quick Links

Navigation

Browse Topics

Recent Posts

Archives

Step 1: Getting Started

Step 2: The HTML

Step 3: Laying Out The Divs

Step 3: Clickable Phone Number

Step 4: The CSS

Step 4: The Javascript

Step 6: The Removing the toolbar in Safari

Step 7: Setting it all up

Step 8: Conclusion

Services

Navigation

A Little About Final Elements

Our Slogan

Follow Us

Contact Us