CA 2 - Site Elements

Media queries 

Media queries allow the style to change depending on the screen size of the device. Alot of people talk about designing mobile first but as I would rather view a site on my laptop I designed for this and then use media queries to alter the CSS for the that screen size. It inherits the styles applied for further up the CSS . Example if I have colour:black in the desktop version the iPad and iPhone versions will inherit this. 

@media all and (max-width:769px) and (min-width: 481px){

         CSS for iPad goes here 

}

@media all and (max-width:480px) and (min-width: 320px){

         CSS for iPhone goes here 

}

It is possible to load separate stylesheets depending on the screen size but I wanted to keep it all in one CSS file. 

When coding I stick to a workflow that works for me. Some people like to get all the HTML done and then go about styling it with CSS. I tend to do the site in sections. For example I will code up the NAV and then work on the CSS to get it styled the way I want. 

Because this is my first time doing responsive design I also used this workflow when working with the media queries. This probably isn't the best practise but it works for me. 

Another problem I had was how to test the site on the iPhone. On mac's the windows have a min-width so they never get to small. This size was just above the iPhone width size so I couldn't get the view I wanted. Apple's development software Xcode comes with a iOS simulator which was very handy for me testing out the site. 

Max / Min width 

Because I use liquid grids the elements can become any width depending on the screen resolution. On my index page I have 3 DIV's  floated so they appear inline. These have a width of 29.41176%. I gave them a max-width of 300px so they cant get any wider, I did this so the design stays consistent across screen sizes. I also gave them a min-width of 150px so they would not become too small. 

code

.grid-3{

    padding: 0 2.5%;

    max-width: 300px;

    width:29.41176%;

    margin: 100px 1.04166% 100px 1.04166%;

    float: left;

font-family: 'Droid Sans', sans-serif;

    min-width: 115px;

    }

Responsive Images

Thought this would be quite tricky but its very straight forward. Set the IMG to max-width 100%. It will then become the size of the div it is contained in.

code

.images-inner img {

max-width: 100%;

}

.first-image {

float: none;

width: 90%;

margin: 60px 0 40px 5%;

}