Customizing Website for IPhone/IPad Web Application

by Shubham on September 26, 2011

Creating a native IOS application for your website will be a challenging task if you’re not familiar with Objective C. These are the few tweaks which will make your web application look-alike the native IOS application with existing HTML and CSS knowledge.

Adding a Custom Web Page Icon for IPhone/IPad Home Screen

Adding a website icon is easy, you can use any graphic to create icon of your website. The beauty with iOS is that you don’t have to think for the glossy finish and the rounded corners; it’s automatically added by the device.

However if you want to customize your icon your way, you can use a precomposed image.

clip_image001

This is the image of techcrank.com.

ios_web app

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>

or for a precomposed image 

<link rel="apple-touch-icon-precomposed" href="/ apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png"/>

Adding a Splash Screen-

Like native iOS applications web applications can also have a start-up image. By default, the splash screen shows the screenshot of the web application the user visited last time. For adding a splash screen you can add this to your code.

<link rel="apple-touch-startup-image" href="/startup.png">

Hide Safari Components-

If you want to hide the safari interface elements from your web application, just add the code-

<meta name="apple-mobile-web-app-capable" content="yes" />

Preventing scaling-

If you want to disable pinch to zoom in your web application and prevent scaling use the viewport Meta tag:

<meta name="viewport" content="user-scalable=no, width=device-width" />

Caching application files-

If you want to make your web application to work offline, or you want to improve its load time create a cache manifest file and link it to the main page of web. When a cache manifest is in use the web application launches with the last version.

With these techniques you can make your web application look alike the native iOS app. These tips would work for the home screen saved applications. Remember to use ajax in your web applications as without ajax oriented applications it would open any links in safari and you will lose any settings.

  • Similar Articles

      None Found

    { 4 comments… read them below or add one }

    avatar nitin nema September 30, 2011 at 3:28 pm

    super duper like i tried on my friend phone thanku guys

    Reply

    avatar Windo October 24, 2011 at 11:32 am

    Hi, I can’t see the Caching Application file codes

    Reply

    avatar Windo October 25, 2011 at 11:26 am

    is this the right code ?

    Reply

    avatar Shubham October 25, 2011 at 12:11 pm

    Hey buddy,
    As cache manifest itself requires detailed explanation I am doing a tutorial on it. The rest of the code is good. I have implemented it on the website.

    Reply

    Cancel reply

    Leave a Comment

    CommentLuv badge

    Previous post:

    Next post: