Initial live testing

24 Jan

I returned to college yesterday to compare the progress I had made with some colleagues. One friend suggested one of us testing our web app out on web space so that it was live. Upon doing so we saw that the design had stretched, as it does when you preview it locally in a web application. We thought it was odd, as we had designed our app with the starting template for a mobile device, yet it is displaying similarly to the full size website preview. We searched for a similar error on Google  as we were sure it would be a common issue; the mobile web page being stretched when it should be the actual design and not need to be stretched at all.

We found the issue, and the fix was to add this line of code to the head of the .html file:

<meta name="viewport" content="width=device-width"/>

Answer found here

This basically tells the website to change the viewport resolution depending on the device width, which is what I’d have assumed it would do automatically. Everything requires of code to take effect; nothing will appear automatically. Probably something important to note about coding.

This then got me thinking more about what I could do to customize the web app. I did some research and found two features that I could include which would be a nice finishing touch;

  • removing the top search bar – entering full screen
  • creating a custom icon when you “add to home screen” (essentially mimicking the app style of opening)

These are both easy to include; requiring extra code to be placed in the head similarly to the previous function explained above.

The search bar can be removed by adding a line of JavaScript in the <body> tag, or a more comprehensive set of code instead. Optionally there’s a function to remove it on Apple’s Safari by adding 2 lines of code in the <head> tag, but obviously it won’t work on any other smartphone device which doesn’t use Safari.


To add a custom icon for if a user decides to save the webpage as an app icon on their iphone, the code simply links an image to the code for the device;

<link rel="apple-touch-icon" href="/custom_icon.png"/>

It’s also possible to upload different sized icons all linked to the same <link rel>, given that the iPhone/Touch and iPad will have different sized icons.


Apple Developer library

Leave a comment

Posted by on January 24, 2013 in PCA - Interactive Design


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: