In the context of a product that has an iOS, Android and website-version where users can work together independently of the platform they are using it on, I want to let users know that there are native apps available and nudge users to download them in a non-obtrusive way. I would like to fit this information in the sidebar of the website-version. The sketch of the sidebar design is shown in design A, with the app icon represented by the blue template at the top.
To nudge iOS or Android users that visit the website towards the native app, I would detect the requesting browser and animate the app icon to a download button using an overlay approximately like shown in design B.
But there is still a major problem though: Desktop users might prefer the native app versions, but might not know that they exist. Since they visit from a regular desktop browser, the previous approach doesn’t work, and the information that native apps exist needs to be presented in another way.
The obvious solution would be to use the standard “Available on the App Store” and “Available on the Google Play Store” badges, but I can’t seem to get them to fit in with the current design. How do I best represent the information of the existence of the native apps without breaking the design?
<link rel="alternate app"…>
? Wouldn’t help much with the desktop case, though.<meta name="apple-itunes-app" content="app-id=…">
for iOS 6+ and maybe<link rel="chrome-webstore-item" href="…">
for Android or rather this jQuery plugin andgoogle-play-app
.