Summary of errors that occurred

27 Jan

After fixing the initial hiccups after uploading my webapp onto a live space, I then continued to finish the design and content of the pages. Here’s a list of problems that occurred and screenshots to explain my process along the way.

The first notable thing I decided to change was the theme. As the logo has black text, it gets lost within the header, so I changed the theme by simply putting


in my <div> tag. jQuery mobile has a list of saved theme colours so that you can easily change the appearance to suit your content. Below is a comparison to show the wrong and right theme to suit my design; which also matches to Porsche’s house style of recurring white/grey colours for the layout.

wrongtheme righttheme

The next issue I had was with the set CSS formatting for the pages. Because jQuery mobile relies mostly on one .html file, this meant that every <div data-role=”content”> (on every page that I create), it will assign the images to be the same size as I have done so for the homepage. This means that my plan of creating a larger image to be placed at the top of each car’s page would be impossible. Luckily, you can override the CSS formatting by adding


to the object/id that you wish to re size differently. I also had an error with the collapsible lists, which was due to another missing </div> tag. You have to regularly check your coding for simple mistakes! Here’s a screenshot of the two errors to visually explain what I have summarized;

csserror collabsibleerror

And this is the result of being able to change the width of the image on another page without blindly editing the CSS, and checking the coding thoroughly;


You can see that i have also added buttons to the navigation and kept the black navigation, both for their own reasons;

  • the buttons are far easier to use on a touch screen device compared to hyperlinked text (without accidentally pressing the wrong one)
  • the black navigation won’t be confused as a part of the content, and thus is kept this colour to stand out so you can’t get lost on the pages.

I have removed the iPad link and decided not to continue with it. If I wanted to go ahead with an iPad version, I would need to pay for a license to then publish it on the apple store, and obviously for this exercise I would be facing law suits for copying Porsche and making money from it!

The other alternative was to upload a .pdf and then embed it into a website, which would mean I don’t need to pay an excessive yearly fee to have a license to publish it, and I can easily maintain and edit it. Unfortunately upon trying this path, I came across further errors that I couldn’t resolve. I found a tutorial explaining how to embed a PDF file into a html page (, but this is what my result was;


Now this was viewed on my 23″ monitor, and you can see that the PDF seems to be trapped in the top end of the webpage, not stretching to fill the page. The code itself set the width and height of the pdf file to 100%, so there is no reason for this error to occur. It could be an issue with the chosen web browser (chrome) but I doubt it. I also tried to view it on my galaxy note tablet, but the PDF didn’t even display. For this reason, I came to the conclusion that it wasn’t worth putting more time to try and include an iPad version of my web app for the time being, but it will be something that I want to resolve for any future projects.

final_galaxys3 iPhone Retina GUI PSD

PSD phone templates:Galaxy: Eryk   iPhone: Geoff

These were two screenshots taken on different devices to confirm that my design was working. The Samsung galaxy was taken before I changed the footer’s links to buttons, and the iPhone was afterwards. I researched to find code to put the web app to full screen when viewed (as shown below). I felt that adding the full screen option would allow the user to be more likely to continue using the web app another day, as it feels nicer to be on a website without the website URL bar constantly being on the page allowing less room to view on the phone.

Source: stackoverflow

I researched into the top devices for the smartphone category, so that I knew what I should be testing on to ensure that it works, and naturally the samsung galaxy and iPhone were the ones which on average came out as the two main competing devices. Android and iOS are the two operating systems for the devices that are in competition, which is why I focused on the two to ensure that the web app was viewed correctly on them. The research was from 2012, which would have been before the buzz of the windows phone appeared along with the new Windows 8 OS in late October. The Windows phones come in four different resolutions, one of which won’t be supported by my web app. I am not sure if there is code to support this issue, as a tablet’s resolution can be as low as the phone’s maximum resolution (768×1280).

Notable sources from the research include:

DigitalBuzz    GeekWire

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: 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: