Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 2 – Part 2 – HTML Structures for Responsive Design

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do is talk about the HTML structures for Responsive Design. Now, what’s an HTML structure?

The HTML Structure

HTML is structured by using divs. A div is essentially a container that you can assign various CSS properties to and it is used for organizing a web page, it’s used to give elements or containers width, sometimes height and all kinds of other things like padding, margin, background colors and borders. Those are what you can add to a div but the div is the basic building block of an HTML structure.

The Thesis Full Width Framework has this specific HTML structure that we are going to be taking a look at now. That specific HTML structure starts off with its own set of divs. In fact, I think what we’ll do here is start off by looking at it here in essentially Chrome’s version of firebug, it’s not firebug but it’s very similar to firebug.

Two Parts of HTML

You can see that the HTML has two parts, it has a header and a body. Inside the body, we have 3 divs, we have the header area div, content area div, we have the footer area div and you can see those divs changing color as I hover over those different things.

If I hover over the footer area, you can see down below where that footer turned blue, content area, that turns blue and header area above that turns blue. We’ve got these 3 different areas and these are divisions that fill up the entire browser window. They span from side to side of the browser window and their header area is the top part, the content area is the middle and the footer area is the bottom part.

Each one of these is only as tall as it’s necessary in order for it to contain the information that’s in it. It’s the full width of the browser but its height is determined by how much content is in it or what it’s containing.

Main Horizontal Containers

You’ve got these 3 main horizontal containers and each one of these horizontal containers has its own container inside of it and that container is called, “Page” so you’ve got div id=header”_area” and div inside of div id header area. Let’s just move that down a bit so you can see what that looks like.

A Div is the width of the page and its width is currently defined by the widths that we gave for columns plus what Thesis does with padding and margin. That width is defined in our design options and from that Thesis calculates that width and places it in layout.css every time you hit save.

This is the internal container, it’s only as wide as the pages and this is something that we will be changing the width of when we create the responsive part of the design. The content area has exactly the same thing. Content area also has a<div class=’page’>  inside of it and that <div class=’page’>  is the same width as the <div class=’page’>  in the header area. The same thing is true with the footer area. The footer area also has a <div class=’page’>.

So we’ve got these 6 containers, header area, header area page, content area, content area page, footer area and footer area page. Those are the main 6 structural elements of the Full Width Framework and each of those structural elements has their own parts.

For example in the header area, there is a menu container which holds the main menu and there is the header which holds the header information so we’ve got these two different containers inside of here. The content area is similar, the content has a thing inside of it called content box. If we work on a No Sidebars template, inside of the content box, we would have a <div id=’content’ and a div id sidebars with two other containers.

Obviously, if we take a look at the footer, it also has some containers inside of it like footer and inside of <div id=’footer’>, there are these paragraph tags. The footer area has these 3 structural elements, footer area, footer and footer Those are the main structural elements.

If you’re having a hard time visualizing those 3 things, we’re going to write codes so you can see those here quickly. Let’s open up our Thesis Responsive style.css and leave body background, black.

Apply Colors to Structural Divs

The next thing we’ll do is say, #header_area{background-color:efefef;} for light gray, we’ll make #content_area{background-color:yellow;} and footer area, #footer_area{background-color:pink;}. We’ve just given each of these structural divs colors. We’re going to see what happens when we apply those colors to this.

Let’s see, we’re on the right spot, Thesis Responsive, and let’s upload style.css, come back over here and refresh it. You notice nothing happened. The reason nothing happened is because the style.css file in the Thesis child theme doesn’t get added to the whole collection of CSS files until you save.

If you want changes to style.css to be applied, you actually have to come over here to Thesis Design Options and hit Save. When you hit Save, that takes the codes you put in style.css and writes it into the common file that Thesis creates called layout.css.

Now, we have our header area we said was gray, our content area we said would be yellow and our footer area we said was pink. Notice you don’t see any black even though we said body was black? That’s because the header area, content area and footer area is enough content to fill up the browser window so the body is overlaid by these other 3 elements.

I think I’ve got too much content in all of these. It doesn’t really matter, we’re not going to see a page when there’s not enough content but if there wasn’t enough content for these 3 sections to fill up the page, then you’d see the black down below but since it fills up the browser window, you don’t see that.

I could show you that. See now, you can see the black that shows up down below here. That black shows up below because the browser window is now bigger than is necessary to contain the header area, content area and footer area.

The reason why you don’t see the gray going all the way through is because page has been given a color also and page has the color of white which is automatically set in Thesis Design Options. If you wanted to see what happens let’s say in header area, #header_area .page{background-color:fefefe;}, I don’t have any idea what that color is.

Let’s turn on style builder, header_area .page style builder, background, background color, let’s set the background color to a very light purple. There’s our background color now for header_area .page, if we hit Save, upload and refresh. Remember it won’t show up because what we need to do is save Thesis Design Options and now it’s added to layout.css. You can see this is the content of header_area .page is the purple section.

What Happens when a Responsive Site Responds to the Device Width

You have got these 6 sections here and let’s go over to About Us for a second here. When a responsive site responds to the device width, it has some choices. The first choice it has is to do what it does when it’s not responsive which is it centers the page until the page is now too small then it cuts the page off and you’ve got the scroll bar down there at the bottom. That’s what it does without any responsive code to it.

However, when you add responsive code to this, it centers the page, centers the page, centers the page, centers the page then it starts to change. You can see right now that we have it designed so that the content area gets smaller and smaller until it gets to a certain place and at that certain place we say, “It should not get any smaller than that”.

When it gets smaller than that, what happens is these things stack instead. Now the sidebar is stacked below the content. When it was this size, the sidebars sat beside the content and actually, you can see the footer stack. In fact, the footer started stacking right away. We let things get smaller and as soon as it gets too small, we just start stacking the footer.

The same thing is true when we get down to this width, the footer stacks one on top of each other, all four. Here, the footer is stacking two on top of two. We start off by shrinking, we get to a minimum size and we start to stack. There’s one other thing that people do with a responsive site sometimes and that is to make things just entirely disappear. An example of that might be the Blue Masters top bar.

On the Blue Masters theme, the PSD file has this top bar up here with the search function, some social networking buttons and tiny menu in there. I chose not to include that in the child theme because you don’t want a whole bunch of things, especially administrative ones, at the top of the page if you’re trying to design for mobile devices because that would fill up the browser window when somebody comes to your site. What I could have chosen to do is to make that disappear when the device width gets to be at a certain size.

Those are your 3 choices. Choice one is the widths shrink then they started to stack and they can disappear. You can use all 3 of those as strategies for making these structures respond.

Now, what’s happening here is that the structures that you see responding right now are not the 6 that we talked about because what’s happening here is that the content and the sidebars are stacking inside of content_area .page so, content_area and content_area .page remain elastic but what happens inside of them is the things they contain end up stacking.

We’re really going to talk about that a lot next week but I want you to understand what we’re talking about here because we will be creating this HTML structure in such a way that it is capable of stacking. You can see right here it gets smaller, it starts to stack then it stacks and centers.

One of the ways in which this is accomplished is by properly constructing the HTML so that it is designed to be able to stack like this.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one