twitter facebook dribbble email

Page specific design made easy with body id’s

Careful! This post is looking a little old and could be inaccurate in many, many ways

Something that I’ve always hated in some of the website’s I build is the lack of visual interest in the internal pages of a website. These pages tend to follow a standard layout with a long trail of visually boring content running down the page. To solve this problem I’ve started using Photoshop more to create composite images of the internal pages of a website to ensure they have more visual interest than what would occur when styling the internal of a site based predominantly on the style of the home page.

The problem this created is that with more unique layouts and styles from page to page I would have to write more CSS for more id’s and classes. That was until I started using page specific body id’s.

How it Works

First I’ll start a basic HTML page structure I use for the websites I build:

The split shown in the code above is an indicator to show that what sits above it is included in a header file and what is below in a footer file. Then where the split is would be a file containing the content for that page only. This reduces the amount of HTML code in the individual files and allows any reused code to be within a file that all the pages of the site will utilise.

So a standard content div that all the pages utilise creates issues when the layout of a particular page is different than the rest. Take for example the home page, this page may not use a side navigation bar when all the internal page of the site do. When a side column is present the style required by the content div will be different than when it is not.

The top line of code shows the homepage which uses a single column layout with the unique elements of the homepage within the content div making a more intricate layout. The second line shows the content div floated and with a reduced width to make way for a side navigation bar. If both lines were to be included in the same stylesheet the homepage layout would break taking on the style intended for internal pages. So what we do to fix this problem is include an id within the body tag.

I find it’s best if the id relates to the page it is being used for as it makes it easier to code initially and also make changes in the future. With this id we can then write our CSS a little differently:

What this does essentially is define the style for all pages and then resets the unwanted style for the single page that utilises a different layout. With this method you could potentially define a different layout for each page contained in the website, but having each page with a unique design can cause usability and findability problems.

How to assign the body an id

This is the point where the developer and designer sides of the brain meet, creating something mutually beneficial. As the body tag is within a standard include file we cannot hard code an id for each page and nor should we. Instead there are two ways we can get an id to the body tag.

The variable method

In a nutshell we define a variable in the file used to call the header.php file above the line of code that fetches the header file and then echo out the variable in the correct place. So within your index.php file you would have:

Then within the header file itself you would have:

It’s a simple as that. However I find this a weak solution as it can be difficult to maintain the variables distributed through numerous files.

The filename method

I much prefer this method as it requires less work to implement (although learning the code initially can take some time depending on your knowledge of programming languages). What this method does is take what should be the unique filename of the page and output it when a function is called.

First we define a few global variables.

Next comes a function to get the name of the file, here it strips out the domain name leaving just the name of the file and it’s file extension.

The function below takes the result from the function above and strips out the file extension, replaces some common symbols and transforms some characters to uppercase.

When writing CSS I prefer to keep id’s and classes lowercase, the function below does this as well as removing some common characters to provide a clean version of the result from the function above by which to work with.

All that is left next is to output the function to the id of the body tag.

These functions are not perfect, and I’m always optimising the code for better performance (in fact i’m looking to test a couple of changes already), but they do the job I require.

However what this method is unable to do is deal with dynamic url’s. Take for example you had /pageone.html and /pagetwo.html that used rewrites to point to /pagethree.html ?page=pageone (or page=pagetwo). The id that would appear is pagethree not pageone or pagetwo. To get this as your body id you need to add a statement to check if the above page variable exists in the url and if it does to use that rather than our function.

This method also has issues with WordPress as all content is pushed through an index.php file. In these cases I would either use the variable method or a combination of the two ensuring the variable method supersedes the filename method with a statement as described above.

The possibilities are endless

Remember that side navigation bar I mentioned, the functions above can be used to create that. By using code like that below we can check to see if the current page is the homepage and if not output the side navigation. This allows us to keep code that could be used on many pages within a single file rather than distributing it through many files because not all pages require it.

Note: Using the filename method will return index (or default depending on what you’ve named it) for your top level page and not home which was ulitised in some examples above.

I also use this method to help define title tags and meta information as well as a wealth of other content, making for a much more maintainable and complex website without the requirement for a CMS or database, which would be the next natural step when building more complex solutions.

Thoughts

As a CSS developer I love using this way of working as it allows greater control over a particular page in a website without the need for numerous extra div’s, id’s and classes, which can just create a mess of code that is difficult to maintain and update.

I’ve shown the code above using PHP but the same is possible using classic ASP, and probably any other coding language available, it’s just a case of finding the right functions to do the hard graft.

If you have any questions or comments please add a comment below.