Do I need an iPhone?

Of course I don’t, but I do have one, and that’s what I’m used to. However, after a few days I kind of got used to, and almost enjoyed (almost) not being connected to the internet, the internet that I spend 8+ hours a day sat connected to.

The problem

Sure, the first few days were okay. And I had bought into a policy whereby the damaged item is replaced in 48 hours. I rang up and was told the it would in fact take 10–12 days. It took 30. Anyone who owns an iPhone surely knows that that just isn’t easy.

The insurers name? Read the opening paragraph again, closely ;) Shh…

Anyway, anyone following me on Twitter will know that this whole farce has really wound me up, with error after error on the insurers part. You will also know that I have refused to name them. This was for the sake of professionalism, while ever they were messing around, and I was keeping it amicable, they were 100% in the wrong, nothing could come back to me, nor could my actions influence theirs (i.e. me being rude making them even slower etc.). It didn’t really work to my advantage, but still, better that than be a rude shouty b*stard to them, eh?

Okay, okay. That was a very alarmist intro. There is no web developers’ apocalypse around the corner (not that I know of anyway, please don’t take anything I say about the apocalypse as read. I don’t want that responsibility.), nor are we going to have to regress to using tables and spacer GIFs again. The real issue here is that with all this new technology that keeps emerging and exciting web developers is unwittingly reimposing the restrictions of yesteryear…

Screen resolutions

Remember trying to break away from 800×600px?

With the movement toward a more mobile web, screen resolutions are in fact getting smaller. The iPhone’s maximum resolution is 480px, increasingly popular netbooks are set at about 1024px wide. Such a shift toward mobile and portable devices mean that screen sizes are actually getting smaller.

In my opinion, iPhones and other mobile devices should be handled separately, serving them device specific CSS. Netbooks on the other hand are still ‘desktop’ machines like any other. Their smallness is their key feature, and at 1024px horizontal resolution, they aren’t that small anyway…

With the 960 Grid System, and an optimum line length of 52–78 characters, sticking to 1024px shouldn’t be that difficult anyway. I believe that although desktop monitor sizes are generally getting larger, other equally important technologies are creeping up, and as responsible developers you should cater for them. Sure you may want to start adopting the 1080 grid, which is all well and good if you know your audience, but to cater for the majority, we’re not ready to burst 1024 yet.

Connection speeds

Remember building for 56k dial up connections? (I don’t)

Where permanent and fixed connections are getting much faster, connections to mobile devices through means such as 3G are much slower. The ability to optimise sites to be fast loading over such connections is getting more important. As edge-case resolutions are getting smaller, edge-case connections are getting slower. Much slower.

A word on Flash

Remember 2Advanced? A site of yesteryear…

Flash seems to be dying a death anyway these days, slowly being superseded by Javascript and Canvas et al. However, what was once a fantastically powerful technology has been ousted completely from Apple’s i products, making in an inviable option for content which needs to be universally accessible.

A real life example?

Anyone with an iPhone will know what I mean—spending any amount of time on an iPhone loading poorly optimised sites is a real grind, and via some sensible optimisation these problems can be easily alleviated.

However, a more interesting example might be the one that happened to myself… When we first started at Venturelab we really were building the company from the ground up. For the first few weeks we were without desktop machines and internet. I was working on a 10.1″ netbook with a screen resolution of 1024×600px, and over a poor 3G connection via a dongle.

“Accessibility isn’t just about disabilities, it’s about varying degrees of ability to access content.”

Working in this manner really made me wonder whether enough people are delivering content in a manner which is accessible on numerous levels. Accessibility isn’t just about disabilities, it’s about varying degrees of ability to access content. As responsible developers your content should be accessible through a full spectrum of means and in an acceptable manner.

All it takes is some decent optimisation (which is also set to reap SEO benefits) and a reasonable page layout and you’re already halfway there.

N.B. This article addresses iPhone development and iPhone development only. There is no reason why you cannot or should not develop for other mobile devices and platforms, Apple or otherwise. This just happens to be an iPhone only post.

The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. This post will show you some of the basics of developing and designing websites for the iPhone and Mobile Safari.

To start

The first thing to remember when developing a site to be displayed on an iPhone is that it is very similar to designing a print stylesheet. You need to linearise everything. Make sure you have one column and everything is read in one line—straight from top to bottom. This will also put your markup writing skills to the test.

Some people don’t agree with browser sniffing, but you need to detect the iPhone somehow.

This first bit of code is a PHP browser sniffing snippet, the actual CSS we’ll use is not brought through via any server side code, we’ll use some CSS media queries for that. What we’ll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title.

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
  }
?>

What the above code does is sees if the user agent contains any instance of ‘iPhone’ using the strpos PHP function. Place this piece of code at the very top of your header include, before any other markup. In order to action something if the browser is an iPhone, simply use the following bit of PHP logic in the place you want it to be initiated:

<?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>

We want people to save your site to their home screen…

Now, to put that snippet to use. We want to do two things with this little piece of PHP.

Saving to the homescreen—shortening the page title

First off, we’d like users to be able to save a link to your site on their home screen, this is simple enough, they simply need to select to do so from within the browser. However, if you look at the title of my home page alone, it’s quite long: CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts. This would never fit underneath an icon without being shortened, so we need to serve a different title to the iPhone only. To achieve this we us the PHP snippet like so:

