With the average screen resolution growing as well as the speed of most web surfer's internet connections, people have been putting more and more stuff on their web pages.
Sometimes these add-ons are useless widgets that just take up space and bandwidth, in addition to distracting or annoying your site visitor. In other cases though, these extra elements are important to the site and help to promote featured content as well as displaying ads which help keep the site running.
With all the extra HTML on the pages these days, the main content sometimes gets buried deep into the HTML. With some people using WYSIWYG HTML editors, they don't even realize it.
This can sometimes affect how search engines view your pages, and most importantly, how users see your pages. So today I want to go over some important tips to improve SEO and user experience. They involve some general rules that you might already know (added here for completeness) and some examples, including how to layout multi column (2 column, 3 column etc) web pages to increase usability and make them more search engine friendly.
You're going to need to know at least a little HTML and CSS to do this. Even if you're using a graphical HTML editor, you can usually modify the HTML directly.
Put Your Main Content First
You want the main content of your page to show up as early as possible in your HTML code. If you noticed on this page, the Header showed up first, then the blog post, then the sidebars. If you weren't paying attention, you can clear your browser cache and reload the page.
This way, a visitor can start reading what they came for right away. It's best not to make your visitors wait. Some people try and do the opposite, so visitors can view ads while they wait for the content to load. While this may increase click through rate on some sites, in the long run, it's a bad idea. It diminishes the quality of your site and the quality of inbound links you might receive.
Below I'll give some common examples to get you started. I've included the styles in the HTML tags and gave each section a different background to make it easier to see. I also use a div tag to clear the space after the floats. There are other ways to do this, but this works in all cases and is the easiest to show here.
Optimized 2 Column Layout
Many people just float one element and it's usually the side element, not the main content. The element you float has to come first, so that puts your content further down the page. You can either make sure you float your content, then put your side column but I find it better to float both like this:
1:<div class="wrapper" style="width: 600px;"> 2: <div class="mainContent" style="float:left; width: 400px;"> 3: Main Content Area 4: </div> 5: <div class="sidebar" style="float:right; width: 200px;"> 6: Sidebar Area 7: </div> 8: <div style="clear:all"></div> 9:</div>
To have your main content display on the right, simply switch the float:left and float:right attributes in each style.
Optimized 3 Column Layout
The 2 column layout is pretty simple. Where I've seen the most problems is with 3 column layouts. There are two common ways I've seen people implement a three column layout.
Float both sidebars left and right and then have the main content area display with a specified width. This is the worst as the HTML code for both sidebars needs to be displayed before the main content. The main content also renders after the sidebars and if you have a lot of junk in the sidebars, it can make your site appear slow.
Float sidebar, content, sidebar in that order. This is a little better, but you still have the HTML of one sidebar showing up before your content which can cause problems.
The best way I found to get your main content to load first, is to break down the layout into groups of two columns. It doesn't matter how many columns you have, using this simple method you can put your main content almost anywhere in the HTML you like. Which should be the top.
1:<div class="wrapper" style="width: 600px;"> 2: <div class="leftWrapper" style="float:left; width: 450px;"> 3: <div class="mainContent" 4: style="float:right; width: 350px;"> 5: Main Content Area 6: </div> 7: <div class="leftSidebar" style="float:left; width: 100px;"> 8: Left Sidebar 9: </div> 10: <div style="clear:both"></div> 11: </div> 12: <div class="rightSidebar" style="float:right; width: 150px;"> 13: Right Sidebar Area 14: </div> 15: <div style="clear:both"></div> 16:</div>
This should help get you started making sure you design your sites for both visitors and search engines properly.
Below you'll find some more tips.
Don't use table layouts
I'm still surprised I see sites that are laid out using tables. Tables were never meant for structuring the layout, but for displaying tabular data. Because there were no other methods to exactly position elements, tables became the norm. But the problem with tables is that the browser needs to read in the whole page to start displaying content in most cases. If you have something on your page that is loading slowly, your visitors could be staring at a blank screen for a long time. They may even get so frustrated, they click the back button before they even see your site.
Use Cascading Style Sheets
Use of Cascading Style Sheets doesn't have the same problem as tables. Your page can start drawing itself incrementally. Some parts of the site can display while other parts are still being downloaded. CSS isn't a silver bullet though, you still need to layout your site wisely, especially if you're using any external resources such as widgets or ads from other sites. More details will be broken up individually below.
It's best to put your styles in an external stylesheet (.css) file. There are three main benefits for doing this.
- Browsers cache css files, so after your visitor downloads it once, they don't have to spend time downloading it again if they visit another page.
- If you want to make a change to your styles, you only have to edit one file.
- Search engines are more interested in the content than things like how much padding you have around a block of text, so they don't bother with styles. You want to minimize the HTML tags they are not interested in on the page by putting style information in another file.
Use multiple css files
Sometimes you'll have sections of your site that require different styles. If you notice that your site visitors don't always visit different sections of your site, you should split up your styles into different css files. That way, they only have to download the styles they need, and not waste time and bandwidth on styles they don't. If your css file is fairly short, you can skip this.
The way I normally do this is to create a main css file that all or most pages will use, then set up different css files for different sections. Then put a tag for two or more css files on every page.
If a visitor goes to more then one section, they'll need to download another css file, but most visitors seem to only visit one section, and in many cases only one page.
Always set Alt, Width and Height for Images
To display an image properly, the browser needs to know it's width and height. It can download it and check the file, or you can specify it in the HTML. You should always specify the size in the HTML. This way, the browser can layout the image, then display it after it has downloaded.
Search engines don't know what an image is about, but you can tell them by using the ALT tag on images. This is an attribute in the IMAGE tag that is displayed if users have images turned off, or if they are using a screen reader. Simply put a short description of the image there.
Your image tags should look something like: <img src="/images/someimage.jpg" width="250px" height="300px" alt="picture of something" />
This way, the browser knows to create a space for the element and it won't slow down processing of the rest of the page in the event that the script loads slowly.
You can't do this in all cases, especially scripts that need other information on the page, such as contextual advertising programs like AdSense. But for most external widgets and affiliate ads, this works great. It even gives you the benefit of caching as well as being able to modify one page to make changes throughout your site.