Webtrendz

Website standards checklist - Part 1 - Pre Launch

admin — Thu, 02 Jul 2009 11:14:59 +0000

Web standards - more to creating a compliant website then just removing tables!

What does the term ‘web standards’‘ really mean? For those of us in the industry who earn our living creating website, it should have 1 meaning. However, if you have looked and read many of the blogs out there on this subject, then you will know that it means different things to different GUI/desiners/web coders.

For the vast majority it means creating website that are ‘table-less sites‘ in relation to the site layout. There are a few designers/coders who are more evangelical about standards and compliance to them. I do belong to this group and am more focused on standards and would point out that web standards to me means ’using valid code‘.

However, web standards are much more than just valid (X)HTML. A site built to web standards should adhere to all standards for this medium (Such as HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.

About the checklist

This is not a ‘be-all and end-all’ type of checklist. There are probably many items that could/should be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used.

The checklist

Quality of code
Degree of separation between content and presentation
1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
2. Are all decorative images in the CSS, or do they appear in the (X)HTML?
Accessibility for users
Accessibility for devices
Basic Usability
Site management

1. Quality of code

1.1 Does the site use a correct Doctype?

A doctype (short for ‘document type declaration’) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won’t validate without them.

Helpful Tip: Fix your site with the right doctype

If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.

Helpful Tips:

Character sets & encodings in XHTML, HTML and CSS

Character encodings

1.3 Does the site use Valid (X)HTML?

Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML

Helpful Tips:

What is valid code

W3C Markup Validation Service

1.4 Does the site use Valid CSS?

You need to make sure that there aren’t any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.

Helpful Tips:

Help! My CSS Isn’t Working!

W3C CSS Validation Service

1.5 Does the site use any CSS hacks?

Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.

Helpful Tips:

Standard Hacks?

CSS Hacks

To hack or not to hack

CSS filters

1.6 Does the site use unnecessary classes or ids?

I’ve noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.

Helpful Tips:

Markup tactics

1.7 Is the code well structured?

Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)

Helpful Tips:

Semantically correct markup

Semantic data extractor

1.8 Does the site have any broken links?

Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.

Helpful Tips:

W3C Link checker

1.9 How does the site perform in terms of speed/page size?

Don’t make me wait… That’s the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.

Helpful Tips:

Speed Up Your Site: Web Site Optimization

1.10 Does the site have JavaScript errors?

Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under ‘Internet Options’ on the Advanced tab. Uncheck ‘Disable script debugging’.

2. Degree of separation between content and presentation

2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?

Use style sheets to control layout and presentation

Helpful Tips:

Web Content Accessibility Guidelines 1.0 - checkpoint 3.3

2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?

The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.

Helpful Tips:

Why use CSS to separate content from presentation?

3. Accessibility for users

3.1 Are “alt” attributes used for all descriptive images?

Provide a text equivalent for every non-text element

Helpful Tips:

Web Content Accessibility Guidelines - checkpoint 1.1

3.2 Does the site use relative units rather than absolute units for text size?

Use relative rather than absolute units in markup language attribute values and style sheet property values’

Helpful Tips:

Web Content Accessibility Guidelines - checkpoint 3.4

Web Content Accessibility Guidelines - checkpoint 3.4

How to size text using ems

3.3 Do any aspects of the layout break if font size is increased?

Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser’s font size. And again. And again… Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.

3.4 Does the site use visible skip menus?

A method shall be provided that permits users to skip repetitive navigation links.

Helpful Tips:

Section 508

Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group

Web Content Accessibility Guidelines - checkpoint 13.6

…blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.

Keep them visible!

3.5 Does the site use accessible forms?

Forms aren’t the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another.

Helpful Tips:

Accessible forms

essible html/xhtml forms

Accessible form builder

3.6 Does the site use accessible tables?

For data tables, identify row and column headers… For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

Helpful Tips:

Web Content Accessiblity Guidelines - checkpoint 5.1

How to create accessible tables

Accessible table builder

Creating accessible tables

3.7 Is there sufficient colour brightness/contrasts?

Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits.

Helpful Tips:

Web Content Accessibilty Guidelines - checkpoint 2.2

Colour Contrast Analyser

3.8 Is colour alone used for critical information?

Ensure that all information conveyed with colour is also available without colour, for example from context or markup

