Is Your Site Ready for the New Mobile Internet?

By Douglas Bell

Now before you start getting any ideas in your head about those baby cell phone web browsers and WML (Wireless Markup Language), just stop right there. This article is talking about the new mobile internet. The new mobile internet doesn’t contain the baby web pages that you may be used to on a mobile device, but it is an internet that actually looks like the real internet, feels like the real internet, and interacts with the user almost like real internet. If you haven’t guessed, it is the internet that premiered with Apple’s unveiling of the iPhone.

Now, people may have varying opinions about the iPhone, some may like it, some may not like it, and some may even be reading this article right now on their iPhone. However, even when you put any feelings you may have about the iPhone aside, Apple has now made the future of mobile internet clear. It is the real internet, but one that is tapped, flicked, and pinched around on a touch screen device. If you ask most analysts about what the future of the mobile internet is, they will mostly agree that the future of the mobile internet will be an iPhone-like experience. For the moment, at least, this pretty much represents just the iPhone, and Apple’s new similar product, the iPod touch, but rest assured that we’ll start to see this kind of technology pop up elsewhere. And that means that as the iPhone and iPod touch pick up steam, and as other similar mobile devices emerge, we as web designers need to be ready. That’s what this article is about: how to get your site ready for the iPhone and beyond.

There’s Nothing to It, Literally

Actually, the first thing to note is that you don’t have to do anything to get your site ready for the iPhone! It’s already there!

The web browser on the iPhone is the exact same Safari web browser that runs on Mac and Windows, and it renders web pages exactly the same way. What you see on your computer is what you get on the iPhone, so if you’re website is loading on Safari, it will (with a few exceptions) load exactly the same on the iPhone, ready for your mobile visitors to start looking around. However, there are some things that you can do (or perhaps already are doing) that can optimize the viewing experience for iPhone users.

Some Finger Food for Thought

When you’re designing a site with the iPhone in mind, the first thing you have to remember is that the internet on the iPhone is different from a traditional web browser.

For starters, there is no such thing as a “window” on the iPhone. The browser display is always at a fixed width of 320 x 240 pixels, which fills the iPhone’s screen. When the webpage loads on the iPhone, it shows up so that the entire page fills the screen–which means it’s way too tiny to read. The user can navigate the page by dragging or flicking his/her finger around the screen to move the page around. In order to actually make the content readable, the user can use two fingers to pinch out to zoom in the page. Alternatively, if the user double-taps on a particular object on your page, the iPhone will automatically zoom in on that object so that it fills the screen. The user also has the ability to rotate the iPhone sideways to display your site in landscape mode–this means that the window can alternate between 320 x 240 or 240 x 320 pixels, depending on the orientation of the phone. Single-tapping emulates clicking for links, buttons, and Javascript onClick actions.

The iPhone does try to submit Javascript actions to the site with as much integrity as possible, but there are some actions which cannot take place on an iPhone. iPhone does not submit Javascript actions when scrolling or zooming a page, and other things like onMouseMove or onResize would make absolutely no sense on the iPhone, as an example. The iPhone also does not support text selection, drag-and-drop, or copy/cut/paste actions. There are even other finer details to think about which may never cross your mind, for example, fingers come in many different shapes and sizes, so if you have a bunch of links really close together, it may cause a problem for certain people. When you really understand how the iPhone and the web page interact, you start to notice aspects of web pages that you would never think about on a computer.

Teach Your Website to Tap Dance

If you ask someone at Apple what the most important aspect of the iPhone web browsing experience is, they’ll tell you that it’s double-tap. The ability to quickly zoom in on a particular object, have it grow to fit the full screen, and then be able to quickly zoom back out to see the whole page is what allows this new interface to work. But what can you do to make sure that your site will look it’s best on the iPhone? Here’s a few finger tips to start with:

• Use the latest web standards. HTML 4.01, XHTML 1.0, CSS 2.1 (and some partial CSS3), JavaScript, W3C DOM Level 2, and AJAX technologies are right at home on iPhone.
• Separate your HTML from your CSS and your Javascript by putting them in separate files, and linking to them in the HTML header.
• Java and Adobe Flash are not supported on the iPhone. The iPhone can open and browse through PDF, Microsoft Word, and Microsoft Excel documents, but most other documents are not supported and there is no way to save these downloads.
• The iPhone does not render WML, however it does support XHTML mobile profile doctypes and sites with .mobi domain names.
• The iPhone supports GIF, TIFF, and PNG images up to 8 MB, and JPEG images up to 128 MB. Animated GIFs must be less than 2 MB, otherwise only the first frame will be shown.
• Form elements are supported, however when they are selected, the iPhone’s screen splits to reveal the keyboard or a drop-down menu selector, which minimizes the space available for your web content. File upload form elements are disabled as iPhone does not have a filesystem.
• Use columns in your web page. Double-tap zooms in a particular object by making the width of the object fit the screen, but if it already fits across the full width of the page, the iPhone will be unsure of how to zoom in on it. The user will then have to choose between pinching out to zoom in the page, and then scrolling the page back and forth, or else turning the iPhone into landscape mode to make the text readable.
• Does your website load properly in Safari 3 for Mac or Windows? If so, it will probably load properly on the iPhone as well.

