Difficult to bookmark or add to home screen on mobile

[MichaelArestad]

Currently, it's a pain to add it as either of those on a phone. Let's figure out a good way to make this nice and straightforward.

[marcelomazza]

This is kind of a platform weakness. It will be a pain no matter what we do :P Maybe we can display custom instructions if you are browsing from certain device? For reference, here are a couple of examples of how Pocket and Pinterest do it:

http://help.getpocket.com/customer/portal/articles/483627-using-the-pocket-bookmarklet http://help.getpocket.com/customer/portal/articles/491013-installing-the-pocket-bookmarklet-on-iphone http://help.getpocket.com/customer/portal/articles/1688998-enabling-the-pocket-share-option-in-ios-8 https://help.pinterest.com/en/articles/add-pin-it-button-your-browser#android https://help.pinterest.com/en/articles/add-pin-it-button-your-browser#iphone

[marcelomazza]

Related: now the majority of the browsers don't show the "Bookmarks Bar" by default. I'm wondering if the copy "Drag-and-drop the following link to your bookmarks bar" can be misleading users?

Which leads me to this doubt: is the average user of Press This not aware of how to use a bookmarklet? (my guess is that it's already an advanced user and knows what a bookmarklet is and how to work with them)

[marcelomazza]

Chatted about this on the 1/29 meeting.

Notes:

• Click link to get to it > It opens in new window/tab/whatever if it detects it's not being used as a web app, have it show some text to help a user add it to home screeen
• we can detect browser for the help text to add to home screen
• It also picks up the favicon/site icon you have as the icon
• We'll likely need three sets of copy
  • One generic for a suggestion to add to homescreen (one-time dismissible type thing)
  • One for iOS
  • One for Android

[marcelomazza]

I have the mockup! Any ideas/suggestion?

I added the "Show this message again" but I doesn't make much sense, please ignore it.

And I went ahead and started settle the code, it's already working (mocked) on my fork, check this commit:

https://github.com/marcelomazza/Press-This/commit/dba86da158b832106145652baafb25f5903a3c68

Let me know if you see any room for improvement here, and I would need help from @MichaelArestad to deal with the svg icons, and from @stephdau, to know how it will be the logic of showing different content for iOS and Android (conditional php tags? media queries on CSS?)