Navigation for the Page Should Go Here
Ideally, if you are going to use the two column up front like this, you should have the first bit be page navigation. It's really only neccessary if you have some other bit next to it like the one to the right.
This Column is classed "left" and the other "right." That's your left and right, not the page's.
This is an H2 by the way
I put this here just to show what it would look like in the two column format to have 2 headers. There shouldn't be many cases that you need it in, but what the heck. Maybe I can switch it up and throw in an H3
Here is an H3
That must have blown your mind. I know it did mine. Should we take it all the way down to h4?
Nah, we should save something for later.
Sidebox
This here is the "sidebox" class. It only works inside a twocolumn div.
This is best used when you have some notes about the following content but don't want to push the content down any further. You could also use it when you have generic "sidebar" information.
By the way, below is a sidebar H3. There is no sidebar H4. If you need one, you have issues.
Page Checklist
- Here is the site map
- Make sure the image above has the right section name. The correct one can be found in the section's image folder. There is also a default in the site image folder.
- A copy of this page is in the _templateimages folder, named howtocodeme.html.
Another Navigation Example
Sometimes you can cut right to the content. This is how it looks when you do that. Usually you have something to say before you dish out the navigation. That's what I'm doing here. Actually, I'm just filling space up to give the illusion of content. I think most text on websites is pretty much just that.
Headers and other type
Here's an example of how the header system works. There is only one H1 on each page, and that is in the image up top. The top level that you should be using in the copy is H2. What does that look like? Take a look at that Headers and Other Type header above. Yes, the one with the grey wedge on the right. Maybe I should make a section out of it.
Using Header 2s
Header twos should be major breaks in content. They should also be somewhat brief. The style can handle up to two lines, but three is too many. It's easier to get in the two-column format. In either case, you should rewrite long headers whenever possible.
Header 3s and 4s
That above is header 3. There's not much more to say.
This is a header 4
If you need another level down, you should rewrite/organize the copy. H4 is all you get, and frankly all you need. Four levels down is way too much for this content.
Other type rules
If you need something bold, you should use <strong>. I know Bob thought that it was bad, because screen readers would yell or something, but that's what is supposed to happen. Rolling your own class for bold hides part of the content from screen readers, and that's not ADA.
Italics are different
Italics is case by case. If it's something that the text is trying to emphasise, the <em> should be used. If it's a publication name, though, you should use <span class="publication"> instead. The difference is that one is being used to communicate something (empasis of an idea) and the other is a gramaical convention. It's a narrow difference, but it should be adhered to.
Bullet Example
This is how unordered and ordered lists look in this format. You've already seen unordered lists. Just pretend for a moment that you haven't, like that Christmas where you had broken into your parent's closet and looked at your presents the week before. You still put on a show for your mom so she wouldn't cry. Do that here with the bullets.
- Wow this is amazing.
- Pow! I've never seen bullets like this before!
- Zowie ... eh
That wasn't so hard, was it? For lists that short, you should probably split them up into two columns, like we did above. I know, those were better. Thanks for pretending, though.
Oh here are some numbered lists.
- That's one.
- Two is the next one.
- Three happens next.
Moving along.
Oh, by the way, you should put that "top" link at the end of every section if your page goes past "the fold." It's just a p tag with the "top" class with a link that goes to "#top." Confusing, I know.
Image Rules
Whatever you do, you can't cram just any image into this space. If you have to work an image, photo, graph, whatever into a page, it should fit into the grid. You have two options in this case.
Image Option 1
Do one wide image. Height doesn't really matter, just the width so that it fits in the page nicely. How wide you ask? This wide.
Do you see how nicely that fits with the rest of the text? I bet you do. Now, you may be asking, "hey, can I have any image up to 580px?" No, images must be exactly 580px wide if you want to use this option.
They shouldn't have a white background, either so that the content of the image looks like it is floating in the space. It needs to have a defined border on the left and right. The easy way to do that is to just not have a white background. A faded grey one is just fine. #EEE should work swell.
Image Option 2
You have one more option, and that is to have a thinner image that fits into the two column width. There are two ways to get this. The first is to use the two column class and fit the image into the right column. It should fit just fine.
The other way is to use the "sideImage" class in the img tag. It pretty much does the same thing.
And yes, just like above these images need to be exactly 280px wide. They also should have defined edges so that they square with the column.
Clearing floats
One thing to note is that <p> and <h4> will clear left automatically, unless it's in a twocolumn div. That way, you don't need any additional markup to end the twocolumn div. <h2> and <h3> will clear both. So will "top." You can't use those three with the float. If you really have to have one of those two headers next to an image, use the two column div.