Here at Cyberwoven, everybody has a little sheet of paper on their desk that lists all of the office phone extensions. That little sheet of paper is useful, but very limited in the amount of information it can convey. Many of us in the office have iPhones, so I thought it might be fun to create a simple mobile directory page.
Over the course of a lunch break I created a webpage with a simple list that showed exactly what the extension sheet had on it, making each <li> expand on click to show more contact information: cell number, email, twitter, website, instant messenger, etc. This webpage was similar to any other wepage really except that it was a little narrower and contained 2 extra lines of meta data in the header:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no"/>
I learned about the first meta tag from a short post on Daring Fireball a while back. It’s just a simple tag that loads pages added to your home screen as a standalone app; without the standard Safari chrome. The viewport meta tag just defines some rules for the display of the page. By setting the width and height to device-width and device-height, I’m just forcing the page to fit to the viewport whether it’s in portrait or landscape mode. Setting user-scalable to “no” just prevents the user from zooming in or out, which is acceptable since I’m designing the content to fit the screen. You can learn more about these meta tags (and a lot of other great iPhone mobile app tips) from the HTML section of Apple’s Safari Reference Library.
As I mentioned above, those two meta tags are really the only iPhone specific bits in this simple web application. The rest is just plain ole’ HTML, CSS and jQuery with a smidge of PHP just to handle some variables and authentication. Rather than explaining all that I’ll just let you grab the demo. Feel free to use this as is or modify it to your heart’s content. I used an HTML file to store the directory data, but this example could easily be modified to pull from an XML file or from a database.
Download Mobile Directory Demo – Zip (28KB)
View the Demo (password is “stapler”)
Hey Jason,
Heard loads about you through the Boag World podcast and am glad I finally found your website.
Excellent post. Great use of simple DHTML to get your app to work on your phones and web. Loved the info about the meta tags.
Thanx for sharing.
best
Corbin