Designing Web Pages
A collection of tips and thoughts about creating a well designed web
site. Assembled for MLCUG, Feb 11, 2006.
- Content is King
How do you make a quality website? Three words. Content, content,
and content. Give the audience a reason to care. Too many web pages
are like tales told by idiots, full of sound and fury, signifying
nothing. Do you want to be interesting? Then forget the graphics and
the glitz. First and foremost, have something to say.
To create a document worth reading and worth looking at, you must
have some writing skill. You must have information to present. You
must do some information design.
Quality content requires iteration. You have to be willing to write,
rewrite, and rewrite again to produce an excellent document. Nothing
is right the first time. You have to tweak, fidget, and adjust at
least a little. Quality requires a time investment. First drafts are
rarely perfect drafts.
- Write what you know
You can make your pages look absolutely fabulous but if they don't
say anything, nobody's going to care. Give the world your art, your
music, your poetry, your political rants, your short stories, your
first grade photos, your shareware and freeware, your archives of
hobby stuff, your hints about how to make great tie-dye, your really
handy Perl script, your list of the ten best bookstores in the Greater
Podunk area. You know something that nobody else knows. You can do
something that nobody else can do quite the same way. You've made
something that the rest of the world has never seen. Share it. Put it
in your web page.
- Writing and Design
Most will find that it is easier to write interesting content that
it is to design a visually appealing presentation. Design work
encompasses usability issues as well as aesthetics. Starting with
good content and a simple, standard presentation will yeild a page
that gets your info out there in a way your audience will most likely
Know your audience
- Who is reading?
Identify the potential readers of your Web site so
that you can structure the site design to meet their needs and
expectations. The knowledge, background, interests, and needs of users
will vary from tentative novices who need a carefully structured
introduction to expert "power users" who may chafe at anything that
seems to patronize them or delay their access to information. A
well-designed site should be able to accommodate a range of users'
skills and interests.
- How does it look?
A web page is like any presentation - there has to be the right
level of eye candy/entertainment and content and no
negatives/turn-offs. The page has to load in a reasonable amount of
time and should be easy to navigate. It's nice when the navigation
tools don't scroll off the page on longer pages.
- HTML = Hyper Text Markup Language.
It defines the ways you can tag text and objects. It includes
style-defining tags (like <i> for Italics and <b>
for bold) and content-describing tags (like <h1> header,
<p> paragraph, or <blockquote> quotes). Tags should be
thought of as ways to *identify content* instead of how it should be
*displayed*. This will also help to bring structure to the document.
The browser decides how to display your HTML, not you. Design
decisions about displaying tags are made by the programmers who wrote
the browser. Some browsers display the <em> tag as italics; some
display it as underlined text. You, the document author, have no
control. You can't pick good fonts. You can't decide how far to indent
that block quote.
The viewer can also influence the appearance of the
page by changing the brower's behavior.
- Home or Index Pages
Short (1-3 screens) page that act as a table of contents. Many links to other areas of the site. General info about site.
- Menus and navigation
User should be able to move around the page and/or site via a common set of links used throughout.
- Identify links, new and visited
Links should be easily identified. Standard colors help user know a new link from one previously visited.
- One monolithic page vs. Many sub pages
Depends on content. Users might shy away from a long home page but would rather read a lengthy article without having to click "Next.." every screeen.
- Design Considerations
Use of white space, headers, lists, and tables to make page attractive to look at. Similiar principles apply to any document prep. Style sheets can aid in document design and consistancy.
- Site Maps
Lets users see and navigate everything at a glance.
Detailed descriptions of these tags taken from the NCSA Html Primer.
- Preformatted text
- Forced line break
- Horizontal rule
- Relative Pathnames Versus Absolute Pathnames
- Links to Specific Sections
- Image Size Attributes
- Aligning Images
- Alternate text for Images
- Images as Hyperlinks
- External Images, Sound, and Animations
The Nitty Gritty
- Text Editor
- Mozilla and the like
- Word Processors that can "Save as html"
- Front Page and friends
One of the important maxims of computer programming is: Be
conservative in what you produce; be liberal in what you accept.
Browsers follow the second half of this maxim by accepting Web pages
and trying to display them even if they're not legal HTML. Usually
this means that the browser will try to make educated guesses about
what you probably meant. The problem is that different browsers (or
even different versions of the same browser) will make different
guesses about the same illegal construct; worse, if your HTML is
really pathological, the browser could get hopelessly confused and
produce a mangled mess, or even crash.
That's why you want to follow the first half of the maxim by making
sure your pages are legal HTML. The best way to do that is by running
your documents through one or more HTML validators.
One such beast is the W3C Validator.
Many of the notes and quotes above came from:
- What is CSS
HTML elements enable Web page designers to mark up a
document as to its structure. The HTML specification lists guidelines
on how browsers should display these elements. For example, you can be
reasonably sure that the contents of a strong element will be
displayed bold-faced. Also, you can pretty much trust that most
browsers will display the content of an h1 element using a big font
size... at least bigger than the p element and bigger than the h2
element. But beyond trust and hope, you don't have any control over
how your text appears.
CSS changes that. CSS puts the designer in the driver's
seat. It allows for consistant look across multiple documents.
Affords the author more control on how the pages looks. Common
tasks with CSS are setting colors and backgrounds, fonts, white space
around elements, margins, and links.
- Using CSS
Not all Browsers can render every aspect of CSS properly. Test your page on as many platforms as possible.
Useful hack for IE: Use a conditional statement to modify CSS -
<!--[if ie 6]>
//ie hack stylesheet
- Page Style
This page uses multiple style sheets. To see them (in Firefox) use the "View ->Page Style" menu option and choose "Alt 1" or "Alt 2"
Last modified: Sat Feb 11 08:28:53 2006