Call us today for more information: 877-840-2640

How to Make Your Blog Into an iOS App in 30 Minutes

By Derek Janis on February 20th, 2013

Many of you have iOS devices like the iPhone, iPad, and iPod Touch and have undoubtedly noticed the feature that allows you to save your favorite websites to your homescreen as apps. This can be a powerful feature for your blog and provide quick and easy access for your readers.

One important thing to remember is that your readers will only enjoy using this feature if you have already implemented a responsive design on your website. These responsive designs will allow you to provide a seamless, easy-to-use experience for your readers, no matter what their screen size may be.

Alright, so let’s get down to business. This process is not difficult, but there are several steps you need to follow in order to make sure that this is done right and presents your brand in the best way possible. Also, parts of this process require that you use jQuery, so if you are not using it already you will need to add something like the following code to your header file:

<script type=’text/javascript’ src=’http://www.your-domain.com/js/jquery/jquery.js?ver=1.8.3′></script>

Don’t forget to download the most recent version of jQuery here: http://jquery.com/download/

1. Create an icon for your app.

One of the nicest things about this process is that iOS is able to scale your app icons without any extra work from you. Create an icon that is 144×144 pixels and you will be good to go. Apple will scale it down to 57×57 pixels if one of your readers is using an older generation iOS device without the retina display.

2. Create images that will display at startup.

This is the more involved part of your design. By providing a startup image for each device you will be able to present your brand in the best light possible. Hence, you will need to create startup images for the following screen dimensions:

  • iPhone: 320×460
  • iPhone (retina): 640×920
  • iPhone 5: 640×1096
  • iPad – portrait: 768×1004
  • iPad – landscape: 748×1024
  • iPad (retina) – portrait: 1536×2008.png
  • iPad (retina) – landscape: 1496×2048.png

iPods will use the iPhone dimensions when launching your blog. As a note, iPhones and iPods will not launch the app in landscape mode so you do not need to create landscape startup images for those devices. However, the iPad does allow for landscape launching of apps, so you will need to create images for those.

3. Insert the code into your site.

You can use the following code:

The first line of code tells iOS that your blog is to function as its own app and not as a regular website. Without this code your app will simply load as a regular webpage within Safari. The next line specifies whether you want the black or the black-translucent status bar within your app. The status bar is the top bar that contains the time, battery, and network information. The remaining content is simply calling your app icon and startup images. As a note, if you remove the “-precomposed” portion of the of the rel= property within the link tag for your icon, iOS will render your icon with the glossy reflection effect that some developers prefer with their app icons. With your startup images you can use any names you’d like, but iOS requires PNG images.

4. Prevent links from launching other apps.

One of the best features about getting your blog to function as an iOS app is to keep your reader within your environment and keep them from venturing off of your site. To do this you need to tell iOS to disallow any hyperlinks from opening Mobile Safari. The easiest way to do this is by using the following snippet of jQuery:

There are other ways to do this without jQuery, but based on our experience this is the easiest way to accomplish this task.

5. Lastly, tell the web app to load the last page of the previous session on each launch.

This is not a required feature and you can choose not to install it, but like many apps that continue to run in the background you can allow your readers to immediately start where they left off. To do this you need to use the following jQuery snippet. It uses HTML5’s LocalStorage and SessionStorage APIs:

Well, that’s everything. Good luck! I hope that this allows you to bring your brand into the palms of your blog readers and that they enjoy the fantastic user experience this will create for them on the iOS devices. Leave any questions you have in the comments below and I will do my best to help you out.

A special thanks to Craig Janis of Fubeca Labs for his expert consulting on the process and code. You can check out all of Craig’s code on GitHub or tweet him at @cjanis.

Join The Discussion

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *