A Beautiful Site

Search the Notebook

• Recent Notebook Entries

Popular Entries

• jQuery Context Menu Plugin
• A Beautiful Site Launches Surreal CMS
• jQuery File Tree
• Forcing Paste-as-Plain-Text in TinyMCE
• jQuery MultiSelect

Related Entries

• Let’s Set the Record on Download Day
• “The Grid”
• Better Search Results, Popular Entries, and a Different Focus
• IE8 Ditches Version Targeting
• Netscape Support Ending in February 2008

Archives

• November 2008
• October 2008
• September 2008
• August 2008
• July 2008
• June 2008
• May 2008
• April 2008
• March 2008
• February 2008
• January 2008
• December 2007
• November 2007
• October 2007
• September 2007
• August 2007
• July 2007
• June 2007
• May 2007
• April 2007

Products & Services

Making Lyrics Hog Available for iPhone Users

Written by Cory S.N. LaViska on May 3rd, 2008

A brief overview of how Lyrics Hog was enhanced for the Apple iPhone.

Lyrics Hog has been enhanced to work better on the Apple iPhone. If you happen to own one of these excellent devices, simply navigate to lyricshog.com and check it out.

It is worth mentioning that, unlike Facebook, Fandango, Digg, and some other notable websites, a separate version of Lyrics Hog was not created for the iPhone. Instead, I decided to use server-side scripting and CSS to enhance users’ experience on the existing website. In fact, the “iPhone friendly” version of Lyrics Hog was “created” in less than two hours.

Note that this was my first experience writing (updating) a web application for the iPhone and it was, needless to say, quite pleasant. I first referred to the Web Apps Dev Center to answer a few basic questions I had, then I was off to make Lyrics Hog shine on the iPhone.

Detecting the iPhone

The first thing I wanted to do was automatically detect users that were browsing the website with an iPhone. Since there wasn’t going to be an iphone.lyricshog.com or a lyricshog.com/iphone, this was necessary so I could display the correct stylesheet(s) depending on the client’s browser. As it turns out, the easiest way to detect an iPhone is by scanning the User Agent. In PHP, it looks something like this:

From here, I set the stylesheets using PHP. For the iPhone, iphone.css. For everything else, screen.css and print.css.

Enhancing the Display for the iPhone

The iPhone has a display of 320x480 pixels and 480x320 pixels for portrait and landscape modes, respectively. Since the page width can vary depending on the phones orientation, I decided it would be best to maintain a fluid width throughout the website. I did, however, want the width to be fixed to which ever mode the user was currently viewing. In other words, I didn’t want the user to be able to scale the app because this would make it scroll both horizontally and vertically which, in my opinion, is undesirable on a mobile device.

As it turns out, this is rather easy to accomplish with a meta tag. The following code will prevent scaling and maintain a page width that is equivalent to both the portrait and landscape orientation on the iPhone:

As users rotate the device, the orientation will change and the width will toggle between 320 pixels and 480 pixels. Each time this happens, the webpage’s width is adjusted accordingly. I updated the iPhone stylesheet to accomodate this and turned off some unnecessary features (the sidebar, the mission statement on the homepage, etc.). Next, I made the search fields larger and added a smaller logo at the top of the page. Within minutes, the website looked like it was designed specifically for the iPhone.

Hiding Mobile Safari’s Address Bar

The Web Apps Dev Center says that window.scrollTo(0, 1) will hide the iPhone’s address bar if you call it when the page loads. This didn’t work for me, however, the following JavaScript code from Facebook did:

Of course, the user can still scroll up to get back to the address bar, but this makes the initial presentation much more professional.

Adding an Apple Touch Icon

This part was really easy. I simply created a PNG image that was 57x57 pixels (anything larger will be scaled down by the device) and added the following inside the <head> tag:

Now, when iPhone users choose to add Lyrics Hog to their home screen, they will see a nice, customized logo of the Lyrics Hog pig.

Finishing Touches

The best part about developing for the iPhone is that it has a fully functioning web browser that supports XHTML, CSS, and AJAX, making the learning curve for application development minimal. My only fear is, since many websites have already created “iPhone versions”, has Apple opened the door to another battle of the browsers—except this time on the mobile platform? In other words, how long will it take before we start seeing nokia.website.com and motorola.website.com?