Revealed – Our Innovative Layout

Our Innovative Layout

In the policy of open source code for web page design, layout and structure, we are sharing our CSS and HTML design and layout so others can learn and use what we have learned. We have a very innovative design used throughout our various web page looks and transitions and we share the code with you and provide helpful information and tips on web page design, CSS, HTML, XHMTL, and CSS experiments.

Each web page is made up of two main elements. The HTML page features the structure of the page and the CSS (style sheet) represents the presentation style of the HTML page. Because CSS now includes layout positioning, the HTML tags can be rearranged, to a point, in any manner. This frees the designer from having to code the page in a certain order. Books, agazines, and newspapers are commonly laid out in this structure:

1. Top – Header

2. Left – Sidebar

3. Right – Content

4. Bottom – Footer

Without CSS, that’s also the order you would code a web page.

We are proud of our layout structure because we defied tradition through the use of Cascading Style Sheets positioning and are able to have the visual layout in the traditional form while the actual HTML structure flows differently:

1. Top – Header

2. Right – Content

3. Left – Sidebar

4. Bottom – Footer

Why the change? And what is the big deal about this? The layout is the same!

Yes, the layout results are exactly the same. What changes is what happens under the hood. Consider the path gasoline takes to get to your engine. Typically, it follows the fastest path to keep the engine fueled. But what if tradition was to have the fuel line go around the rear of the car and back to the front before it got to the engine? The longer the fuel line, the harder the fuel pump as to work and the lower the fuel pressure. Innovation would come from shortening the distance. Laying out your web page’s HTML structure in the traditional form means your content is third, and possibly last, to load. The longer it takes for the most important element to appear on your page, the slower the access to the content.

Let’s look at the specific benefits of our innovative HTML structure layout:

Important Content Loads First

Most Internet users are familiar with this effect: you click on a page link and the page begins loading. You see the header, then the sidebar, and you wait, wait…ah, a title…wait, and then at last the content is visible. Code within an HTML page loads in the order it is received, first come first serve. The further down the list the content is, the later it is to load. Move the content higher in your page’s structure and the content loads faster. Visit one of our pages and if you have a slow enough bandwidth, you will see the header, then the content, and the last thing to load is the sidebar. We’ve reversed the process, getting the content to the user faster. The user can begin reading before the rest of the page finishes loading.

Faster Access to Content

In our old table layout design, the content first appeared on line 70 of the HTML page. In our new tableless design, the content begins on line 46. Search engines have to plow through each line of code to get to the content. The main home page of our table layout had 4,713 bytes of data to translate within those first 70 lines of code. In the tableless design, there are 3,749 bytes of data within 46 lines, an almost 20% reduction in size. Smaller file size, faster loading and faster access to content. And less code to plow through for the designer.

Search Engines Adore Us

As a search engine’s robot or spider plows through the code and content on your page, most barely move past the top 25-50% before moving on. Moving the content higher up on the page means faster access to worthwhile data. Remember, search engines can’t “see” your page, so they don’t care how pretty it is. They simply are looking for data they can use in their database. The more data search engines collect, and the faster they can collect it, the more they tend to like what you have to offer. Some search engines actually score points for fast access to your data through CSS and deduct them for designing with tables.

Accessibility is Easy

Strip away our style sheet and the layout and content is still readable. When designing for accessibility, it is important to us that our web pages can be read by everyone, no matter their ability, disability, or hardware. Instead of being bored to tears waiting for the content to load, the user can get to the content while the sidebar sits at the bottom, waiting.

Streamlining our page’s structure through the use of style sheets instead of tables frees up our pages to be able to be viewed quickly and cleanly by anyone. The more who can read it, the more visitors we attract and keep.

Our Layout Structure

We’ve created a test example of our innovative layout for you to examine and use. The styles are built into the sheet rather than attached, so you can copy the source file and make your own changes. Looking at the test page, its layout, and the code underneath may help you better understand the following explanation. (To open the page in its own window to refer to while you read on, hold down the SHIFT key and click on the test page.}