Phone Calls, E-mails, and Maps, Oh My!

One of the more disputed aspects of the iPhone is that, as of the writing of this post, Apple has not allowed third-party development on the iPhone, although there are a number of hacks now that have sort of opened the gates. However, Apple’s offering to wannabe iPhone developers was to simply develop a web application designed for the iPhone, and Apple offers a couple of ways to integrate into the iPhone’s abilities to make phone calls, send e-mails, and look up maps.

• Telephone Numbers: Apple offers a new kind of link which, when tapped, will offer to place a call. The syntax looks like:

  <a href="tel:1-408-555-5555">Call 1-408-555-5555</a>

  (Incidentally, I just found a bug in WordPress, in that it tries to strip the “tel” from the link!) However, even if telephone numbers aren’t linked in that way, the iPhone looks for numbers on a web page that could resemble a telephone number and automatically turns these into links.

• E-mails: The iPhone treats e-mail links just like regular e-mail links:

  <a href="mailto:frank@example.com">Email Frank</a>

• Maps: Links to Maps opens in the iPhone’s Google Maps application. Any link to the Google Maps website will automatically open in the Maps application on iPhone. Example:

  <a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>

A Mobile Media Mania

More and more these days, the web is becoming less about text and more about audible/visual media, and while the iPhone may have a great iPod built-in for your audio and video, there’s a lot more out there on the wild jungle that is known as the internet. For starters, the iPhone does have a built-in YouTube browser, but what if you host your own content, or you are a podcaster (audio or video)? There are a number of things you should know to make sure that your site is accessible to iPhone users.

Unfortunately, as of the writing of this post, the iPhone has poor support for RSS. It would be great if you could subscribe to a podcast right on the iPhone, have the iPhone’s iPod features download the newest episode, and then have that podcast sync onto iTunes once the iPhone is docked. Unfortunately, this is not supported. Furthermore, Flash is not supported, so if your podcast site relies exclusively on a Flash player, you need to add manual Download links to link to the actual episode, so that your iPhone visitors actually have a way to get to your episode. For audio, the iPhone is compatible with AAC and MP3 files. For video, the iPhone is compatible with .mov, .mp4, .m4v, and .3gp files, so long as the originating server is aware of these MIME types.

However, when you’re preparing content (particularly video content) for the iPhone, you need to keep in mind that there are two kinds of “pipes”. There’s Wi-Fi, which is as fast as wireless internet on your typical laptop, and there’s EDGE, which is AT&T’s cellular data network, and which is much slower. If you have iMovie ’08 (Mac only) and/or QuickTime Pro version 7.2 or later (Mac and Windows), the export panels include options for “Movie to iPhone”, which optimizes the movie for the iPhone over wifi, and “Movie to iPhone (Cellular)”, which optimizes the movie for the iPhone over EDGE. Apple offers a great tool called MakeRefMovie, which generates something called a “reference movie”. Essentially, if you link to this movie, it will run a number of tests to determine which platform you are on, and based on the result of the tests, it will download a movie optimized for iPhone EDGE, a movie optimized for iPhone Wifi, or a movie optimized for a regular computer. If you’re embedding a video on a page, specify a poster image (just add an src=”” to the embed tag of the video which refers to a particular image file), so that your visitors get a better viewing experience.

Finally, your server must support byte-range requests, which iPhone requires before it will even allow the user to download media content. This is essentially a technology which allows random access to a particular file, meaning, for example, that an iPhone user could jump to the middle of a video before that much data had been downloaded already. Most HTTP 1.1 servers support this already, but some don’t; the best way to check is to run the following terminal command (replacing the URL below with one to an actual media file):

curl --range 0-99 http://example.com/test.mov -o /dev/null

If the tool reports that it only downloaded 100 bytes of the file, byte-range requests are supported. If it downloads the whole file, however, then byte-range requests aren’t supported and the iPhone will refuse to download any media files on that server.

Tap Into More Info

These are just some of the basics on how to make your site look good on the iPhone. There’s a lot more you can do, from setting the default viewport to setting a separate iPhone stylesheet to determining text zoom during double-tap. For much more information on how you can completely optimize a page or a web application for the iPhone, check out Apple’s Official iPhone Web Development Guidelines and the associated video (free ADC membership required).

The iPhone is a brand new way for users to experience and interact with the internet, and without a doubt, it won’t be long before its technology will be spreading to other devices. (We just have to wait for a couple of patents to expire.) By getting your site ready for the new mobile internet now, you’ll be ahead of the curve and ready to serve to an emerging new field of visitors.

---

Besides being the inventor of the fictional phenomenon of deep-fried pickle hearts, Douglas Bell is a junior in high school who designs websites as a hobby for fun and for profit. He is the producer and co-host of the podcasts PreviewCast and phpBB Weekly. He is also the mastermind behind his personal blog, Webmacster87.info. He does not own an iPhone and has never owned an iPod, nor does he expect to anytime soon.