One of the absolute best aspects of CSS3 in my opinion are media queries. These advanced properties allow you to manipulate your website and make it fully responsive, and there’s no limit to the amount of media queries you can use. I quickly discovered the last time I used these in my creative web assignment, that you have to order them in descending order. I therefore edited my website to fit the largest resolution screen determined by my client and myself as the biggest screen size we anticipated the website being viewed on. As I own a laptop with a resolution of 1920×1080, I had to use a website called Quirktools.com and their Screenfly feature. It allows you to preview web pages on larger (or smaller) resolutions.

screenfly

To demonstrate a media query, I have taken this screenshot of the css code:

mediaquery2

Here is an example of the website being viewed on a 1366×768 resolution screen – please note that I have pretty much added all of the content and information now and created every project page, so the content you see in the slider is now my clients work! This is also before I have saved the css stylesheet with the above code applied.

mediaquery1

Here is the website after the media query has been applied:

mediaquery3

Visually the website hasn’t changed but the dimensions of each division have. The fonts have also shrunk down a tad to allow the text to fit in.

When testing the site, I discovered one flaw. When my client approached me with this brief, he explained that he wanted the website to be a full screen site only ie. no scrolling necessary. When previewing the site on certain computers, especially with browsers that were full of horrible toolbars, sometimes this would impede the bottom half of the page. On one computer I checked it on, you couldn’t see any of the navigation links or the footer. This was not good enough, and I did some research to determine whether I could use media queries to change the layout on set heights. It turned out that I could, so I began checking what points I needed to make changes at, using the home page as the tester, then repeating the process with the other pages. Obviously I only had to change one of the other pages to change them all as I was altering the css which related to every page.

tweak - media query height

I conferred with my client, and managed to persuade him that although this was a good fix, you can never determine how tall someones browser is going to be, so we’d need to enable scrolling for anything outside the parameters of the media queries. Although the queries can cover 95% of the solution, we needed the scrollbar to do the rest. As long as the users browser is of reasonable proportions, it won’t display the scroller.

Advertisements