RSS

Testing web app on smartphone

27 Jan

I decided it was time to test my design on a smartphone so I could see it live. Unfortunately I noticed that the design had changed dramatically from what I saw in DreamWeaver, in terms of the layout. This is due to the jquery.mobile-1.0.min.css, which had set the design’s “content” <div> to fit “85%” of the device that it is viewed on, which is why all of my images had collapsed from the 3-to-a-row rule that I had created. I changed it to 95% so it allows a more reasonable area for the design to fit in. I have also added extra code in the CSS so that the images will keep the aspect ratio/proportions. It seems that images in the header are restrained to a certain size as my logo is cut off after it reaches a certain width.

livetestwrong

As you can see when comparing this to my previews during the design stage, the layout doesn’t match. The porsche logo has been cut off due to a restriction of the header’s width due to the additional button spaces on the left and right, and the cars are bigger than they are supposed to be.

This was fixed by setting percentages for the widths, and heights to “auto”, so that they keep the proportions, and automatically adjust to the device’s resolution while keeping the layout. This will result in the web app looking highly stretched on a computer, but that’s fine as it’s not intended to be viewed on one. I could possibly create a separate version for the web which loads a page informing them to view it on their mobile device with JavaScript code.

stretchedonpc

This is what it looks like now on my computer, though as you can see from the previous image from the post about creating the homepage that is what it looks like on my smartphone. To amend this visual error on the web side, I will create a JavaScript code that will redirect the user depending on the screen size. The code looks like this;

if (screen.width >750)
window.location.replace("http://www.porsche.com/uk/")

This will check the viewing device’s width, and if it is above 750 (iphone 4 is 320×480, iphone 5 is 640×1136, samsung galaxy s3 is 720×1280) then it will redirect the user to porsche’s website. This is what porsche does similarly on their website, as they have a mobile version for smartphones which you are redirected to. I tested it with a simple redirect to another .html file which had a line of text, and it worked as shown below on my computer and macbook;

webredirectScreen Shot 2013-01-27 at 11.56.30

 

Advertisements
 
Leave a comment

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

 

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: