Archive for the ‘Web Standards’ Category

IE8 - back to the drawing board

Sunday, April 20th, 2008

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.

SEO tips for intermediates - text browsers

Saturday, November 10th, 2007

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:
Hungerford Web Design in Lynx 1

Hungerford Web Design in Lynx 2

Hungerford Web Design in Lynx 3

Hungerford Web Design in Lynx 4

Hungerford Web Design in Lynx 5

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.

SEO for beginners Part 2 - Avoid some technologies

Sunday, July 15th, 2007

Everybody has to start somewhere. I remember trying to optimise my first site for search engines. It was a site I had written about 6 months before and I was pretty yound and very uninformed. I had written this site in one of the worst WYSIWYG site design programs ever (you can probably guess which) and even now I can remember just how difficult it was. Here are a few tips to start you on a journey considering Search Engine Optimisation (Optimization to those on the other side of the Atlantic).

(more…)

SEO for beginners Part 1 - Standards Compliance and validation

Sunday, July 15th, 2007

Standards Compliance

This is a wider issue than just SEO. Writing compliant code can make sure that your site is accessible to those with impairment(s), your site is visible in a large number of browsers (including text browsers) and shows a level of commitment to quality for starters.

(more…)

An introduction to CSS

Wednesday, July 4th, 2007

CSS stands for Cascading Style Sheet. In it’s simplest form, it allows you to seperate content from style. That is to say that all of your text “Welcome to my site” etc is totally seperate from the fonts, colours, sizes and heading tags.

(more…)

Writing your first XHTML or HTML Webpage

Sunday, July 1st, 2007

How do you begin your foray into web design? It’s a common question and one which (for me) is impossible. I started so young that I can’t recall it at all.

There are a number of programs you could use (and would use) but to start with, I would like to show the principles and for this you can use notepad/vi/pico/whatever you like.

Create a text file called mypage.html
Within that, typethe following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My First Page</title>
<meta name=”keywords” content=”my, first, xhtml,web, page, webpage” />
<meta name=”description” content=”This is my first XHTML page” />
<meta name=”robots” content=”index,follow” />
<meta name=”author” content=”MyName” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en” />
</head>
<body>
<!–This is a comment and comments
do not show up in the browser –>
Here is my first XHTML page
</body>
</html>
(more…)

Restrict root login on linux webservers

Saturday, June 30th, 2007

secure install-defaults

By default, many applications are installed with lose security. We can tweak some settings to make it much better in terms of security.

(more…)

Using PHP and CSS to create accessible sites

Saturday, June 30th, 2007

We try to make our sites suitable for those with sight difficulties and/or motor funtion problems. One of the ways we do this is by allowing our users to remove colour/font/style from our site web pages.

This is important because for users who use screen reading technology to browse the web a lot of the style information is surplus to their requirements. This is how we achieve our ‘no css’ to remove style from our website. We use PHP and so this is how it is described:

(more…)