Start a Project  

Converting Your Website into An App

by

… at least, kind of. The real description is just too long for a blog post title though. Really what we’re doing is walking you through creating an app-like bookmark for your responsive website on both Android and iOS devices. This will give your users access to your site in the same way they would access any other app on their device.

We speak with many clients who want an app for their business, but poking and prodding them to talk in more detail about the goals of this hypothetical application often reveals their hypothetical app’s only mission is to give users access to their website from a mobile or tablet device. And if this is your main goal for having an app, then what you really need is a responsive website that behaves well across all devices. We’re going to cover below how users can bookmark your site and interface with it just like an app for each of the two mobile platforms.

NOTE: Before reading these instructions, one thing to keep in mind is that not specifying your favicons in a flexible way to account for different devices will cause these icons to be auto-generated. And often, these auto-generated icons poorly crop or distort an existing image on your page and don’t look great. Check out our article on Favicon generation and how to setup the branding of your site so that these icons look good across all devices.

iOS Device Instructions

  1. Visit the website you’d like to bookmark on Safari
  2. Click the Share Icon in the bottom row of browser buttons (shown in the screenshots below)
  3. From the presented options, click “Add to Home Screen”
  4. You’ll see a preview of the Text for your button (will default to META page title), the link (not-editable, will be the link to whatever page you were on when you clicked share), and the icon that will appear as your button (if one isn’t specified in your site source code, it will be auto-generated)
  5. Click Add when your title is correct and it should appear as an icon with a title like all of the other apps on your device

Android Device

  1. Visit the website you’d like to bookmark on Google Chrome
  2. Click ⋮icon in the top-right of the browser to bring up options
  3. From the presented options, click “Add to Home Screen”
  4. Fill out the text for your button (picture preview will be shown)
  5. Click Add when your title is correct and it should appear as an icon with a title like all of the other apps on your device

As always, feel free to comment below with any questions or things you didn’t understand. Thanks!