cascading style sheets (css)

Creating an iPhone friendly site in PHP

Creating a website that renders well on an iPhone as well as on all standard web browsers shouldn’t be a difficult task. It’s always easier if you can design and build a site with this in mind rather than retrofitting a site after it’s launched, but either way the principle remains the same.

The way we do it at Fly Digital is to load exactly the same page regardless of the browser being used, no redirects to a seperate mobile site or subdomain. This way, whenever you’re making updates to navigation or content in the future you only have to do it in one place.

You can achieve the basics in two simple steps. First of all you’ll need to detect if the user is browing your site on an iPhone, here’s the server side way to do this:

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
  //it is an iPhone user
}
?>

Once you know this, you can see how you can load one stylesheet if it’s an iPhone and another for all other browsers. I’m not going to go into the CSS side of things in this post, I’m assuming you know a bit of CSS already if you’re reading this article. Suffice to say your iPhone styles will need to take into account the smaller screen when you’re loading things like container DIV’s and image sizes (do you see now why I said at the beginning it’s better if you can do this before building a new site rather than afterwards…?)

To stop the Safari browser from allowing users to use the pinch screen gesture to scale the webpage up or down in size, and to set the width of the page to the width of the screen, use this line of code:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,
maximum-scale=1.0" />

Finally, a neat touch is to create a springboard icon for users that bookmark your site. This is a 57×57 PNG file that should be called apple-touch-icon.png and sits on the root of your domain. Fly Digital’s icon is shown below as an example:

http://www.flydigital.com.au/apple-touch-icon.png

Note you don’t need to add the rounded edges and reflection that you see on Apple icons, the iPhone will do this for you automatically.

Here’s the full IF statement with CSS includes for you to copy and paste. Give it a go and you’ll be building websites for iPhone and web browsers that all run out of one file in no time.

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone'))
{?>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,
maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style-iphone.css"
media="screen"/>
<?php
} else {
?>
<link rel="stylesheet" type="text/css" href="css/style.css"
media="screen"/>
<?php
}
?>

How to include one CSS file in another CSS file

So you’re familiar with the include function in your favourite scripting language, but did you know you can use the same principle with your CSS files?

A CSS include works in exactly the way you would expect. Add this line of code to your CSS file, change {filename} to be the name of the CSS file you want to include (without the curly brackets) and bingo!

@import "{filename}.css";

I use this when I’m working on large sites that have some common CSS styles across the site but some that are specific to sections. I usually have one master.css file and multiple sectionname.css files. This makes editing styles that are not generic to the whole site a much quicker process.

How to center a website in CSS

A lot of websites that we build require the site to be centered regardless of the total screen width. I remember in the days of tables we’d simple put a master table of 100% width on the page, add a TD with an align=’center’ tag then nest another table inside to centre the main content.

With CSS the principle doesn’t have to be too different but the code is a lot neater. Here’s how I usually do it:

1) Create two CSS divs, one for the master container and one for the content:

div#container
{
 margin: 0 auto;
 background-color:#fff;
 width:600px;
}
div#content
{
 padding:20px;
}

The margin:0 auto; is the important part here. That is what will center the content within. The background-color and width attributes of the container div and padding attribute of the content div are just to highlight the example, you can remove these or change them to suit your design.

2) In your HTML, add your divs into the page BODY:

<body>
 <div id="container">
  <div id="content">
   Hello World!
  </div>
 </div>  
</body>

And that’s it!

Here’s the full code:

<html>
<head>
<style>
body
{
 background-color:#000;
}
div#container
{
 margin: 0 auto;
 background-color:#fff;
 width:600px;
}
div#content
{
 padding:20px;
}
</style>
</head>
<body>
 <div id="container">
  <div id="content">
   Hello World!
  </div>
 </div>  
</body>
</html>