I've been designing websites for many years now. I remember way back in 1995, when I was working on the Helpdesk for Applied Materials in Santa Clara, CA. I would hack into the database (which was accessed by a basic intranet frontend) using only JavaScript...oh what fun! But then I got serious & learned XHTML coupled with PHP, & so I began to turn out website after website.
And all these years later, I'm still at it! A lot has changed, but the principles I've learned throughout the years have kept growing, & are evident in my designs.
I Train Dogs Too!
It's sounds kind of funny, but yes, I do train dogs :) I have been dog training on & off, for 20+ years now. My favorite type of training is in the sport of Schutzhund. Schutzhund is German for "protection dog", & it's a great dog sport that focuses on developing & evaluating those traits in dogs that make them more useful, which in turn makes for a much better dog/human relationship.
Web Design Tips
Practical guidance on web standards, semantics, accessibility, and validation — ported from FierceStreet Networks (2004–2005). For industry news clippings, see articles. For personal posts, see blog.
Ok, you're ready to learn a bit more about website design! I categorized my website tips and tricks by technology. For example, if you want a tip on gaining a higher page rank on Google, select SEO tips on the navigation menu, or the accessibility tips to view tips on accessibility.
These web design tips will help you understand the semantical use of (X)HTML/CSS to separate content from presentation. They will take you from the table-based design world to a great new world of accessibility, allowing even disabled users to view your site — and having your site viewable and correct on a cell phone or PDA!
Over the course of a few years, I came to understand XHTML, CSS, SEO, and web standards. Understanding semantical, web-standard hand-coding can be confusing at first. Hopefully these tips help.
Feel free to contact me regarding any of the tips, or if you'd like to submit some of your own!
Website Accessibility
Accessability
Accessibility is about supporting disabled visitors, but that is not the only reason for making a website accessible. An accessible website can be accessed by people with different web browsers, PDAs, and cell phones.
A common misconception is that by making a website accessible, it will be not as attractive as a website that is not accessible. That is not the case. Accessibility does not need to affect presentation at all!
"The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect."
Using semantic, well structured XHTML will take you a long way towards creating an accessible website. To get an idea of how accessible a page is, try viewing it in a text-based browser like Lynx to see if the content still makes sense.
For a website to be accessible, its content must be available to everyone, including people with disabilities. An accessible website ensures:
Smooth transformation: information and services should be accessible despite physical, sensory or cognitive disabilities, work constraints or technological barriers
Understandable and navigable content: content should be presented clearly and provide understandable mechanisms to navigate within and between pages
An accessible website:
can be perceived
can be navigated
can be utilized (with a keyboard or devices other than a mouse)
can be easily understood (even in attention-poor situations)
Accessibility and usability are closely related. While accessibility is aimed at making the website open to a wider population, usability is aimed at making the target population happier with a more efficient and effective website.
Accessibility Defined
Website accessibility, what is it?
Accessible web design is universal web design. The concept of universal design means designing for the widest range of people's abilities. Adopting universal design ensures information will be accessible not only to people with disabilities but to those using old, alternate, or emerging technologies.
When developing web content, consider who will be accessing the information and how. For example, how does your page look:
on different browsers? (Internet Explorer, Firefox, Opera, text browsers)
to users with different screen resolutions (640×480, 800×600, 1024×768)
with images and/or JavaScript turned off?
to individuals using portable computing devices?
to individuals accessing the web via telephone?
to blind individuals using a screen reader?
to individuals who are deaf? Is audio content closed captioned or transcribed?
Federal agencies in the USA, as well as other countries, have strict legalities regarding accessibility:
Section 508 requires that Federal agencies' electronic and information technology is accessible to people with disabilities.
So you see, web accessibility is something every web designer is responsible for.
Are You Accessible?
How to get accessible
The latest buzzword in web design (with standards) is accessibility. The website accessibility pages on this site should clear up a few issues for you.
"The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect."
Is your site accessible? Run your site through these quick suggestions:
Turn off graphics
Turn off sounds
Check the contrast by viewing the page in greyscale
Turn off style sheets
Turn off scripts, applets, or other programmatic objects
Use the largest font size allowed by a browser
Resize the browser window
Select all text and copy it into a word processor to make sure it makes sense
Develop your sites for a standard compliant browser first, then add workarounds for Microsoft Internet Explorer. Do all your initial work and testing using a more standards compliant browser. This approach cuts the time you spend creating workarounds once you discover your design falls apart in every other browser.
It is easier to tweak a standards compliant website to work in Internet Explorer, than it is to fix a site optimized for IE to work in more standard compliant browsers.
Inaccessible HTML Tags
Inaccessibility
Here are a few HTML elements that show the implications of inaccessible markup:
Frames
Frames divide a website into several independent parts, each a separate HTML page. Drawbacks include:
You confuse the visitor. Every page should have a unique URL; frames break that understanding.
Frames cause problems for search engines. The main page is the frameset — not content. Visitors from search engines may land on a page missing navigation.
Frames break bookmarking. Most browsers can't bookmark a page inside a frame-based website.
Printing becomes more difficult. Many browsers require activating a frame before printing.
Sending links through e-mail becomes difficult. You can only link to the homepage, not a specific page inside frames.
Making the site accessible becomes more difficult. Accessibility guidelines advise against using frames.
Besides, frames are so '90s anyway!
Tables
Some designers interpret "don't use tables for layout" as "don't use tables at all." If what you're marking up is tabular data, it belongs in a table. Tables for layout are so '90s anyway!
Forms
Forms are often marked up in un-semantic ways. The elements <label>, <fieldset> and <legend> are meant to be used.
JavaScript and cookies
Avoid depending on JavaScript. More people than you might think have JavaScript turned off. You should not have a website depend on JavaScript to work. The same goes for cookies.
Web Accessibility
Accessible web
Web accessibility on the internet is just as important as it is in the real world. It is about supporting disabled visitors, but that is not the only reason for making a website accessible.
A common misconception is that accessibility makes a site less attractive. Web accessibility does not need to affect presentation at all!
Using semantic, well structured XHTML will take you a long way. Try viewing your page in a text-based browser like Lynx.
If you visited your favorite restaurant and happened to be disabled, and found they did not have accommodating restroom facilities, you'd be upset — and discriminated against!
Just imagine having a sight or dexterity disability, and visiting a website that is not accessible. You'd be upset — and discriminated against!
Federal agencies have strict legalities regarding web accessibility. Section 508 requires that Federal agencies' electronic and information technology is accessible to people with disabilities.
So you see, web accessibility is something every web designer is responsible for.
Web Semantics
Great coding
Semantic HTML
Another important part of separating structure from presentation is using semantic markup. When an XHTML element exists that has a structural meaning suitable for the content, there is no reason to use anything else. Do not use CSS to make an element look like another element — for instance using <span> instead of <h1> for a heading.
Headings
Use <h1> through <h6> depending on the heading level.
<h1>Document heading</h1>
<h2>Sub heading</h2>
Paragraphs
Use <p> for paragraphs. Do not use <br /> to create space between paragraphs — margins are handled by CSS.
Lists
A list of things should be marked up as a list: <ul>, <ol>, or <dl>. CSS makes it possible to use lists for navigation bars without presenting them as traditional bullet lists.
Quotations
Use <q> for shorter inline quotations and <blockquote> for longer ones. Text is not allowed directly inside <blockquote> — wrap it in <p>.
Emphasis
<em> is for emphasis; <strong> for strong emphasis. Avoid using them when all you want is a visual effect.
Tables
XHTML tables should not be used for layout. For tabular data, use <th>, the summary attribute, and <caption>.
Design Standards Web
What are they?
Web standards are technologies established by the W3C and other standards bodies, used to create and interpret web-based content. These technologies are designed to future-proof documents and make them accessible to as many people as possible.
Some developers resist standards with arguments like "It's too difficult", "It works anyway" and "The tools I use create invalid code."
Look at the situation logically — there are many benefits:
Simpler development and maintenance: semantic HTML makes it easier to understand code written by somebody else
Compatibility with future browsers: valid code reduces the risk of future browsers not understanding your markup
Faster download and rendering: less HTML means smaller files and quicker downloads
Better accessibility: separating structure from presentation helps screen readers
Simpler adaptation: change presentation site-wide by editing a single CSS file
Web standards can save time and money, and provide a better experience to visitors. If you're not using web standards already, now is the time to start.
So, how do you make sure you're standards-compliant? Validation!
Website Validation
Leads to SEO
Validation is the process of checking that a document obeys the rules of the language used. You can compare it to checking a text for spelling and grammatical errors.
Validation is an important part of web development. Many hard-to-find errors are discovered during validation — from typos to elements used in invalid ways.
Unfortunately, many people don't validate. Most browsers attempt to interpret invalid HTML instead of displaying an error message, which has led to sloppy markup.
There is no reason not to validate your HTML and CSS. On the contrary — there are only benefits.
When a document adheres to web design standards, it uses valid XHTML, CSS instead of tables for layout, is properly structured and semantically marked up, and works in any web browser.
Note that "works in any web browser" does not mean "looks the same in every web browser." Making a document look identical across browsers is next to impossible — and that's okay.
Image Maps Tips
What is an image map?
In HTML markup, a client-side image map consists of two parts:
The <map> and <area> elements to associate image areas with URLs
The <img> element with a usemap attribute set to the name of the image map
Here is an example. The first two squares, the sword and bow, as well as the head, are the links. Notice that the head has a very tight border — the shape of the head defines the clickable area: