Saturday 4 June 2011

Meadowlands Mobile Website

For my mobile website I began with my mock up designs, and quickly discovered that they were too complicated for a mobile to handle therefore I would have to simplify it however using some of the same aspects as like my original design.



I began with reading up on Jquery Mobile which would help me in discovering how to create a website that is optimised for mobile. The main website that helped me was:



http://jquerymobile.com/ This website was able to explain and justify to me what I would have to do to make a mobile optimised website using HTML and CSS.


I therefore began building my website using the basic code that I had found from this site, and then adapted it to what my design would be.





From my original design I have kept only the top section, which I had designed. I kept this part of my original design because I felt that it made the mobile site more inkeeping with the original website that is already live, and therefore people would be able to associate this mobile site and the full website.


The features such as the buttons, the header and the footer have all changed, this is mainly due to the Jquery basic coding, as I was trying to keep it as simple as possible.



The header and footer I made the same dark blue as what is in the logo, in the sun beams. This is because then there would be some continuity throughout the website.



The buttons I have left the similar colour to the background, which is a blue/grey colour, I felt this worked with my logo design, as at the bottom the blue faded to a similar colour, which then draws people eyes to the links.

Each page will be the same, however, instead of having all of the buttons, there will only be a back button and the information that is needed for the section that people will click on. I have chosen to do this because I feel on a mobile optimised site, you would not necessarily have all of the links on each page, as doing that would over complicate the site, therefore sticking with my simplicity idea I have kept the back button on all of the information pages and I have put all of the links on the home page.

As I am demonstrating here:

No comments:

Post a Comment