Monday, 24 October 2011

Testing with Media Queries

So, having finished my client site, I thought i'd have a play round with media queries as I had never tried to incorporate it into my designs before. My site encountered a problem when it got to a certain size in which the 'Where does your money go' heading got in the way of the nav, causing everything to move.

I thought about changing all the font sizes, however this would have been a lot of hassle and the simplest way of correcting the error was to remove the header altogether, just leaving the nav. By doing this, the site still functions and it doesn't feel as if anything is missing.

I also made it so, when the screen gets to 600px wide, the width of the content on the homepage also decreases.

As a result my site works down to resolutions of about 500px wide and if the time scale of the project was slightly longer I would attempt to create a version that would work on mobile devices, however I believe this would be too much work given that there's only 2 days left and I don't want to mess up the whole site by trying this. Overall, I am very pleased with what I have produced as I have included Media Queries which is something that I haven't used before.

Here are the screenshots of the site at certain sizes. .



No comments:

Post a Comment