Hungerford Web Design Blog

It’s beta, let me point that out for those who don’t know. Hopefully my comments will be null when the final release version arrives (I’ll not be betting my house on it though, or my car, or a fiver).

There are numerous posts elsewhere regarding the individual supported/unsupported tags and features of IE8 so I won’t go over old ground.

What I want to do is moan, why? To tell you the truth it is purely down to the amount of work that IE costs me on a daily basis. I develop a site, I test it in firefox - everything renders as expected, I test it in opera - everything renders as expected, I test it in safari (guess what) - everything renders as expected…..now - I go to IE:
I have to test in three different versions as they are all different……
IE6 - Moves all my nicely centred divs to the left of the page
IE7 - Except for the extra spacing in linebreaks it’s not too bad - useable
IE8b - WTF! - My two lowest divs (my footer and lower section) are both moved and set infront/behind other divs.

My code all validates, my css validates, my design appears as I want in every other browser I have but IE - OH NO! Then I head to a company which use a very large intranet, I try to login with firefox but I get a blank page…I ring their internal support, only to be told that it’s all developed for IE as are all their internal systems, it doesn’t work with anything else.

IMHO IE is such a cut-and-shut that instead of all of these half-hearted attempts, it should just be scrapped! If my site is standards compliant and every other browser displays it a certain way then what on earth gives MS the right to decide that my site should look different in IE?

Ok, a bit of a deep breath and step back for a sec…I am shouting and pointing the finger at MS, but for all I know, I could have a terrible code syntax which IE doesn’t know how to interpret. Perhaps the other browsers are all being more forgiving and IE is sticking to the rules…. Problem is, I have no way of finding out, every method I have for checking my code says it’s fine. Testing shows it’s fine and I taught myself HTML before MS (and most of the world) knew what standards were……thanks microsoft, rather than reduce the browser footprint to allow developers to develop ONCE….you have just introduced yet another browser with yet more differences. I’ll be adding the firefox download button to my site shortly!

If for any reason you want the heathen software, you can download IE8 Beta

If you are a developer and have found that your site displays poorly in IE8, you can consider adding the following meta tag:

<META http-equiv=”X-UA-Compatible” content=”IE=7″> Which will revert the rendering to that of IE7 (which has it’s own issues), good luck.

Firstly why would you pre-load images on your page?
My primary reason is normally because I want to use rollover images in my navigation. I want it to be a grey icon when there isn’t a mouse hovering over it and I want it to spring to life with colour when there is.
The downside of me wanting to do this is that my original grey image will load with the rest of the page but my mouseover images will only load when they are called (ie when the mouse hovers over them). If my images are not tiny, they may take a fraction of a second to load which could cause the user to think that my images are disappearing when they hover over them.

I want to pre-load my images once the rest of the work has gone on and the user has the ability to view and use my site.

The most simple way of doing this is as follows:

<script language=”JavaScript”>
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]=”image1.png”
images[1]=”image2.jpeg”
images[2]=”image3.gif”
images[3]=”image4.jpg”
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>

We talked about using php includes to reduce the repetition of code and standardise features here:

One of the things we have looked at recently concerns our headers. Let’s say for example that our header looks like this:

<html>
<head>
<meta name=”keywords” content=”keyword1, keyword2″ />
<meta name=”description” content=”the description of my site” />
<title>This is my page</title>
……..

Great. Now, we want to cut down on how many headers we have (in case we want to change a line later) so that we only update one page instead of all of them. So we create a new page using the code above and we call it include_header.html.

There is just one problem with this scenario, we don’t want all of our pages to have the same title, keywords and description so what do we do? We could seperate it all out into individual headers for each page again but if we wish to add a new line (perhaps for an RSS feed) later, we would have to do so to every one of our pages. So we use strings.

In our include_header.html we change our code to look like this:

<html>
<head>
<meta name=”keywords” content=”<?php echo $keywords; ?>” />
<meta name=”description” content=”<?php echo $description; ?>” />
<title><?php echo $title; ?></title>

……..

Then in each page we declare what each of our strings contain, so for our index, it may look something like this:

<?php $keywords = “keyword1, keyword2″;
$title=”This is my page”;
$description=”the description of my site” ?>
<?php include(’/includes/include_header.html’); ?>
<!–anything else you want in the header of only this page can be added here –>
</head>
<body>
<h1>Welcome <?php echo $title; ?> and here is a description of it <br />
<?php echo $description; ?>
</body>
<html>

