Tonight I started working on Media Queries.
Even though we are required to use the Skeleton Framework for our website, a large proportion on whether or not our site is responsive is dependant on 'media queries'. I've never, ever worked with them before, but I got a general gist of the idea of them in class through listening to other people.
I understood that in a way it is applying CSS to certain elements at certain points depending on the size of the page. In the basic index.html we were given to work off of a layout.css file was attached, with the following in:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
From what I understood from here I gathered that within each { } I would put the information for how I'd like an element to display at each point. To gain a further understanding I watched this video:
To explain my new-found understanding!
@media only screen and (min-width: 480px) and (max-width: 767px) {}
'only screen': 'screen' is a media type. Other media types include: print, handheld devices, TV's and projectors. My code defines that this media query is only for screens.
min-width/max-width: This is a media-feature. It does not have to be a 'max' height or width, it can simply be width or height, as well as elements such as colour.
max - upperbound
min - lower bound
{} : This is where you write your CSS that defines what each element should display like (or if they display at all) at each breakpoint.
Breakpoint: Where a new style kicks in.
Getting to grips with this inspired me to do something a bit more complex for my site. I started to consider how I could simply my design for when it hit the mobile version - the smallest width. Looking at my existing design, I noticed how cluttered it was. Quite a prominent aspect of the desktop version is the slideshow just under the navigation bar. It is not an element of my site that is 100% necessary - it's there partly for aesthetic benefits. Because of this I came to the conclusion that for the mobile version of the site it was disposable. Removing this slideshow allowed me to trim the length of the (already rather long) central banner.
Left: Original Banner
Right: New Banner
Implementing this has made me make use of what's now a very useful selection of code:
display: none;
Tells the browser not to display an element (if the page is at a certain size)
display: inherit !important;
Tells the browser to 'inherit' this element and display it. I used this to essentially exchange out the original banner with the new banner.
Combining this with my navigation for the mobile device, my site now displays like this (on mobile).
You can also see above that I've made the decision to change the colour of my home button to a grey that fits in with the colour scheme (the same grey was used in my iBook).
I decided to change the colour from red to grey as my chosen red was the exact same red that is featured very heavily in the main, central banner. As you can see above, I have coded the media queries to position the home button halfway over the top of banner when in the mobile state, so having the button and the banner the same colour just did not look good.
New Buttons:
I've kept the same principle of having an over (left) and up (right) state to give a little boost to the users experience.
