Get your Website iPhone-Friendly

Steve —  1.4.2010 — 2 Comments

I’ve recently gone through and made a couple of my sites iPhone friendly. I say iPhone friendly because I’m not convinced (sorry Blackberry and Droid) any of the other platforms amount to a significant amount of users to cater to.

Two different strategies were employed and I thought it might be fun to share them. The first is based on a technique I’ve been using for years via simple Flash Player detection. The second, uses SWFObject 2.2 and displays a non-Flash equivalent of my Flash elements for any user without an active Flash Player. Each have their merits; their pros & cons and therefore it is up to you whether or not they fit your situation.

I’ve even found a third that uses Regular Expressions to detect the use of a mobile device and redirect users to alternate pages. I decided to reject this approach because I don’t want to maintain multiple versions of my content for a given percentage of users – especially when there are alternatives for almost all scenarios. If you want to know more about how to detect mobile devices for a variety of platforms  via regex, visit http://detectmobilebrowser.com

Regardless of the method, there are two things you need to do for iPhone users. One is a META tag that needs to be inserted into your pages and the second is a CSS style inserted into your style sheet. Here are some examples:

META | The WIDTH value is whatever width your actual content container happens to be
<meta name = “viewport” content = “width = 960”>

CSS | Because the iPhone uses a full version of Safari, the device type isn’t “handheld” – it is screen, just like your laptop computer. Apple didn’t want their users to get the handheld versions of websites, but rather enjoy the full version of the site. So, adding a new CSS file with the “handheld” designation won’t change the appearance of your site on the iPhone. I’m not saying that you shouldn’t develop a handheld version of your CSS as part of your usability strategy, but it won’t do anything for your iPhone users.

Make this the last entry in your CSS file. As you can see, I’m overriding several styles if the screen width has a maximum width of 480px. Put whatever styles you need in here to make the iPhone version readable.
@media only screen and (max-device-width: 480px) {
body,td,th {
font-size: 12px;
}
.page-content {
line-height: 22px;
padding: 4px;
color:#FFFFFF;
font-size:16px;
}
}

If you’re interested in the Flash Detection method, read THIS POST outlining it. If you’d rather employ the SWFObject method, I’ve covered it in THIS POST.

Trackbacks and Pingbacks:

  1. iPhone Readiness – SWFObject Method | 3 Lefts = 1 Right - 1.4.2010

    […] I stated in the overview article, this is my preferred method for Flash detection for the iPhone. This method is used on all of your […]

  2. iPhone Readiness – Flash Detection Method | 3 Lefts = 1 Right - 1.4.2010

    […] problem and not the absence of the Flash Player. I guess you could use the CSS mod outlined in the overview article to hide a <div> tag that includes the icon if you don’t want your iPhone users to see […]

Leave a Reply

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CommentLuv badge