Web design tutorial, prioritising your content

Script from the video blog

James: Hi and Welcome to our web design video blog, we’re Nick and James from Creare. Today we’re going to show you the basics of using CSS to prioritise the content of your website. Floating your designs DIV id’s and classes allows you to present the coding of your website in a custom order that is beneficial to both search engine rankings and your web-site’s users. If you’re currently using CSS to build your website layouts then you’re already halfway there.

Nick: Essentially, when designing web-sites with DIVs in CSS, ‘floating’ certain elements in a certain way can allow you manipulate the order in which your web page is crawled by search engine bots without effecting the visual presentation of the website. Additionally, it also can effect the order in which elements on the page are loaded. Here’s a demonstration of what we mean.

Video Demonstration (James).

OK, so to demonstrate what we mean by this, we have prepared a ZIP folder which you can download online at www.crearedesign.co.uk/blog/. Inside this folder there is essentially 2 index pages and their supporting CSS files. If you open up index.htm first you will see that we have prepared a simple page for this demonstration. So it’s a very simple website with a logo and navigation and you can see that there is a main ‘right hand’ column and an inferior ‘left hand’ column.

Usually the way that you would naturally code this in HTML and CSS is that you would work from left to right. So in the coding you would expect this left hand column to come before this right hand column. Now I’ve got a toolbar for Firefox that allows me to disable the CSS on a web page which allows us to see the page in a similar way to a search engine bot. You can also see the loading order of the HTML page. So it goes logo then navigation and as you can see, this left hand column with the heading three and heading four, comes before my main content which is the column on the right that contains the Heading One tag and the rest of the main content.

So if I switch the CSS back on, essentially what we want to achieve in the coding is to have the pink div load first, ahead of the inferior orange column to the left. So lets open this HTML file up in Dreamweaver, I’ll use the coloured one for the example. So let’s say that I want my pink DIV to come first in the coding, I can move the HTML so that it is above the HTML for the left hand column. So now as you can see, this comes first in the coding.

So if I now refresh the page, you’ll see that simply moving the HTML has altered our design a little bit. To correct this, if you use the float attribute correctly, in the style-sheet, and you know what you’re doing, then you can easy manipulate the coding so that it allows the design to stay how you want it but it allows the HTML code order to change. So if I find the middle column and I float this to the right, then refresh this, the design goes back to how it was, but now if I remove the CSS from the page, you can see that my right column comes before the left column in the coding. This is a better, optimised page for search engines.

So basically, I’m using the CSS to change the way that the content is ordered in the HTML without compromising on the design in any way. This principal is used frequently on the Internet places like play.com and also the BBC use it. Let’s have a look at some of the news that is on today, you can see the left hand column of information is not as important as the actual news article that is in the middle column.

Demonstration ends.

Nick: We’ve zipped up all of these demonstration files, and they are available at our blog for downloading.

James: If you’ve seen our previous video on preparing for HTML 5, then you might remember us highlighting how important it is for web designers to start picking up on the new and discontinued elements and tags. If you haven’t then click on the annotation above.

Nick: On Tuesday, Smashing Magazine published a blog that shows a web-page layout that is coded, using some of the new HTML 5 tags. Some of the new tags that they have used are the new <header> and <footer> tags. Well worth taking a look at their post at smashingmagazine.com, especially as the page validates as W3C compliant!

James: Thanks for watching, please subscribe to our Youtube Channel, and you can stay up to date with our latest videos by following us on Twitter at twitter.com/crearegroup