Fluid Grid Step 1 - A fixed width page
To best understand how a fluid grid, or a responsive grid works, we should first demonstrate what it is that we are improving upon.
This page is a fixed width of 960 pixels. I have chosen 960 pixels because that is currently a standard width used in much of web design and is the basis of the 960 grid that we will discuss later.
If you are on a mobile device, it is likely that you would have to scroll left and right to see the entire contents of this page. If you are on a laptop or desktop, resize this window to see how it responds to you, the user, reducing the size of the page. Correct, it does not respond. Well, it actually does respond by giving you scroll bars so you can see my content when your screen doesn't fit my control parameters.
By using a fixed width page, I have taken the control from the users of my page and discounted their preference of interface / device. Using the fixed width, my control is more important than your access.
This is the way that the web evolved. However, it does not have to be this way. In the lessons that follow, you will hopefully learn how to manage that balance between designer control and user access.
Code Used to create fixed width:
Note: This code is used in the </head> section of this page as an internal style since it is only used on this page.
Notice that I am using semantic markup in this website, and incorporating some of the new elements of HTML5. For instance, the code is set apart by using the <code> tage and styled using CSS for that tag. Below, you will see the use of an <aside> tag and the <cite> tag when I give credit for the people who have provided me with the knowledge to do this website. The use of the <cite> tag brings a default presentation style that is rendered by browsers recognizing the tag, similar to the way the tags of H1 - H6 come with default presentation styles, but you can also customize the presentation style using CSS.
Next Lesson - Fluid Grid Step 2 - A fluid width page