Helpful Tips:

Web Content Accessibilty Guidelines - checkpoint 2.1

There are basically three types of colour deficiency;

Deuteranope (a form of red/green colour deficit),

Protanope (another form of red/green colour deficit) and

Tritanope (a blue/yellow deficit- very rare).

Vischeck

3.9 Is there delayed responsiveness for dropdown menus?

Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.

3.10 Are all links descriptive?

Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.

Helpful Tips:

Web Content Accessibility Guidelines 1.0 - checkpoint 13.1

4. Accessibility for devices

4.1 Does the site work acceptably across modern and older browsers?

Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.

Helpful Tips:

Colored boxes - one method of building full CSS layouts

4.2 Is the content accessible with CSS switched off or not supported?

Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.

4.3 Is the content accessible with images switched off or not supported?

Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.

4.4 Does the site work in text browsers such as Lynx?

This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.

Helpful Tips:

Lynx Viewer

4.5 Does the site work well when printed?

You can take any (X)HTML document and simply style it for print, without having to touch the markup.

Helpful Tips:

Going to print

Web Design References - Print

4.6 Does the site work well in Hand Held devices?

This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.

4.7 Does the site include detailed metadata?

Metadata is machine understandable information for the web

Helpful Tips:

W3C - Metadata and Resource Description

Metadata is structured information that is created specifically to describe another resource. In other words, metadata is ‘data about data’.

4.8 Does the site work well in a range of browser window sizes?

It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?

5. Basic Usability

5.1 Is there a clear visual hierarchy?

Organise and prioritise the contents of a page by using size, prominence and content relationships

Helpful Tips:

Create a Clear Visual Hierarchy

5.2 Are heading levels easy to distinguish?

Use header elements to convey document structure and use them according to specification

Helpful Tips:

Web Content Accessibility Guidelines 1.0 - checkpoint 3.5

5.3 Is the site’s navigation easy to understand?

Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.

Helpful Tips:

Navigation

5.4 Is the site’s navigation consistent?

If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information

Helpful Tips:

Juicy studios - Navigation

5.5 Does the site use consistent and appropriate language?

The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn’t the visitor’s primary language.

Helpful Tips:

Clear language

5.6 Does the site have a sitemap page and contact page? Are they easy to find?

Most site maps fail to convey multiple levels of the site’s information architecture. In usability tests, users often overlook site maps or can’t find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.

Helpful Tips:

Site Map Usability

5.7 For large sites, is there a search tool?

While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.

5.8 Is there a link to the home page on every page in the site?

Some users like to go back to a site’s home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.

5.9 Are links underlined?

To maximise the perceived affordanceof clickability, colour and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.

Helpful Tips:

Guidelines for Visualizing Links

5.10 Are visited links clearly defined?

Most important, knowing which pages they’ve already visited frees users from unintentionally revisiting the same pages over and over again.

Helpful Tips:

Change the Color of Visited Links

6. Site management

6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?

You’ve requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you’ve found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser’s built-in ability to explain what the problem is.

Helpful Tips:

The perfect 404

Smashing magazine 404

6.2 Does the site use friendly URLs?

Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL… what good is a site if no one can find it?

Helpful Tips:

Search Engine-Friendly URLs

One of the worst elements of the web from a user interface standpoint is the URL. However, if they’re short, logical, and self-correcting, URLs can be acceptably usable

How to make URLs user-friendly

Creating Search Engine Friendly URLs

How to make URLs user-friendly

6.3 Does the site’s URL work without “www”?

While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.

6.4 Does the site have a favicon?

A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor’s browser

Helpful Tips:

Favicon.com

Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn’t available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a ‘robots.txt’ file.

Achieve success with an online business

admin — Mon, 02 Mar 2009 13:11:03 +0000

Today people prefer to have a business instead of a job because of the freedom that it gives them. When you have a job, you will always have a boss to please; you will always have something that will keep you late the very day your son has that important baseball game (and he wanted you to be there to cheer for him); you will always be on duty even if you are at home.

A home-based business is a good alternative to a job, when the job gives you more trouble than it gives you money. It is not too difficult to set up your own home-based business nowadays. You have all the help you need on the Internet and determination and hard work are what you need to achieve success in business.

The Path to Success in Business