By default, a web page is divided up into three main elements, the HTML, HEAD, and BODY. Inside the body, we add divisions called “containers”. These are elements which hold the data you see on the page.

Our main divisions within the body are: container, header, content, sidebar, and footer..

Note the order these elements sppear on the page. They begin with the container which holds the entire page. Then comes the header at the top of the page, then the content, then the sidebar, followed by the footer. Most page layouts are container, header, sidebar, content, and footer. Our HTML structure depends upon the CSS codes to position the page layout. The content within the HTML allows the fastest path to the most valuable information, the content, leaving all the sidebar and footer information at the bottom. This means the search engines and those with slow or less compatible browsers will see the “stuff before the fluff”.

We have an example of what one of our pages would look like without the style sheet to show how the content would look if all the presentation styles (CSS) were gone and compare it to the same page with the style sheets. We also have examples of how one of our pages would look when put to the test and viewed by the wide variety of computer monitors, Internet browsers and various software and disability features, giving you a real world view and test of a web page’s design.

Let’s look at each element individually and then as a whole to help you understand how we did this. It took several months of trial and effort and we found very little help on the Internet, so we are proud of the results.

And The Layout Begins…

We have set the HMTL and BODY tags to have no margins. This gives us more freedom to set the margins of the divisions within the container tag.

