How to Convert a Website to an iPhone
More and more websites are seeing an increase in traffic from mobile browsers, specifically Mobile Safari, which runs on the iPhone and iPod touch. While Mobile Safari is quite capable of displaying websites designed for a standard browser, there are time when detail is lost because of the reduced size.
It is possible to design a website so that nothing is lost to iPhone visitors by following a taking a few steps to modify the existing site.
Other People Are Reading
Things You'll Need
- iPhone or Mobile Safari browser
- Text editor or web design software
- Internet connection
- FTP program
Instructions
-
-
1
Remove any unnecessary Flash content. The Mobile Safari browser is incapable of displaying Flash movies. Any content that was in Flash should be converted to a text format for your visitors to read.
-
2
Use your FTP program to download your site's main CSS file from your web server. Once you have this file, open it with your web design software or text editor and paste the following code to hide the navigation elements:
@media only screen and (max-device-width: 480px) {
.navigation {
display: none;
}
}Save this file.
-
-
3
Upload the CSS file you just modified to your web server.
-
4
Download the HTML files for the web pages you wish to convert to the iPhone's browser. On each of these pages, insert the following code to display the navigation elements in Internet Explorer:
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->Save these files and upload them back to your web server using your FTP program.
-
5
Create a new file called iPhone.css. This will contain the CSS elements for the Mobile Safari browser. You can use CSS to style your pages in any way you see fit, but it must contain these lines:
.navigation {
display: none;
}Save this file and upload it back to your server
-
6
Test your modified webpages in the different web browsers. Make sure to test how the site is displayed on an iPhone or by using the iPhone simulator (see Resources).
-
1
Tips & Warnings
When designing your pages, set the width to a percentage rather than a set pixel width.
Make sure to include the code that tells Internet Explorer to include navigation elements. If this is left out, some versions of the browser will ignore these elements just as the Mobile Safari browser will.