First, you can borrow from friends for capital. The first thing you will need to launch your business will be financing. In order to keep the burden of repayment at the lowest possible level, you should first attempt to raise money from your friends and relatives, which can be returned within a flexible time frame pre-determined at the time of lending. It is very important that you borrow with clear-cut understanding on the repayment schedule, or you will risk some very sour relationships in its wake.

The second place you can look to for financing is by borrowing from financial institutions. After you have collected all that was possible from friends and relatives, and you still need money, you will have to seek out appropriate financial organizations/ lenders who can lend you the rest of the capital. For this, you will need a good business plan professionally drawn up showing your projected expenses and profits. You should be able to present it realistically and convincingly for the lender to agree to finance you.

Next, you need to establish the business. This is a crucial ingredient in achieving success in business and one of the most trying. You will need to market your wares well with the help of different types of advertising and marketing strategy.

Fourth, you should take advantage of the Internet. The Internet is one of the most powerful business tools we have today. This is why to achieve success in business it is imperative that the business has an online presence. In this way, you can advertise your wares directly to a global market of billions of people, rather than local few thousands.

Finally, you must work, work, and work some more. The main ingredient for achieving success in business and in anything else, in fact, is hard work. Without hard work, success does not exist.

What is HTML 5, are there any major things to look out for?

admin — Mon, 26 Jan 2009 09:40:41 +0000

Hi all,

I wanted to share my thoughts on what is HTML 5 and its perceived impact on the WEB….

HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. It is an enormous project, covering not simply the structure of HTML, but also parsing models, error-handling models, the DOM, algorithms for resource fetching, media content, 2D drawing, data templating, security models, page loading models, client-side data storage, and more.

Let me begin by giving you a small description of HTML 5 and what it means for the web as we know it.

Definition:

HTML 5 is the next planned revision of the Hypertext Markup Language (HTML), which is a set of markup symbols or codes that can be inserted in files intended for display on Web browsers. In 2007, HTML 5 was adopted by the new HTML working group of the World Wide Web Consortium (W3C). This group published the first public draft of HTML 5 in January 2008.

Refinements may continue for years before HTML 5 becomes a formal recommendation. Therefore, I would say - Do not panic - no need to start leanring HTML 5 and coding it on your sites!

HTML 5 is expected to offer numerous improvements over HTML 4, including:

New parsing rules for enhanced flexibility
New attributes like

,

and

tags
Elimination of outmoded or redundant attributes
Immediate-mode drawing
Drag and drop
Back button management
Timed media playback
Offline editing
Messaging enhancements
Detailed rules for parsing
MIME and protocol handler registration

HTML 5 will be designed so that older browsers that do not support it can safely ignore the new constructs, producing legible Web pages in most cases even if the syntax is not compatible.

Writing on IBM’s developerWorks pages, Elliote Rusty Harold claims that HTML 5 would be:

…instantly recognizable to a Web designer frozen in ice in 1999 and thawed today. There are no namespace’s or schema’s. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table. At the same time, this proverbial unfrozen caveman Web designer would encounter some new and confusing elements. Yes, old friends like div remain, but now HTML includes section, header, footer, and nav as well. em, code, and strong are still present, but so are meter, time, and m. img and embed continue to be used, but now there are video and audio too.

…. so i hear you say “W3C have tried to do something and have given us a starting point! Its up to us - the developers - to take it further with our own thoughts and recommendations.”

Do you agree?

Is Google PageRank worth the hassel?

admin — Sun, 12 Oct 2008 00:01:40 +0000

What is this Google PageRank? Is everybody using it, does it really work and how can you perform to get a better PageRank.

One of the most important algorithms ever developed for the Web, the PageRank technology is only 1 factor of many within the Search Engine Results Page (SERP’s) algorithm.

But how is it actually done? How does Google PageRank work, which factors do have an impact on it and which don’t? And what do we really know about PageRank?

Tell me what you think.

I have put together a page about the factors involved, read it here

Welcome to the Webtrendz Blog

admin — Fri, 08 Aug 2008 13:32:12 +0000

ok so we have finally launched!

I know, I know, its been too long in the making but if you know me at all then you know I am never totally satisfied and always tinkering!

I hope to start blogging about all sorts so stay tuned and get those comments in….