Hungerford Web Design

It’s a question which pops up sometimes, should I focus on content which is friendly to search engines or which would be really useful to my visitors? They don’t always match.

There are some practices which might be perfectly acceptable for a search engine but completely unusable by my visitors. Style is a prime example to put it into context. Google won’t really care how big my fonts are and in what colours (broadly speaking - most search engines care that I’m not trying to screw with the numbers by hiding content) my content is but my visually awae users will.

The other way around, I may use tables, images with text in them and my users may get an enhanced experience but the search engines will be unable to read and list some of that content, meaning that my search engine positioning could suffer for it.

Flash content was a real problem for a long time. Don’t get me wrong, Flash really isn’t “my thing”, I dislike using flashy, moving, whizzy stuff for a website design, which in my opinion is a book, not a cheap poster. That said, a lot of users like flash so I certainly don’t discount it as a medium - in its place. Now Flash content can be output via an SDK into html content with links and text readable by search engines which really plugs a gap. Great, a sort of happy middle-ground for all.

What about images? why can we not find a way of embedding the text used into the image itself?

This would be especcially useful for logos which incorporate the company name. Of course we can add alt text etc but I’m talking about something which is auto embedded at the creation stage, thereby more trustworthy. Image size would of course increase but I can see real benefits. MP3’s and Movie files have embedded tags which can be read, why not other file types, some image formats already store when and how the image was taken, SGML?

There are so many things that I wish I knew more about, to be able to influence them and develop them from creation to release. I do it with websites and applications but what about defining the code in the first place?  I simply follow the rules laid out by others to ensure that browsers and applications can process what I have written, to be someone who wrote the processes followed by others is a truly mammoth task.

I’ve digressed, which is nothing new.

There is almost always a play off between 100% SEO and 100% usability, bring into it that the site must look good and function well and you end up with a whole melting pot. The long and the short of it is that you need to decide what’s most important to you. For me it’s that the user has a good experience, search engines always come second.

Technorati Tags: Embedded, Fonts, Gap, Google, Image Formats, Image Size, Images, Incorporate, Incorporate Company, Logos, Long Time, Many Things, Movie Files, Moving, Mp3 Files, Mp3 Movie, Prime Example, Sdk, Search Engine Positioning, Search Engines, SEO, Text Images, Time Don

I unfortunately had to turn down a customer last week and politely decline the work they were offering. It’s an interesting socio-economic situation (with some big words to boot).

Theoretically, it could be argued that I have just declined an opportunity for my business to be more successful and could have left a negative impression on a prospective customer which could affect the business longer term. We have had to provide timescales in the past due to heavy workload and they have had time-based requirements that we couldn’t fulfill. In each of those situations in the past, they have greatly appreciated the honesty and awareness of our planning which has led (in some cases) to them coming back to us for other work in the future. This is however, the first time we have had to turn someone down for other reasons.

(continue reading…)

Technorati Tags: Acme Inc, Backlinks, Building A House, Current Rankings, Distorted View, Economic Situation, First Steps, Foundations, Fundamental Steps, Honest Appraisal, Honesty, Local Company, Negative Impression, Pitfalls, Prospective Customer, Quotation, Search Engine Positioning, Serps, Stylesheet, Workload

As you may be aware, the Hungerford Web Design website was recently the first site to be awarded an iCare award for accessibility. We have been awarded the silver award based on our accessible design, content and standards development.

“A lot of hard work has gone into this site and it is indeed a deserving winner”

(continue reading…)

Technorati Tags: Accessibility Features, Accessible Design, Background Colors, Brainchild, Bronze Award, Color Contrast, Deserving Winner, Design Content, Gold Silver, Icare, Markup Validation Service, Passion, Silver Award, Stylesheet, Validity, Verbatum, W3c Css Validation Service, W3c Markup Validation Service, Web Design Website, Web Development

It’s a potentially controversial question I know….

Our blog is definitely lacking in accessible content and it’s something I am hyper-aware of. Primarily this is because that as a web developer I view any restriction on user base as a bad thing, a mindset which has helped me to convince clients and users of the benefits. That said, rather than becoming easier, I am finding it harder to justify the extra work (and it is) to provide a really accessible site.

(continue reading…)

Technorati Tags: Accessibility, Accessible Content, Aids, Business Sector, Compliance, Controversial Question, Frontpage Features, Interoperability, Justifications, Mindset, Misconception, Restriction, Search Engines, SEO, Spiders, Usability Testing, Web Designer, Web Developer, Wheelchair Access, Wor

We often talk about accessibility and SEO in different contexts. The truth is that many of the goals in SEO are mirrored in accessibility.

First and foremost, in search engine optimisation, we are attempting to get a non-visually aware system to read, navigate and digest our content. Whilst accessibility does not only cater for and promote useage by the blind or visually impaired, it is one strong facet.

(continue reading…)

Technorati Tags: Accessibility Standards, Analogy, Array, Correlations, Design Content, Different Contexts, Facet, Heading Tags, Job, Man And Machine, Money, Morals, Screen Readers, Search Engine Optimisation, Search Engine Spider, Search Engines, SEO, Shame, Traffic, Truth, Web Design Standards

(OK, the astute amongst you will notice there are four tools here - I almost forgot the most important - the SEO text browser….)

Search engine optimisation is an ever-important part of web development and design. Developers nowadays simply must have an appreciation for SEO (whilst not having to be experts) to ensure that nothing we do negatively impacts the sites we develop.

This is a list and description of some of the best tools we use to help check our sites for standards compliance, SEO and syntax checking. It’s by no means exhaustive and I’m sure others will have more/better tools. If there is something you use which you would suggest to others, please add it in a comment.

(continue reading…)

Technorati Tags: Acceptable Limits, Analyzer Tool, Best Tools, Better Tools, Checks, Compliance, Developers, Engine Search, Engine Tools, First Image, Four Tools, Government Websites, Meta Tag Analyzer, Robots, School Of Thought, Score, Search Bots, Search Engine Bots, Search Engine Optimisation, Search Tools, SEO, Seo Tools, Syntax, Text Browser, Text Search, Thumbnail, W3 Organisation, Web Design, Web Developers, Web Development, Web Pages

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.

Technorati Tags: Attempts, Beta, Blank Page, Compliant, Daily Basis, Deep Breath, Divs, Drawing Board, Firefox, Fiver, Footer, Ie7, Ie8, Infront, Intranet, Opera, Pointing The Finger, Safari, Syntax, What On Earth

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>

Technorati Tags: Array, Downside, Fraction, Gif Images, Image List, Image Set, Image1, Images Gif, Jpeg Gif, Jpeg Images, Language Javascript, Load Images, Loading Images, Lt, Mouseover Images, New Image, Png Images, Rollover Images, Script Language, Set Image

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).

Technorati Tags: Br, H1, Keyword2, Lt, Meta, Page Description, Php Echo, Repetition, SEO, Title Keywords, Variables

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

Technorati Tags: Ajax, Beta, Creative Commons, Design Version, New Site Design, Norm, Server Status, Xml