I’ve decided to not do a mobile version of my site. However, I would like to add a pop up the says “add to home screen” just like google web apps does on my iPhone.
Because I’m not serving a different mobile page I’m also going to some how need to only serve this code to mobile browsers. I’ve seen most of what the web has to offer as far as mobile redirects and detection but I don’t know how to put both of these pieces together. Secondly, I can’t find and/or figure out the code that google uses to do this. They seem to have some pretty tricky mobile detection going on so just getting to the mobile version with this code in place is a trick in itself. It’s a tall order, but I thought I’d ask, anybody have any of these two pieces? Thanks!
I don’t think this would be too hard to implement. First stage is to detect the user agent /os so that you only display this in the correct context. Then detect the cookie, if it’s not present display the pop up at the bottom of the screen, detecting the screen resolution so it’s displayed in the correct position (animate in and out using e.g jquery)
Great question and a really cool feature. I would also be interested in figuring out how this is done. I will keep an eye out here and see if there is any info available elsewhere.
The first time you navigate to any of the google web apps (calender, latitude, gmail, etc) on a iPhone (and prob others) Google presents a nice little pop up (more like a slide in) positioned directly above the “add to home screen” icon. It doesn’t add it to home screen it only shows how. As google has learned themselves, the average user does not know how to do this. My mom has had and iPhone for the last two years and would have no idea. After the first visit a cookie is set and the pop up no longer appears. Yea it’s not necessary but a nice convenience. And if I could pull off what google does I’d be happy. I have seen a select few others do this also so somebody knows how. I’m doubtful of a solution but thought I’d ask.
I’m not judging, my comments were in no way aimed at you or your site on an individual basis - they were entirely based on how the practice you want to undertake is viewed commonly. Convention dictates that in any browser (desktop or mobile) you should never try and replicate browser implicit behaviour on-screen (such as the bookmarking, print and text resize things mentioned). It’s considered a damaging practice (to long term usability - which studies backup) as people then expect every website to replicate the exact same thing. While it may seem like a fun idea to have such functionality on your page, the very fact that a user can add your site to their home screen in no more than two clicks makes the need for another two click convention entirely redundant. 
You certainly do judge a lot Alex. My site performs perfect on mobiles. The reason I don’t wish to produce a pure mobile version is because it would take away from the experience and vibe of my site. What I am attempting to do is none of what you described. If it’s good enough for google it’s good enough for me.
I’m rather confused by your question… you want to offer people the opportunity to add your site (which isn’t mobile friendly) to their home screens?
It’s been well established in other threads that replicating browser behaviour (such as print, text resize or bookmarking) unnecessarily is obtrusive and counter-intuitive to web accessibility, but the idea that you’re trying to encourage people to “home screen” (indicating a web app) your site (which isn’t) against the convention is like pouring gasoline on a fire (to Apple users). In regards to Google, their web apps simply attempt to use the HTTP_HEADER to recognise the iDevice and thereby serve the message (as their apps are optimized for the experience). As for your particular issue, you should not be actively trying to encourage the user to add your site to the home screen (rather than bookmarking it) when the experience does not match the intended outcome. Perhaps you won’t agree with me on this issue but you’re undermining the purpose behind the home screen functionality - and anything which breaks the convention (especially on Apple devices) will not be well received.
PS: If the end user wants to add your site to the home screen, they can do it within the browser in two clicks - you’re trying to over-engineer your experience.
Anyone have any idea how to do this? Maybe a code snippet? I’m also very interested.