The way to do this is with a PHP include function. Now before you quail at the mention of PHP, don’t worry; you don’t actually need to know any of the language in order to pull this off. The first and perhaps most important thing to do when considering PHP is that you should rename any file containing PHP code to have the extension .php, as opposed to .html.

With the sidebar, make sure you have it designed exactly as you like, but also so it is not dependent on the rest of the HTML code. Once you’ve done that, cut and paste it into a separate document and name this ‘sidebar.html’ or ‘sidebar.php’. Now comes the trick. In all your other site pages, now named something.php, where the sidebar should be, include this code:

<?php include(“sidebar.html”); ?>

and change the filename as appropriate. This then includes whatever code you have in the seperate document, so when you make a change to the sidebar file, it shows up on all the pages that have the include function. It also reduces all the sidebar code that was previously in every document into a manageable, one-line chunk.

There you have it – simple! You can do the same with headers, footers and any other parts of the site you want to be universal and readily changeable. Get coding!

Perhaps the best way is to start with the don’ts, before we move on to the dos. If you’re going to have a background image, make it relatively plain, or at least set a solid colour in front of it – there’s nothing worse than hideous swirls of black and white in the background and black text on the front, as it is completely unreadable and offputting. Equally be sure to avoid rainbow or similarly lurid, multicoloured ideas… unless, again, you’re going to put a solid background colour behind the text. Photographs can work, but again, adhere to readable contrasts as we talked about in the earlier instalments.

One of the best places for a nice, inviting image is the header – you can have a decorated textual banner with your website’s name or otherwise, or just a nice banner-sized photo to adron the top of your page. Again, don’t go for anything too big – it can be as wide as it likes, but should not be so tall that viewers have to start scrolling to read your content (and keep it in proportion as well!) Something like this works:

As for images in your content, it’s always wise to have just one smallish image in your articles, to break up the text. After all, one important thing about writing for the internet you should consider is that you’re not writing a novel (unless of course you have a fiction site!), but rather something easily informative and straight to the point. Use moderation at all times though, and nothing that contrasts too much with your design colours, otherwise you will be repelling rather than enticing readers!

Should you use images? Absolutely! Just be careful when you do – terrible use of images can ruin a website’s visual appeal. However, apply a bit of common sense and you should be flying.

So, continuing with the idea of clarity being key, try not to work with too many items of content. Modern web design typically separates different items of content with <div> tags, so you’ll have, for example, <div id=”header”>This is the header</div> for the header section. The id is important because we then use the CSS to format it into a readable, aesthetic layout. If you don’t understand too much HTML, read the basics and then come back to the explanation here, because none of this is too difficult so don’t worry!

Last time we talked about a simple yet super-effective layout of header, three content blocks, then footer. You don’t have to follow this at all to have a good layout, but its ubiquity in many web designs says a lot for its effectiveness. Here is a stripped down example:

It’s nothing too special or particularly good to look at, but it’s clear where everything is and the important stuff is easily readable.
As said above, this is all done with the <div> block, which essentially creates a virtual ‘block’ that you define entirely with the stylesheet! For the header, it doesn’t really matter what we do (maybe set margin:0px to remove the automatic buffering around the edges). The important things are the content blocks.

In this example we have three; a left sidebar, a main content area, and a right sidebar. The important thing here is to set the float attribute in CSS. So, if we set up the main areas as <div id=”leftside”></div>, <div id=”main”></div> and <div id=”rightside”></div>, we do the following in CSS:

#leftside {
float: left;
}

#main {
float: left;
}

#rightside {
float:right;
}

This means that the elements will all ‘float’ next to each other. To make it look good and effective, you should specify widths; unless you’re working with images, it’s generally best to use percentages. Make the sidebars about 15% each and then you have between 60 and 70% to set as the main, depending on the borders.

Then you’ll have a basic layout you can start adding content to! The real trick here comes in the footer, however. If you just set up a <div id=”footer”>This is a footer</div>, it will try to follow on after the last float and cut up your webpage. This can be fixed easily in the CSS when we use the clear attribute:

#footer {
clear:both;
}

This means that the footer will follow on after all the content, and we are left with a nice layout in the sense of the example!

There are of course plenty of variants you can employ (such as two columns), but this broadly speaking an effective, simple way to display content in an aesthetic way – and it’s a lot simpler than most might imagine!

The most important? Clarity is absolutely key! No matter how fancy you want to make your site, if it’s not clear where everything is then people won’t want to stay on it. Your site has to be readable; this means that black text on a white background, however overused and simple, is in many cases a better idea than an elaborate colour scheme. You need content that stands out and doesn’t put any strain on the eyes.

But by all means don’t feel restricted to the most basic of shades, as kinds of colours look good in moderation. Just be sure to follow the rule of thumb that light backgrounds should be accompanied with dark text, and vice versa. Many webmasters prefer greys and blues, but if you’re feeling that your site needs to seem particularly dynamic, reds, yellows and oranges can work – just don’t overdo it. If you’re unsure, load up the page and just have a look at it. Does the text stand out? Can you read it easily? If so, you should be alright.

To this end, looking at contrasts can be quite good, but don’t go for lurid; bright greens and yellows altogether never work, nor does a random red in a blue and green colour scheme, for example. If you’re having difficulty finding colours, Google a HEX colo(u)r generator where you will be able to select the exact colours you want, and have the HTML/CSS code made for you!

The next thing you should consider is layout itself. Most basic sites will choose to align text in the centre (<p style=”text-align:center”>, for example), and this can work; but many professional sites employ left align or even justify, and then take a column-based approach. I’ll teach you how to create a simple but effective, up-to-date column website in the next instalment; but for general reference, the most typical and effective site layout has a header that fills the top of the page from left to right, followed by three columns of content aligned next to each other going left to right, and then a footer which concludes the page from left to right.

Stay tuned for the next instalment!

Nowadays a simple Google search yields all kinds of results regarding ideas on how to improve website traffic, from very practical, effective and free tips to purchaseable schemes – and even to misinformation. If you want to build a site that reels in browsers in their masses, there is one fundamental tenet you must adhere to:

Write and host quality content! The simple fact of the matter is that without quality content, all your efforts will cumulate in very little, even if you go to every effort to promote the site. So just make sure that your site deals with a topic or topics that you actually have an interest in or are actually in some way qualified to write about (or someone else is writing something worth reading!)

Furthermore, you want at least a few articles or items of content before you start properly promoting your site. One of the most important things that Google Panda (Google’s tool which sweeps the internet and decides how to rank sites for its searches) now looks at is each individual user’s time spent on the site. So if all you’ve got is basic ‘introduction’ and ‘about me’ pages, it’s unlikely prospective readers are going to linger long; however, with only a few items of content, at least they have something to glance at for a little longer before making up their mind!

Herein lies the benefit of a few well-written posts as well – you can grab people’s attention and then keep it as well. This is all an important step in promoting your site via the Google bots. To conclude then, good quality content is precisely what you should be aiming for – it seems an obvious point to make, but it is one that is surprisingly often overlooked! Of course, one additional avenue you can look at for high quality content is custom web design services – even if you don’t want to have your website built for you entirely, you can still draft in assistance to really give your site that winning touch.

Alright, so we’re not going to teach you how to drive… at least in the traditional sense!

Rather, this blog will take a metaphorical approach and we’ll be looking at all kinds of figurative driving… be it SEO ways to drive more customers to your site, website motivation, or just generally how to use the web to your own ends.

But as this might suggest, this is in fact a blog that’s all about sharing… If you want to get in on the action, then let us know and the team will hopefully be able to sort something out!