iPod Touch Tour Full Screen Mode

iPhone Top Detail

I recently implemented a feature on our tour at the San Jose Museum of Art which I have been wanting to do for quite a while. We are currently only offering a small tour at the museum so I figured it would be a great time to try it out. If you read this site regularly you are familiar with the WiFi driven iPhone/iPod Touch tour that we have been offering since May of 2008. If not, please read the previous link!

The feature I added was full screen mode which has been sporadically mentioned on the web and is not a well known feature. It’s basic purpose is to make a web based application act more like an installed app. It does this by removing the URL and navigation bars from the top and bottom of the Safari Mobile Web Browser window – virtually locking a user to your site. It does come with some quirks which I wish to document here. First here is a demonstration of how it works:


SJMA iPod Touch Tour Full Screen Mode from Chris Alexander on Vimeo.

Apple has documentation of full screen mode (free developer’s account required) available on their developers website. To implement this feature you need the following bit of code in the header of your tour or app:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Web Clip Icon

Web Clip Icon

So, here are the quirky things about this. In order for it to work the viewer of the site must add a “web clip” icon to their home screen. If the museum is offering iPod Touches for check out or has them tethered to the wall or shelf this can easily be done in-house. Patrons using their own device might like the full screen feature or might not. It’s up to them to add the icon themselves if they would like full screen mode.

Additionally, if there are any links that lead the visitor away from the root URL the full screen mode will revert back to regular mode. This will bring back the URL bar at the top and the navigation bar at the bottom. I have not found any way to eliminate this problem yet.

SJMA iPod Touch Tour full screen mode

SJMA iPod Touch Tour full screen mode

The obvious benefit of full screen mode is that it basically keeps the visitor on your tour and prevents them from surfing the web using a museum device. While a tech savvy visitor could still figure out a way to get into the apps and settings, it puts us one step closer to a type of Notes-Only mode (pdf download from Apple) for the iPod Touch that is only available for the non-touch screen iPods. Also known as “Museum-mode,” Notes-only helps to lock users out of all the settings of the iPod. We are using full screen mode paired with special cases that we had made by Coutour which help prevent access to the Home Button thus preventing users access to other applications on the device or access to the settings. The set-up works extremely well and we have had few incidents of visitors tinkering with settings.

Full screen mode has been implemented for a few weeks now and has been successful and trouble free.

Add a Facebook Comment

12 Responses to "iPod Touch Tour Full Screen Mode"

  1. James G. Leventhal

    this is bada$$…only I use an older-styled PDA so there are indeed moments when I can be disconnected…maybe that will soon change thx for bad apps like this!

    well done.

  2. Chris

    Thanks James! It’s a great feature that really makes the tour look native to the device. Time to upgrade that PDA! :0)

  3. Scott

    Chris,

    Way to go…I see you resorted to a physical lock-out to the Home Screen. I’m doing a tour in NYC with 700 units and we’re in about the same boat.

    S

  4. Chris

    Hey Scott,

    Wow 700 units! That’s a lot. Can you share what it is you are working on?

    Chris

  5. Scott Guerin

    Hi Chris,

    Yes, fairly soon I hope. It’s a native iTouch app with some “fancy programming” that senses it’s coarse location using wi-fi in order to lock certain content out at a critical point in the tour.

    S

  6. Dimitrios Collias

    Hello Chris,
    I just wanted to say hello to an old friend of mine, Scott Guerin of “4274 Design”. Scot and I worked on the “Digital Exibition of the Ancient Olympic Games” at Ancient Olympia in Greece, a few years back. The Museum is now live and among other digital exibits it also contains a Digital Guide that works automatically sensing the location of the visitor. At that time we did not have iPods and had to use a Siemens PDA.
    Currently, I am working for another Museum (of Ancient Greek Technology) and the iPod is the one we are thinking to use.
    Thanks for the info published here. We hope to contribute something soon.
    Best Regards
    Dim

  7. Chris

    Dimitrios

    Always great to get comments on my website. I’d love to know more about the location sensing on the PDA’s and how that worked. I’ve been in the process of drafting a post for the site around the idea of wayfinding in museum tours. Also, I’d love to hear an update once you are further along and launch your iPod tour. I’m assuming you are using iPod Touch devices?

    Thanks for your comment!

  8. Nathan Ziarek

    I’d be curious if you ran into any cookie issues. It seems when launching the web page as an “app” (vs in Safari), the cookies aren’t persistent.

    I’m currently authenticating to Google for some API usage, and when using the app in Safari it works fine. Bring it over to the “web app” and I need to log in each time. Not a huge deal, sure, but enough of a pain that I’m debating whether the extra few pixels are truly worth it.

    Did you run into this? Any fixes you’ve found?

  9. Chris

    Thanks for your comment Nathan. The tour that I created for the San Jose Museum of Art is in essence a web app, however there is no logging in necessary. The user simply navigates to http://www.sjma.mobi and the tour shows up. I used no cookies in the creation of it so unfortunately I cannot answer your question of offer any advice. Were you able to figure it out? I’m sure others who read this post might be interested.

  10. Hector Menendez

    Does enybody have found a fix for cookie storing on a “full screen” web app?

    It’s driving me crazy.

  11. Chris

    Have you tried posting this question on the iphonewebdev Google group. I’m sure someone there would have an answer.

    http://groups.google.com/group/iphonewebdev

  12. Reekster

    Great info. Thank you so much for sharing. Do you know if this works on the iPad?

Leave a Reply

*Required