Design your website that comptible with iPhone

By admin on Feb 24, 2010 with Comments 2

Design your website that comptible with iPhone

The present world is running in mobile phones than the computers. Nowadays all types of mobile phones providing maximum functionalities browsing,chat, mobile office and many. It works as like autumn computers. So it became necessary to the web designers to developer their sites compatible with the mobile phones. Most of the social networking designed their sites fro mobile phones too. And they providing the separate web address for mobile browsing www.m.domainname.com like this.

Some of the sites load their sites in the same address but loads the css design according to model of the mobile phones from which the user accessing the site. www.gmail.com changes the design according to the model of the phone.

Here just we going to see how to develop a site that compatible for iPhone.

Some great thing in all apple products is, apple itself provides all kind of APIs for all kind of functionalities. They won’t depends on third party softwares or libraries. For the css design and html design for iPhone apple itself gave one library “iUI Library” which consist of iPhone.css. This css takes care of your html elements and shapes them according to the iPhone UI. There are set of some rules to be followed and some div to be added to get the design as like iPhone components.

At first just get download the iPhone.css

add the style sheet in your html code

1.The below code to set the title of the page in iPhone browser header.

<html>

<head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8″ />

<meta id=“viewport” name=“viewport” content=“width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<title>Your Header</title>

<link rel=“stylesheet” href=“iphone.css” />

</head>

<body>

</body>

</html>

Title of the page

2. As like the component UINavigationBar in iPhone Native App we can get the same bar header in our html itself.

You can find some images that are needed to make the look and feel of our site as like iPhone Native App here.

Add this images folder in root of your html document.

add this code below at starting of the tag “body”

<div id=“header”>

<h1>Navigation Bar</h1>

</div>

Navigation Bar

3. As like list in normal html we displays the set of items one by one. The mostly used view in iPhone is UITableView. It is used to display the list of items, we can checkmark it, select it,delete it.The items in the table called as cells. Each cell has their own property.

Way to make our list appear as like table in iPhone.

<ul>

<li>Simple Item</li>

<li class=“arrow”><a href=”#”>With Arrow</a></li>

<li><small>new!</small><a href=”#”>With Badge</a></li>

<li><a href=”#”><img src=“images/list-icon-5.png” class=“ico” /> With Icon</a></li>

</ul>

Table List

There are as many samples provided in the iUIKit. You can try them all by downloading the iUIKit from here.

Filed Under: All Coupons

About the Author:

Design your website that comptible with iPhone