Idevs

I had a question posed to me the other day on the Webmaster Talk forums, it is as follows:

“How do I decide what heading tags to use?”

This is such a good question and one which is rarely answered in tutorials designed to teach beginners html. I answered the question in brief here but I thought I would go into a bit of detail in todays post.

h1 - This should be used for describing the main page title, this does not mean use it solely for your website name. It means using it to describe the contents of the page be it a blog post, a product or even contact details.

h2 - This should be used to describe main subheadings, for example a new article could be split into 3 sections, h2 should be used to describe these subsections, similarly a product page might be split into description, technical specification and availability information, each of of these a sub section.This is useful because it allows the reader to scan the page for information far faster. And as we go deeper into the header hierarchy we will see that scanability very important.

h3 - Getting quite deep in now and onto h3. This is used in longer articles or pages where by the subsections can be split again. This increases scanibility of medium sized news articles or blog posts. h3 can also be used to split up product descriptions and specifications where the body text is quite detailed and lengthy. It is far easier to gather information about power details of a product if they are marked out and not hidden in a large chunk of body text.

h4, h5 and h6 - You will rarely use these unless you are developing massive specifications or lengthy articles. They should be used to break subsections down even further, to increase scanibility of content.

Special Note regarding use of h4 - it is common practice at the moment to use h4 as a heading for sidebars and menus that are unrelated to the body text. While this isn’t perfect at the moment it is the best method we can use in order semantically say, “this is another section but it isn’t as important as the main body”. When newer markup specifications are adopted this use will fade as better semantic alternatives are presented.

There we go, hope that helped. Onward with the war on ignorant web developers 

Some news for you today:

W3C’s most popular service just got better, prettier, faster, and smarter. The W3C Markup Validator has a new user interface and a validation engine with improved accuracy and performance. Among new features are an automatic cleanup option using HTML Tidy, and checking of HTML fragments. Driven by W3C as an open-source software project, the markup validator is made by Web professionals for Web professionals, and aims to be a major step in any Web development quality process. Read the change log for a list of all changes and new features.

As part of my campaign to spread decent web development practices, here are my 8 steps to an accessible site:

1. Plan your content before design - Before you even start working on your design get the bare bones of your content marked up, headings, paragraphs, semantics etc.
2. Test - Look at your site using normal browsers, text browsers, use a screen reader, put it through validators, do everything you can to see how well your site transfers to different client software.
3. Keep images away from content - if your image can’t be summarised in a paragraph that fits in with your page content, keep it in the stylesheet. If it can then summarise that picture in it’s alt attribute.
4. Keep links in lists - Have a navigation menu? Put it in a list, this is the best markup structure for a menu and gives you more control over the list than other structures.
5. Ditch the generics - Are all your page titles the same? What about your meta descriptions? By changing these not only does it make your pages more helpful and interesting, it is also becoming more important to search engines.
6. Use tables for table and nothing else - don’t use tables for layout! Tables are there to represent data in a table format, that is it. Have a dataset? Put it in a table.
7. Check your colours - Could a person with colour blindness read your site? Do your text and background colours contrast well enough? Test, Test and Test!
8. Go Naked! - Remove your stylesheet and images, can you still get all the content from your site? Is there anything missing? Can you still comment? This is an extension of testing, if you can’t read your site when it is naked, there is something wrong.

If you have done all the above then your site can be nothing but accessible. If you have any more tips please let me know, I would love to add to this list.

A great movement has been started to get everyone to dump the no-follow tag. I am all for this, it is about time bloggers trusted their readers, of course a few people will try to exploit it, but that is what moderation is about! Since I found out about this movement I have removed the no-follow tag from the comment posts. Rejoice, and comment freely.

Ok, I have had enough!

• Enough with the crappy pre-made templates
• Enough with the table based layouts
• Enough with the Ajax first - accessibility later mentality
• Enough with the “i use dreamweaver” crowd.
• Enough with the buy now, sell in 2 days domain name culture
• Enough with the search engine optimisation “companies”.
• Enough with Page Rank blindness.
• Enough with the no content sites
• Enough with the Ignorant web developers!

The web could be a great place:

• If the people developing cared more about content than they do about style.
• If people cared more about their content than about keyword density.
• If people actually started to learn to markup by hand again.
• If people cared about accessibility

I am going to make a pledge. From this day forward, I am going to do my best to destroy the current mentality and to replace it with one of content, accessibility and semantics.

If you agree with me please do the same.

• If you see a site using outdated techniques tell them.
• If you see a site using Ajax without having an underlying accessible alternative tell them.
• Start adding semantic markup to your posts and sites
• Tell others to do the same.

