Preparing for the next round of browsers…

So we have the iPhone coming next month, it’s time that us in the UK and Europe began to take this seriously. The iPhone and iPod Touch, as I’m sure everyone in the tech industry knows, comes with a fully functional version of Apple’s Safari browser along with decent support for on-the-go internet. As you can appreciate, this is going to cause havoc for web developers.

Well, this isn’t really the case. Semantic markup done properly will work in any browser on any screen. If you have an iPhone or a Touch, head over to www.tropicana.co.uk and see for yourself! This site was built (by me) using XHTML 1.0 Transitional simply so that it would work perfectly in “normal” browsers. Now, seeing as Safari IS a normal browser, there’s no reason why it shouldn’t work.

There are, however, a few things to consider:

1. The screen, although quite large for a portable, is NOT the same size as a Mac (oh alright, or PC) screen
2. The iPhone and iPod Touch have their own user agents (these are “iPhone” and “iPod” respectively), so these can be utilised to customise the user experience for this type of device.
3. Flash player support isn’t exactly as it is on full-fat browsers
4. No matter how good your code is, how well it validates to your chosen flavour of html or whether you’ve just plonked a big image with image maps on a plain page, you ALWAYS need to test your site in ALL your target browsers (see below).

Steps for preparation

There are a few things that we can do to prepare for the onslaught, most of which we should all be doing anyway as part of the standard development cycle. There is a reason that people have dubbed the current trends of web development as Web 2.0; we are now at a point where we can’t just cobble together a bunch of angle brackets and hope it all works for the majority of users. With this in mind, this list should be of no surprise.

1. Write your code to the highest standards possible. If you can use XHTML 1.1 then do so, and validate it to this standard. This isn’t always possible I know; for example if you are using a paypal cart, you have to have the target=”" attribute on some links - in this case use the next available standard (I think it’s HTML 4 Transitional)
2. Validate, validate, validate! There are tools out there for automatically validating your site as you preview it, these are mentioned below
3. Test. Retest. And test again! Every time you make a change, test your site in all your target browsers. That means at least: Safari (Mac/Windows), Firefox (Mac/Windows/Linux [if possible]), Internet Explorer 6 (hocccch patooooweee) and Internet Explorer 7. Test it on iPhone (or iPhoney if you don’t have an iPhone yet) for compatibility with that and the Touch. Test it on your PS3’s browser, or your XBox browser. Your target market will dictate which browsers are most commonly used for your type of site, but don’t forget, you will always fine a smarmy web developer (such as myself) who says “Yeah it’s nice, but it dies on my PS3/iPhone/Microwave Oven’s Display Panel!”
4. Utilise others’ experiences and/or plugins to help you along the way, BUT there is no substitute for experience!
5. Get hold of any useful tools that will help you (see below)

Tools for preparation

Here are some tools, in no particular order, for preparing for the iPhone/iPod Touch invasion:

• An iPhone or iPod Touch. Unless, like me, your boss has offered to buy you one*, you may wish to get hold of a software version that mimics it’s web browser function instead. iPhoney is such a piece of software. I believe it’s only available for Macs, but lets face it, if you’re serious about web development, you’ve got a Mac anyway!
• The Web Developer Toolbar - By Chris Pederick. An add-on for FireFox which has the ability (among many others) to show you the validity of your page whilst you preview offline (Go to tools -> Display Page Validation on the Toolbar)
• Firebug. Very useful plugin for Firefox which allows you to fully investigate the DOM, page structure, CSS etc
• The new plugin for Wordpress called iWPhone. This plugin automatically loads a different stylesheet for iPhone users displaying (by default) only the content of the posts rather than the full structure. Of course, this is customisable as any other Wordpress theme is. There is also a MoveableType iPhone Plugin too!

So there we have it, it’s a minor bump in the road really, something we can get over easily I’m sure, in a few months time it will just be another browser to add to the testing process and we’ll think nothing of it!

Good Luck!

* it turns out that I can’t get an iPhone until June due to somehow managing to sign up for a 18 month contract with Vodafone for my BlackBerry… which I don’t even use! So instead I shall make do with my current cellphone and buy a MacBook with my bonus instead!!!

This entry was posted on Tuesday, October 16th, 2007 at 16:46 and is filed under (X)HTML/CSS, Apple/Mac, Gadgets, Hardware, Plugins, Software, Web Development, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.