<?php if($browser == 'iphone'){ ?>
  <title>Short iPhone only title</title>
<?php }else{ ?>
  <title>Regular title</title>
<?php } ?>

Now, both when browsing and saving your site to their home screen, a user will only ever see the shortened version.

The home screen icon

Actually making the icon is very simple. All you need to do is upload a 57×57px icon (usually a larger version of your favicon) to your server root. The icon must be named apple-touch-icon.png, and the iPhone will sort the rest out. See my icon.

Stopping user pinch-zooming

The second use for the PHP snippet is to serve the iPhone a meta tag which disables the user pinch-zoom that Mobile Safari offers:

<?php if($browser == 'iphone'){ ?>
  <meta name="viewport"
  content="width=device-width,
  minimum-scale=1.0, maximum-scale=1.0" />
<?php } ?>

This means that, once we’ve linearised the content and sorted the font sizing, the user will only ever have to traverse down your page, much like a native app.

Beginning styling

Some developers prefer to redirect iPhone users to a totally different version of the site—we won’t be doing that.

We could use the PHP snippet to serve the iPhone a whole new stylesheet, or even send the user to a whole new site, rather like Twitter does (m.twitter.com). However, there’s a simpler way to do it using some CSS media queries. The advantage of this is that you’re simply reusing old content and pre-written markup, and only ever using one CSS file.

The first thing you need to do is make sure the HTML link element that points to your main stylesheet does not have a media attribute:

<link rel="stylesheet" type="text/css" href="/path/to/style.css" />

Next, we’re going to use Quick Tip #15 that I wrote on my Quick Tips page. This means that we can just add our iPhone styles directly onto the end of the main stylesheet, and inherit all the styles set for desktop viewing:

/*--- Main CSS here ---*/

/*------------------------------------*\
	IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
/*--- iPhone only CSS here ---*/
}

Now any CSS before the media query will be used across all platforms, but anything between the query will be used by any screen media with a maximum screen size of 480px (i.e. an iPhone).

Things to remember

There are a few key things to remember when developing CSS for the iPhone:

• Avoid explicit absolute widths—where possible you should use percentage widths.
• Linearise everything—where possible, remove all floats. We want no content side-by-side unnecessarily.

The first thing to do is to set the -webkit proprietary CSS -webkit-text-size-adjust on the body which will resize the text for you, meaning you shouldn’t have to touch any font sizes yourself. Also, if your body copy is set in a sans font such as Arial, now is your chance to use some Helvetica—for normal sites, Helvetica should not be used as body copy as it renders hideously on a PC. Take advantage of the fact that you can guarantee its presence and quality on an iPhone. Change your font-family:

/*--- Main CSS here ---*/

/*------------------------------------*\
	IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
body{
  -webkit-text-size-adjust:none;
  font-family:Helvetica, Arial, Verdana, sans-serif;
  padding:5px;
}
}

Above, I also added a small padding to make sure nothing touches the edge of the browser. All wrapper and content divs from here on in should be set to width:100%; making them the whole width of the screen, minus 10px.

Structure

Now, as all layouts differ I am going to assume a similar one to mine, a simple two column set up with a logo and menu in the header. If your layout is different I am sure you can quite easily retrofit it. As I mentioned before, remove all stylistic floats and set all widths to 100%. If you are using divs sensibly (i.e. for large bodies of content and not for nav items) this code should see you right for linearising the content:

@media screen and (max-device-width: 480px){
body{...}
div{
  clear:both!important;
  display:block!important;
  width:100%!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
}
}

That will force all divs to rest one on top of the other, full width and in order. You have begun linearising all your content.

The navigation

If you have a navigation menu in which all the items are floated and made horizontal, insert the following:

@media screen and (max-device-width: 480px){
body{...}
div{...}
#nav,#nav li{
  float:none!important;
  clear:both!important;
  margin:0 0 20px 0!important;
  display:block;
  padding:0;
  text-align:left!important;
  width:100%;
}
#nav{
  border:1px solid #ccc;
  padding:5px;
  -webkit-border-radius:5px;
}
#nav li{
  margin:0!important;
}
#nav li a{
  display:block;
}
}

This then will give you a vertical navigation menu which has a 100% width and the actual links themselves have a larger hit area (applied via display:block;), meaning that it’s prominent at the top of each page and easier for users to select single items.

Images

As images inherently have a set pixel width (i.e. their own width) there is a high chance that they will break out of the wrapper area (as a lot of images will be above 480px wide). To combat this simply add the following:

@media screen and (max-device-width: 480px){
body{...}
div{...}
#nav,#nav li{...}
img{
  max-width:100%;
  height:auto;
}
}

Other than elements very specific to my site, that is pretty much all the CSS I use to quickly size and linearise my content. Any elements specific to your own site will obviously need considering on a case-by-case basis, but if you remember to not set absolute widths and to always linearise your content then it should be a doddle. Oh and it’s a great time to use some guaranteed CSS3.

View a screenshot of an entire page of CSS Wizardry on an iPhone.

Do you have an iPhone version of your site? Have you any more tips you’d like to add? Please do so in the comments below.

A little tilt-shift one I got:

A shot of Park Square by @suzehaworth:

A shot of Leeds Town hall by @suzehaworth: