Creating a mobile website for the iphone

Posted by David on Jul 12th, 2010

The iPhone is one of the most popular smart phones allowing an easy way of connecting to the Internet and visiting websites, it would be silly not to embrace this technology and make sure your website is capable.

Creating a Mobile website for the iphone

The iPhone does not like Adobe Flash, but that is not a problem as the new HTML 5 standards allow many content types such as video to be displayed without the need for this old and cumbersome technology.

Also JQuery is now enhancing websites and doing some amazing things originally only possible using Flash, slideshows and popup modals all look fantastic when created with JQuery, and the advantage is that the iPhone loves JQuery.

Starting your mobile steps

The first thing to do when creating a mobile version of your site is to reduce everything to its essence, navigation is key so start there.

Make a list of all your pages that need converting to mobile, not all information may be required depending on what you want your mobile site to achieve.

Navigation

List your menu navigation options.

If you need sub menus then you may want to use a nice jQuery slider to make the menus slide open nice and smoothly, while not cluttering up the display.

Layout and code

As the mobile devices are slim everything will probably look better in one column.

The iPhone standard uses a window size of 320 x 480 and this can be displayed in two modes; portrait and landscape, so you need to work with both widths to get the best from your site.

In the header section use viewport meta name to specify the layout and wether the page is scalable or not.

In the body add your container

Inside the container add your content.

First add your header section with logo and then your footer with information and quick contact information.

<h1> My Website </h1>

The H1 tag can then be configured using your Style Sheet to display a logo etc.

Follow this by your menu with links to your specific pages, this can then be used to navigate to each of the pages once you have created them.

I always use a bulleted list to make it easy to modify and add features.

<ul id="mainmenu">
<li class="topmenu"><a href="web_mobile.php">Web Design </a></li>
<li class="midmenu"><a href="about_mobile.php">About us </a></li>
<li class="endmenu"><a href="contact_mobile.php">Contact Us </a></li>
</ul>

Then add your area for content.

<div class="content">
CONTENT GOES HERE
</div>

Finally add your footer information.

<div id="footer">
FOOTER DETAILS HERE
</div>

Once you have created one page you can either use that as a template or save this page several times for each page you require, then edit each of these pages to add your content.

designers work differently than developers so what you do next is up to you, but I tend to ensure the content is displaying on the appropriate pages and then work on my style sheet, but some designers like to work on the style sheet first and then add their content, either way is fine.

Test and retest is the key, and if you have a mobile device such as an iPhone then try it live as you go to ensure everything works as you expect.

Final stage and technical bits

I use PHP as my primary web server and this is great for working out what browser is being used and what to do about it.

This simple piece of code determines whether the browser being used is an iphone.

$page = $_SERVER['REQUEST_URI'];
// Get the current page being viewed

$agent = $_SERVER['HTTP_USER_AGENT'];
// Get the browser agent

// check if the browser agent contains the string "iphone"
if (strstr($platform, "iphone"))
{
// if it does then check if a mobile version of the page exists
$inc = "mobile_" . $page;
if (file_exists($inc))
{
// if the page does exist then include it
include($inc);
// and stop
exit();
}
}

Placing this code on the index page will look for the web page mobile_index.php and if it exists it will load that version.

There are a few alternatives such as using sub domains like i.mydomain.com and create a standalone set of pages for the iphone or using .htaccess to determine browser type and loading pages appropriately.

View our new Mobile site at www.dradept.com/index_mobile.php and please leave us your comments below.

if you would like your site converted to a mobile site specifically for the iphone or other mobile device then Contact us

| SHOW ALL | PREV | NEXT |

COMMENTS

JUL

Christina

13th July 2010

11:24 - 11:24

Looking good. My PC doesn't like anything Adobe and neither does my MAC!

Now you're telling me the iphone doesn't like it. About time Adobe sorted itself out.

I'll let you do EssexSEO mobile website.