Liquid

In week ten we learned two ways of making our websites responsive (liquid) so that they can expand or shrink to different widths to accommodate different sized monitors and different devices like phones or tablets:

  1. By defining a “max-width {}” and “min-width {}” instead of just “width {}”

    #container {max-width: 1280px; min-width:768px; margin: 0 auto; }

  2. Or by using percentages (%) to define the width and height instead of pixels (px).

    #container {font-size: 90%; line-height: 150%; width: 80%;}

You can apply ether or both method to all of your tags at once, including the class and id tags. So “width:100%;” contains the width of the content/image to the max width of the container or browser it is inside while “max-width:100%;” contains the width of the content/image to the max width of the content/image itself.

Web_20
For certain spaces that you don’t want to shift in your liquid layout just leave them as pixels.

Coding responsive columns with percentages for example, requires you to account for margin and padding with percentages. So with the 960 grid structure we leave 1% margin and a 1% padding on both sides, totaling the -4% total per column, which makes the 1/3 columns 29.33% wide. (100/3= 33.33 & 33.33-4= 29.33). 960gridPercentages are scale able, and so are em values. You can convert pixels to percentages and then em’s
px/16= em
em x 16 = px
em x 100 = %
% / 100 = em Web_21You can make your images fit to the box by targeting a specific sub class of a class. So for example if I want all of my images to fit to the size of my 1/3 column I would enter:
“.col13 img {
width:100%;
height:auto;
}”

On phones we need to take into consideration the small screen real estate and the touchscreen compatibility, so it is industry standard to make everything a single column grid to prevent touch conflicts.

So the first thing to do is to tell the browser to check the view port your user is using to determine weather they are viewing from a commuter or a phone. This is defined in the meta tag within the Head of the HTML document by adding a “viewport” name. <meta name=”viewport” content=”width=device-width, initial-scale-1″>

Then we can create a conditional statement in our CSS known as a media query. This basically defines a set of perimeters telling your CSS to prioritize certain attributes if the right conditions are met. And in the case of a phone, we need the media query to apply certain attributes to our tags depending on the width of the users view port. and while the current mobile matrices are 480px, they will no doubt change over time so for all your different and latest Mobile Matrices visit: https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

Average phone size =480px x 960px
Average Tablet size = 780px x 1024px
Average desktop size = 760px and up

Add different conditions with @media query:
/*DESKTOP*/
@media screen and (min-width:769px) {
#container {
    width:960px;
    height:50px;
    background:#F0F;
    margin:0 auto;}
}
/*TABLET*/
@media screen and (min-width:481px) and (max-width:768px) {
#container {
    width:700px;
    height:150px;
    background:#FF0;
    margin:0 auto;}
}
/*PHONE*/
@media screen and (max-width:480px) {
#container {
    width:440px;
    height:50px;
    background:#0FF;
    margin:0 auto;}
}

And if you dont want your image to display on mobile incase it gets in the way of your design when everything swithces to a one column grid, simply type “display:none;” in your media query. (“#embeddedImage {display:none;}“)

And as a bit of extra flare, you can animate your transitions by adding “transition: all 0.3s ease;” to each individual tag like the anchor (<a></a>) tags or simply apply it to everything by writing “* {transition: all 0.3s ease; }” above the @media queries in your CSS. Just keep in mind that using * will animate absolutely everything, including your site as it loads up as well.

And here is my finished product: http://www.lufatest.com/humber/gdpw/gordan/_7_coffee/index.html

 

 

 

 

 

Advertisements

One Comment Add yours

  1. anandjag says:

    Thanks gordon this is exactly what i was looking for.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s