The container division ( #container) contains the whole page design within the BODY tag. All other tags go inside of this to contain them.

From here, our page is divided into four sections: header, content, sidebar, footer. The header is the top head of the page that spans the width of the page and includes the title information for our Website. The width of the header is set to 100% of the width of the container. The height is set for 100 pixels, but this may be modified.

Below this we have two columns: content and sidebar. The content column holds the content of the web page, including article information, photographs, and links. The sidebar column holds the navigation menu and other information related to the web page and Website.

There are two positioning elements in CSS. Absolute positioning fixes a corner of a container at an unmoving point on your page. Relative positioning sets the position of the container in relationship to its parent container and the containers around it. It tends to move with the window’s width and resolution. We have worked hard to maintain as much flexibility in our layout as possible, so we rely on few absolute positioning techniques and mostly relative positioning.

To set these two columns we used absolute values for the top left corner of the sidebar as the starting point and gave it a fixed width. We’ve given a left margin absolute position to the content column, but the rest of the elements are assigned relative positioning so they move and stretch with the window size. Notice there is no top position value for the placement of the content. It is automatically pushed down by the header above it. The left margin position leaves a gutter space 170px wide for the sidebar to fit into with its fixed position and width.

Since the sidebar is being forced into position, we’ve used a top and left position:absolute to lock it into place. The top is set 105 pixels from the top of the page, sitting below the header which is 100px high. The left is set for 0 and the width is set for 155px to fill the empty space left by the content’s left absolute position of 170px. The gap in-between creates a gutter of 15 pixels of white space between the sidebar and the content. The height of the sidebar column is set to a relative length of 100% allowing it to stretch the height of the page to fill in the space. We’ve set margin and padding positions for our graphic needs, but these can be adjusted to meet your own needs for space around the content within the section. If the header’s height is changed, the top position of the sidebar must be changed as well.

If anything within the sidebar margin exceeds the fixed width, it pushes the sidebar over the content as shown.

Remember that anything within the narrow width of the sidebar that exceeds the absolute fixed width of 155px will push the sidebar over the top of the content section. Because the left margin of the content section is set at an absolute and not relative figure, the items in the sidebar will just layer over the top of the content material. This is a structural weakness that comes with using absolute values, so take care and watch for extra-long graphics, words, or non-spaced text like web page addresses which may push the right margin out over the content column.

At the bottom of the page is the footer. It is set to a width of 75% and floats to the right to permit the content in the sidebar to drop down below the footer if necessary. If the sidebar in your own design never passes below the footer, you can set the width to 100%. If the sidebar content exceeds the footer, it will overlap it. The magic of this ending code is the clear:both attribute which clears all columns, graphics, and content above it to the right and the left above the footer code. This forces the content within the footer to sit at the bottom of all the other DIV sections (columns) and content, except the sidebar. It keeps the footer close to the content and gives the article content a clean bottom. We go into the specifics of our footer design in our section on the fonts, text, headings, and links of our web page design.

One Little HTML Bug Fix Makes It All Perfect

Before we get to the final set of code for our page’s layout, we have to fix a bug. Microsoft Internet Explorer, whether you like it or not, represents over 80% of all Internet browsing software around the world. Remember, you are designing your web page for an audience, and the majority of your audience uses Microsoft Internet Explorer. Internet Explorer also comes with a few bugs – problems – that need special attention in order for a page to look right when viewed. One of those little problems causes containers, lists, and links to jump around or appear and disappear. A lot of people have come up with ways to fix this, but none are as simple as the Holyhack.

I’ll leave it to the experts at Positioniseverything.net to discuss the “IE Three Pixel Text-Jog and Holyhack” better than I can. For us, the fix comes in two parts. The first one is to make sure and assign the display:relative to most division containers. The second part is to add to the style sheet the following rule:

In the HTML of every page we have the following:

The Holyhack adds a height to everything overall, which helps Internet Explorer set everything in its place. It isn’t the “real” height of the container but Internet Explorer recognizes it and it works. That’s the main thing: It works.

All Together: Our CSS Layout

We’ve looked at the specific sections and now it is time to see the whole thing. We’ve included a few of our basic designs as placeholders for you to insert your own design elements. We’ve also done a lot of experimenting with different CSS designs and you can find your own inspiration and ideas there.

Either place the code in a <style> tag block in the header of your web page or in an attached style sheet. The HTML is laid out below.

CSS Style Sheet Codes

HTML CODE

Now that you have the layout set in the style sheet it is time to add the foundation for your web page. The following is our basic HTML structure. Note: You will need to change the document type to reflect your own needs.

Layout Links and Resources

• Position Is Everything *****
• Eric Meyer’s CSS Edge *****
• Perched Upon A Lily Pad: The Ultimate Three Column Layout *****
• A List Apart ***
• A List Apart’s Flexible Layouts with CSS Positioning
• Glish.com CSS Layout Techniques
• Creating Liquid Layouts with Negative Margins (similar to our layout)
• Faux Columns: Column Stretches ***
• Brainjar’s CSS Positioning ***
• Two columns with color
• Mako’s CSS Positioning
• Toss Out Your Tables: CSS Is Your Scene
• Rich-In-Style Guide
• W3c’s Web Style Sheet Guide ***
• Jakob Nielsen’s Alertbox on CSS, HTML Designs and Accessibility
• Daily CSS Fun – Series of the same web page and the design changed daily for a month ***
• The Noodle Incident Tutorials on Boxes
• Maxdesign’s Colored Boxes and CSS
• Liquid CSS Layouts – Design Alternative to Table Based Websites***
• CSS Sketchbook
• Mandarin Design’s Boxes and Borders: Box Tips and Tricks
• Tantek Advanced CSS Examples
• The Nemisis Project – Collection of CSS Articles and Resources
• CSS Borders Design – Beauty in Simplicity
• CSS: Boxes and Page Layouts
• The Layout Reservoir
• Basics of Element Boxes, Margins, Padding, and Stuff
• DevLib Programming Resources on CSS
• CSS Border Image Text Box Styles – great examples
• CSS Tutorials from BigBaer.com
• The CSSShark Answers FAQs
• Websitetips.com – CSS Section of Resources and Links
• CSS Examples from W3 Schools ***
• Stopdesign’s Making the Absolute Relative
• ClevaTreva Designs’ Bug Proof CSS Style Sheet Generator – a must!*****