So, we now have:
A single header for all pages
Unique variables we can change for each page
A set of strings we can re-use on our pages (and we can change all references on that page by changing one string).

We have launched the beta of a new site design (version 3).

Please do take a look around and let us know if there is anything you find which isn’t working. It is a beta (which means pre-release), as has become the norm, we have launched it as the final part of our testing.

I hope you enjoy it

The design is based on the Jet30 template (released under the creative commons licence) and has been heavily modified to suit our style, thinking and technologies. Some of the main points are:

AJAX
PHP
CSS
Live server status (using the script we posted here)
Mailing list signup
RSS *2
ROR sitemaps
XML sitemaps (standard and g’zipped)
We are also setting our titles using strings now so that we can use includes for the headers successfully. I’ll post more about that shortly. Have a good one

Our latest project for Dogue De Bordeaux website Rozeldogue is nearing completion. It is live and you can take a look at it now (although please bear in mind that we have some style changes still to make.

This project is pretty close to my heart as my dog comes from here.

What have we done?

SEO: focused links, keywords, emphasis on text and syntax. Google and DMOZ submission, RSS

Design: Brown and tan with images

Development: XHTML1.1 & CSS

Dynamics: News, RSS feed, customised coppermine gallery, embedded contact form and google maps location

Knwon issues: Widescreen monitors fail to display the menu bar correctly (To be resolved 02/03/08), CSS changes required for gallery display (To be resolved 03/03/08).

Please do take a look, we have 2 more ongoing projects for this customer so feedback is always welcome.

It has started as a bit of an experiment really and also as a way of listing some of the links I use for others but to be honest, I am already about 5mins away from deleting it……our new directory.

It’s a third party script (which is Ok, not great - but ok): LINK REMOVED

Don’t bother bookmarking it as it probably won’t be there long:

• What’s the point in another directory? Well for me it was to be able to personalise it to the things “I” think are interesting or important for the readers of this blog and users of our site.
• Why not use the blog? Well, I’ll be brutally honest that I was being selfish. I wanted to see what impact it would/could have from an SEO point of view - big mistake! I’ll go into why in a few days…it’s going to take me that long to sort it out.

I genuinely thought it might be a good idea to create a really well set up directory with areas specifically for SEO, web development, accessibility and security but all I can see now are listing problems, spam, management overhead and a whole heap of hassle.

I wasn’t expecting the directory to suddenly sprout 5m links and propel the site to pr10 but I did want to see if I could attribute any positive trend to it once it had become semi-established…..all I have now is a whole heap of respect for somebody who makes a living from running a directory.

In short, if you consider creating a directory………..step slowly away from the keyboard, walk towards a wall and bang your head against it - it’ll be less painful in the long run!

R.I.P directory (for now)

Following on from our previous SEO tips for beginners:
SEO for beginners Part 1
SEO for beginners Part 2
SEO for beginners Part 3
SEO for beginners Part 4
SEO for beginners Part 5
SEO for beginners Part 6
SEO for beginners Part 7

I decided to start doing a bit more for those who are more tech-savvy and will understand a bit more of what’s going on.

There are some staple things which I think are worth repeating:

• Your site should have a clear structure and hierarchy
• Ideally you should be using text links. If that is not possible then every page must be reachable from a text link
• Produce a sitemap detailing all of your pages, either dynamically or manually.

All of the above is also useful in creating an accessible site for disabled users or those with difficulties. If you are a business in England then you should also be aware that you may have legal obligations towards creating accessible sites.

Most if not all search engine spiders can parse text only (I’m not talking about image crawlers like google image bot). To understand how a search engine sees your site, you need to see i in the same way that a search engine would.

By far and away the most well known text-browser is Lynx. You can download Lynx and view the Lynx website if you wish. I will refer to Lynx throughout this article. If you are using something else then please just take it for granted that I refer to whichever text browser you use.

Installing Lynx:
Lynx doesn’t come with a pretty installer so it’s a bit of a manual fudge to install it. So long as you are comfortable moving and editing files it really should take under a minute. If you are not techie then don’t worry, just take your time and follow these steps (Taken from the Lynx installation doc):
1/ Make a folder on your C drive called lynx_w3
2/ Unzip the contents of the lynx_v283.zip file into that folder
3/ Make a shortcut to lynx.bat and place it on your desktop
4/ Double click the shortcut. Lynx will open with google.com as the home page.

Using Lynx:

This version is set up with google.com as the home page. Use the down cursor
to navigate to the search box, then type in your search terms.
Links are shown in blue. The links will change to red as you cursor past
them. Press enter or right cursor to follow the link.

Summary of the main Lynx commands:

Down cursor: scroll down page.
Up cursor: scroll up page
Right cursor: follow a link
Left cursor: Go back to the previous page
Press G to type in the address of a page.

Lynx is installed, what next?
Take a look at your page in Lynx, how do you think it looks? Here we are looking at our Hungerford Web Design and Development website Click the image to go view full size:

As you can see, everything displays pretty well. If you are running a Macromedia Flash site or using loads of funky JScript to produce your content you will see a VERY different layout. Your site will not be read properly by search engines. Use the KISS principle (Keep It Simple, Stupid!)

I appreciate this is a pretty short article, I’ll be expanding upon it as we move forward. In the meantime, following these tips, you should find your site displays well to disabled users and search engines alike:

1. For important text that you want a bot to read and index, use plain text not images
2. Try to avoid javascript where possible, it has a place but content generation is definately not it
3. Create standards based sites, they are usefull in development as well as post-production
4. Flash is EVIL!
5. Ensure all of your links are valid and displaying the correct text
6. Try to keep the number of pages down, don’t create a page fo the sake of it (This is arguable as the importance of a site could be factored by pages indexed). I believe quality over quantity will keep your visitors coming back and prompt people to link you
7. Where you are using variables (page.php?nocss) avoid using them for links where possible (or provide an alternative) whilst google now indexes dynamic links, not all search engines do.

Firstly I would like to make sure we are all singing from the same page. What is a breadcrumb?

Home > Blog > Post

Breadcrumbs are a navigational trail. It shows users what category or section of your site they are in as well as an easy way to traverse your site.

The usefulness of breadcrumbs can vary. On a small site with 5 pages I would argue that they are not particularly useful. On a site with many sections or areas of information they can be invaluable.

Why are they useful?

From an SEO point of view they can be extremely useful for ensuring that your category areas are listed as well as the actual page. From the point of view of an accessible user with sight difficulties they can give context to your page where images are not available (likewise for users with text-only browsers). Additionally they are often preferred over static menu bars.

The simplest way to implement a breadcrumb system is from the ground up. All sections of your site are within their own directory. For a car sales site this would be similar to the following:

index.html
/carsales/
/carsales/index.html
/carsales/carsforsale.html
/carsales/carssold.html
/servicing/
/servicing/index.html
/servicing/prices.html
/servicing/booking.html

etc etc.

In this example our breadcrumb would look like this if we were on the servicing page:
Home > Servicing
If we then looked at the prices page it would look as follows::
Home > Servicing > Prices
If our user then wanted to navigate from the prices page back to the main serving page they would simply click the “servicing” link between Home and Prices.

Doing this manually can take some time……my next post will be a way of automating this so that the links are created dynamically. For a huge site, automating it can make a big difference. If your site is fairly small you may wish to just manually create the breadcrumb trail. To see an example of breadcrumbs you can view our main site: Hungerford Web Design

You may (for whatever reason) store particularly sensitive information in your webspace. Passwords, links, and anything else.

You may want to be able to access these files by FTP for example, but do not want someone stumbling across them and being able to read or use them. Here we will deny external access to those files using a .htaccess file.

You will require that your server has the mod_access module installed for these rules to work.

In our example, we have a password file stored in /home/username/www/passwords/my-passwords.psswd

We create a .htaccess file (that is “DOT”htaccess) and within it:

<Files ~ “\.psswd$”>
Order allow,deny
Deny from all
</Files>

Save the file and upload it to the directory holding the files you wish to protect (in our case /home/username/www/passwords/ )

Simple

Ever since folders and pages were concieved, people have asked which is best. Do I want http://www.hungerfordwebdesign.com/ or http://www.hungerfordwebdesign.com/index.php ?

Well, the truth is that it doesn’t really matter. What matters most is that anyone linking to you is using the same link all of the time. Therefore search engines which crawl these sites will always index your site in the same way and thereby increase your presence.

There are a number of ways of achieving this, you can use your htaccess as follows:

(more…)