CanIGetADotCom.com Blog

There are a lot of ways to attack internet site design. A few are better than others,
but it’s not imaginable to objectively state that one technique is the best in all
Facets. Here, Joey describes how he does it.

Information Architecture

Before I even start toying with design, I invest quite a lot of time and
Vigor on what is now commonly referred to as
Data architecture. For a little site this largely consists of
Splitting up the information into orderly groups, which most likely will be
represented by a number of subdirectories.

This stage likewise involves an analysis of what the pages-to-be will contain,
and the beginning of a navigational structure. How numerous levels will there be? Is
one or two static menus adequate, or do we want submenus?

Structure and Markup

When the preparations and the structural work are finished, it’s time to begin
building templates. If I am fortunate, I only require one template, but occasionally it
takes more than that. I begin with one or more typical pages –
not the start page, since that is almost always significantly
Distinct from the remaining pages. In those pages I identify the assorted
components, which typically boils down to:

*   Flag with logo,
*   Primary navigation,
*   Subordinate navigation,
*   search form,
*   Principal content,
*   Footnote.

At this point I commence making a test page, where I put in the components in
the order I want them. I only mark up the content with the semantic components
that (X)HTML offers up, primarily headings, paragraphs and lists.

I also pick out which document type I prefer to use. That is generally
Hypertext mark-up language 4.01 Strict. If I have access to a server-side scripting
language, and feel that I have a reason, I may also choose to use
XHTML 1.0 Strict or XHTML 1.1.

Preview

When the primary structure is finished I view the test document in my standard
Web browser (Mozilla), and also in the Lynx text browser. Do the parts come in a
sensible order? Will the reader interpret where the principal content stops and the
navigation begins? Does the search form come out in a coherent place in the tab
order?

Design

It is at last time for the entertaining part: design. Sometimes there’s a comp to operate
from, at other times it is a matter of experimenting. At any rate, it’s now time
to compose some cascading style sheets.

I usually begin by adjusting all margins and padding to zero, and then I set
the primary colors and the base font. I always set the base text size in percentages
– Ordinarily 100% unless I apply a remarkably large font
such as Verdana. By employing percents I guarantee that the text sizing can be altered in
Every modern browsers, and simultaneously I fix some Internet Explorer glitches.

Most layouts consist of two or more columns. If I know that the menu column
is reasonably scant and that the content column will all of the time be longer, I assume the
easy road by placing the menu. If not, I have to fall back to using
float, typically in combination with negative margins.

For each rule that I add to the style sheet I check in Mozilla that the
result is what I want. If I use some more sophisticated cascading style sheets, I also
check in Opera on occasion.

At this stage I ordinarily need to allot id attributes to certain
Components. Generally I also need to add one or two DIV
Components to hang style rules on.

I initially try to set rules as universal as possible, i.e. rules for common
element types. As the needs develop I create classes, but I try as much as possible
to use cascading style sheets descendant selectors.

Not wanting to create unneeded problems, I usually avoid specifying
padding and border on components with a specified
width. This way I do not have to correct for the broken box model
in aged versions of Internet Explorer.

An important item, which almost people forget, is to add rules for
a:focus. Users who can’t or will not use a computer mouse can jump from link to
link with the Tab key or similar. For them it is crucial that they
can ascertain which link has focus. I commonly assign a very distinguishing background
Color. Internet Explorer, of course, does not understand this, but it
incorrectly applies a:active instead.

Bug Fixes

When I’m content with the layout and have produced the background images and
whatnot that I need, it is time for the less entertaining part of designing:
Sorting out the major flaws in Internet Explorer. I create a separate
Cascading style sheets file, which I link to in a conditional comment, so that more
modern browsers don’t have to bother with it. By testing in parallel with
versions 6.0, 5.5 and 5.01, it’s usually a relatively speedy task to eradicate
the worst errors. Internet Explorer has grievous problems with floats, but many of
them can be fixed simply by setting display:inline.

Sometimes it’s also essential to correct for the faults in Internet
Explorer for the Mac. This means yet another cascading style sheets data file, which I then
import into the primary style sheet in a comment hack:

/*\*//*/
@import url(ie_mac.css);
/**/

All rules in that file start with a * html selector, to
give them higher priority than the subsequent rules in the primary style
sheet.

Print Style Sheet

Then it is time to make a print style sheet. There are two choices here:

1.   Supplement the primary style sheet.
2.   Supplant the main style sheet.

Which alternative I choose depends upon how large the difference is betwixt print and
screen. It’s commonly less complicated to use the primary style sheet for screen only, and
use a complete style sheet for printing.

The print style sheet makes sure that only black, white and shades of grey
are applied, and sets display:none for things that are purposeless on
paper, such as menus.

Scripts

When scripts are called for on the pages, I add them last of all. I do not apply
event attributes in the markup, but allot the event handlers in the script
file itself. This way I achieve the utmost separation of structure,
presentation and behavior.

Validation

When the test page is finished and works to my satisfaction in all modern
browsers and Internet Explorer, I verify that the markup and style sheets are
correct by validating them.

Then I can remove the copy and transform the page into a template, which I
use as the basis for all pages.

A few pages contain things that did not occur on the test page, such as images,
tables and quotes. When these things happen I have to plunge into the style sheets
and add new rules, when necessitated. For each such addition it’s imperative to test
in all target browsers and to validate. It’s also significant not to forget the
print style sheet.

When images are involved it is critical to test the page in Lynx. I can then see
At once if my text equivalents work or not.

Summary

I begin with the semantic markup. Then I create the graphical design accordant
to the cascading style sheets standard, and fix the defects in Internet Explorer.

This is one way to do it. I am not saying it’s the most effective way, but it
works very well for me.

In what way is this better than the conventional way of drawing a comp in
Photoshop and then cut it up and insert it into tables?

By centering on structure and semantics 1st, I guarantee that the pages will
work the right way without style sheets and client-side scripting. That also means
that there’s a fair chance that they’ll work for users with assistive
technologies (screen readers, for example) and for search engines.

A table-based layout created from a chopped image seldom gets the page’s
Elements in a coherent order. This applies particularly to more complex
layouts which call for nested tables to accomplish the wanted design. Such a
layout is really difficult to serialise in a intelligent way. The page may become
Exceedingly difficult to use in browsers that do not support tables.

Why not design for Internet Explorer 1st then? The bugs in IE
are well known, and usually rather easy to correct for. It’s more effective
to develop to standards and then employ a couple of simple workarounds, than to design
to a broken web browser and then attempt to adjust the result for standards-compliant browsers.

How do you do it?

Updating is Key