We can have a great, content rich web, all we need to do is work on it.

Every web site owner in the world wants to increase it it seems, Page Rank however, is completely pointless in the grand scheme. People scramble for backlinks and frontlinks and sidelinks and upside down links and it doesn’t improve their site content one bit, it also has very little effect on the number of visitors. For example, this site went from a Page Rank unspecified to a Page Rank 0 (what a change!) the other day and so I checked the stats, this site receives more visitors from search engines, social bookmarking sites and direct visits than another site I run that has a Page Rank of 4.

Seriously people, Stop wasting time worrying about Page Rank, it doesn’t matter. What matters is quality content. If you have that and a bit of internet know how you can attract visitors and the backlinks will take care of themselves.

I have been using Digg now for a good few weeks, I had been a regular visitor before hand but I hadn’t start digging and submitting content until a few weeks ago. I just thought I would comment on a few different points that I have noticed in this period of time.

1. Spam - Some website owners will stop at nothing to try and get some traffic, I have seen some users submit practically every page of their blog, even when their blog contains old or, to put it bluntly, rubbish content. Some examples I have seen in the programming section of Digg are “How to code in HTML” and some appalling sites talking about increasing your page rank.
2. Incorrect topics - I don’t care how cheap I can buy mothers day presents for, why is it in the programming section!?!?
3. Bad Spelling and Grammar - Seriously, if you are going to take time writing decent content, take some time out to spell check it and do some proof reading.
4. Advertising - There is the odd submission that obviously has no purpose other than to try and drive you to the site so you can buy or use the service, just get this one thing sorted - you will not get onto the front page and everyone will digg you down, so don’t even try.

Thats it, hopefully a few people will listen……yeah I don’t believe they will either.

I would like to clarify some points on using “the honeypot” method of Spam filtering.

The basic method goes, you place a decoy input field within your form and hide it from the users, but not from the spam bots. The spam bots come along and fill in all the fields and submit the form. You can then filter the input during the server side processing of your form.

This all works very well but in order to make it that little bit more useful and user friendly I want to clarify some points:

1. Use CSS to hide the input and label, do not use the hidden method, any spam bot programmer with half a brain can get round that.
2. If you do use CSS then please inform users that don’t use CSS e.g. those using screen readers /text browsers. That they should not enter anything in the field e.g. Make your label something like “Leave this blank” or “Don’t write anything here”. Don’t compromise usability and try not to confuse your users.
3. Javascript processing is very well, but remember a raw request is all that is needed to post the data to your processing script so when using Javascript don’t bother checking for spam.
4. Combine techniques. Once you get rid of all the bots that fall for the honeypot consider checking for known spam keywords, if you need some ideas check your email. There are loads of different techniques you can use and combine.
5. Moderate! don’t rely solely on your code, read your comments once in a while, answer them. This will make you a better blogger and help build a sense of community, and you can pick up on the spam that may have escaped the net and of course learn how to stop it getting through again.

I would be interesting to learn of anymore ideas that you have regarding this issue.

Whenever I build a site from scratch I start off with my basic page classes, IdevsPage and IdevsModule, I wrote them both over a year ago and neither has changed must since. IdevsPage is a basic templating class which allows me to build a page before displaying and IdevsModule is a smaller class for building page modules, with these I can add generic login forms, blog posts etc. again and again into the main document without having to include them in the main template file or in the code itself

Recently I have been thinking about taking this one step further and adding a code module section, with this I would be able to add extra code without having to hardcode the includes into the main document, this would enable a much more flexible development environment and enable me to expand sites by simply writing a plugin and deploying it.

The idea that I have at the moment is to have a plugin directory, when the page is run the plugin directory would be read and all the plugins would be registered. During registering the plugin would inform the main code when it should be run, then as the code is run at intervals it will run a function which will deploy the functions set to run at each point.

At the moment the generic run time points I have come up with are:

• After Loading Header
• After Loading Content
• After Loading Sidebar
• After Loading Footer

What is good about this system is that plugins can load plugins, so all plugin has to do is call another load plugin function at its intervals. This makes for a very flexible system.

Well it would seem that Meta Tags are back in fashion, could it be? Well on the face of it, yes. Meta tags and Title tags are now being preached about by SEO’s all around.

There is a logical reason of course, for years many people, myself included, have developed large scale sites in which the title and meta descriptions have stayed the same throughout the site, this means that most of the page in the site are considered supplemental and thus a thrown on the back burner. With a new title and meta description the page is fresh and new and the engines consider it to have more valuable information.

Of course, the technique needs to be used with others such as, providing valuable content to begin with and garnering inbound links.