Superblogging tricks and tips

Forget the techie side for a second as websites are all about content. Writing and presenting the right type of information is critical so we've created a complete site to show you how. See www.searchengineoptimizedcms.com/search-engine-marketing/ for optimization and performance tips .

The big problem today is that websites must be readable on many different screen sizes.

Most good designers use the em size for text to ensure that words are scalable but this usually makes the site look pants. Where possible all our new template will have scallable layouts as well so that the site looks identical on any screen or at any size.

If you understand html and CSS there's no reason you cannot create your own custom templates design. To make this easier we've now added a full list of tags at www.pureseocms.com/C2.htm

We've now written a review of the latest Search Engine Optimisation techniques .

This covers the main requirements for getting your site to the top of the search engines and will give you plenty to do.

There are lots of other very detail techniques that are often misunderstood but get these basics correct and you should be OK.

Pure SEO CMS automatically converts special character to web safe equivalents. Occasionally this can cause problems when dynamic code or scripts are embedded in the page. One common problem is the use of & .

This is also a computer code that must not be modified. To avoid this make sure there are no spaces either side of the character. & is only converted when it has spaces, as it will in text, codes will not require spaces to work.

To help people with visual disabilities it's now common to see the text size changing buttons on websites. We've now provided this feature in the standard Superblogging download.

It requires you to load the textsizechange custom script into your page or template and upload the textsizechange.js into your website scripts directory, but that's it.

Look in the setup screen to see where the default directory is for each website. This contains some code samples that are placed in the webpages as they are built, to control the layout of the picture or next buttons etc.

If you want to change any of these codes then it's better to start a new default directory and link to that. This way if you upgrade your program you will not overwrite the changes by installing new default files on top. Also you can put the new default directory somewhere on you hard drive that is easier to backup. If you keep the template, .mdb text file and default directories backed up then you can always rebuild the website in an identical manner.

The main pictures are placed in the same position on every page. This makes for a good consitent layout with no fuss. The position of the picture is controlled in the stylesheet and defined by the picture.txt file in the default directory. The location of the default directory is given in the setup screen, third box from the bottom.

You will also see a sample picture.txt file to make the picture alternate from right to left.

We all know the requirement to allow text size to change but this is becoming an increasing issue as many PCs now have the large size set as their default medium.

While this is not usually a problem for the main body text which has room to flow it can be a huge issue for the menus which can either disappear or overlap.

One cheat is obviously to fix the text size so that it always looks the same but if you restrict navigation for some users then you'll get less response.

What we recommend is to allow a little more room for the text to grow. Check if it does go over 2 lines and if it does remove the height settings so that the menus stack properly. Try to use bullets as button graphics not backgrounds as these will not get so distorted.

For accessibility top menus should spacers or text etc between each hyperlink. The problem with automated menus is that if you add a '|' symbol before or after there is always the unwanted extra one at the end.

On some sites we place the symbol before the menu but then positioned the menu graphic over the first appearance. It now looks great and will still not show with different text sizes.

Not also that we've switch the image and text positions on each group. This was done by placing the group code in the picture class name and adding the picture position properties in the style sheets for each group.

The things you should not do (like we've had to do on this website) are:-

Restrictive top menus. We can't add more groups and the text size is not allowed to be changed.

We've had to hand code the menu links to the sub-pages because there is no automatic menu system.

There is a table with a class="multcolmnframe" that surrounds the repeating paragraphs. This is a bit of a bodge to make sure that people can reliably add columns into each page. It also compensates for the IE peekaboo bug which is still an issue in IE6 and IE7.

If you don't want columns and you don't use images in the frames of your pictures then you can probably remove it.

It's not much code but it's bad practice to use a table and the browser must load all of the content before it will display it.