Web Design for Writers

Blogs - HTML and Web Site Creation - How Viewers Use the Web
Writing for the Web - Copyright Issues

Blogs: A Website Alternative

Blogs can provide writers with an alternative to building a traditional Website but are more suited to continually-changing content than static content.

No HTML Needed

You don't need to learn HTML—you can enter information in a similar manner to a word processor.

Blogs use templates to make setting up or changing the look of your blog much easier, but come at the cost of less control of the layout.

Blog Hosting Sites

The blogs listed here are free and have numerous templates to choose from.

Because the site is managed, you don't need to worry about the technical details of hosting and security risks associated with Content Management Systems.

Be sure to read the conditions of use for the site before signing up. You'll want to ensure that you retain control of the contents on your blog.

Blogger.
https://www.blogger.com

WordPress.com.
http://wordpress.com

BlogSavy is a beta (work-in-progress) site.
http://blogsavy.com

You can significantly alter layouts on your own if you know HTML and are willing to spend some time learning how to define the template tags, but this seems to defeat the purpose of a ready-to-use service.

Blog Hosting Software

Hosted on Your Site

This software is intended to be hosted on your own site. Because of this, it gives you greater control of the layout and content, but also requires more technical knowledge to run.

It also means that you're going to have to front the costs of a domain and hosting your blog in the same manner as any traditional Website.

Security & Hosting Issues

Unlike fully-hosted blog sites, you'll need to monitor the security risks discovered for all the software required to host your blog on your site. Be sure that your ISP meets all the necessary requirements.

WordPress.org. Requirements
http://wordpress.org

Other Blogging Resources

This software is intended to be hosted on your own site. Because of this, it gives you greater control of the layout and content, but also requires more technical knowledge to run.

Beginner Blogging for Writers: Part 1) looks at the reasons a writer may wish to start a blog.
http://www.thecraftywriter.com/2007/12/02/beginner-blogging-for-writers-part1

Beginner Blogging for Writers: Part 2 looks at free vs self-hosted and getting started with a WordPress.org blog.
http://www.thecraftywriter.com/2007/12/08/beginner-blogging-for-writers-part2/

Return to Top

HTML and Web Site Creation

If you want to have more control over your site or to manage an existing site, you'll need to either learn HTML or have a program (or Web designer) that will do the job for you. Not all HTML programs are equal—many have severe failings, particularly older programs.

Russ Harvey's Web Design Tools includes links to HTML instruction pages, dealing with spam, Web creation tools, design tips and links to sites where you can download buttons and other graphics.
http://www.russharvey.bc.ca/resources/web.html

Web Enthusiasts Association of Victoria (WEAV) includes a newsletter on Web creation.
http://weav.bc.ca

W3C is the body that establishes the standards for HTML and other Web technologies.
http://www.w3.org

W3C Markup Validation Service allows you to check your HTML for accuracy and compliance with the standards. I strongly recommend this free service.
http://validator.w3.org

Where Our Standards Went Wrong is an interesting discussion about the value of standards in terms of economics and other issues.
http://alistapart.com/articles/whereourstandardswentwrong

Web Style Sheets are a powerful way to enhance the look of your site.
http://www.w3.org/Style

An HTML primer to help you create your own home page.
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

The HTML Writers Guild offers current information and courses on Web design.
http://www.hwg.org

The Web Developer Extension for Mozilla Firefox is an excellent tool for those doing Web design.
http://chrispederick.com/work/firefox/webdeveloper

Validate the HTML on Your Pages

A good practice is to run you site's pages through the W3C Markup Validation Service. This will pick up many errors that you will not necessarily be aware of by viewing the page on your system.

This can be HTML errors or symbols that will not work on other operating systems. Also, browsers sometimes include features that are not recognized by any other browser and should not be used. Here are a couple of examples:

The stylized quotation mark (with the dot and the curved tail as illustrated in the graphic to the right) can be misinterpreted by the browser to display garbage, which will confuse the viewer. Be sure to use the straight quotation marks as found on the keyboard. (There are alternatives like “quoted”, but this is probably too complex to be practical for most people.)
Because the ampersand (&) indicates the start of special HTML symbols, any other ampersands in your site must be expanded to & or &. One place you need to watch are in web addresses where the ampersand is used to separate variables the site uses to display content according to your preferences (such as …&lang=en).

These errors are usually pointed out by the W3C Validator, but the explanation is sometimes confusing.

Other Common Mistakes

Windows-specific Issues

One of the most common errors beginners make (especially those using Microsoft Windows) is to use a drive letter in the address (such as C:\Web\index.html) when specifying links. While this may work on your computer, it will not work on the Internet.

Avoid Spaces in Names

Avoid spaces in the names given to web pages and other files. These can create problems for you in the future:

Spaces in site addresses are replaced with %20 so that my books.html becomes my%20books.html. This can be confusing to your viewers and to those trying to link to you.
Another common alternative is to replace the spaces with underscores. For example my_books.html. This can create an issue when links are underlined since people may not notice the underscore (e.g. my_books.html).

Use Relative Addresses

Always use a relative addresses such as "links/web.html" (note the direction of the slash—a forward slash rather than the backslash used to separate directories in Windows) which points to a file "web.html" in a subdirectory "links" relative to where the current page is located.

To come back from a subdirectory use the relative address style "../index.html" (../ means drop down a directory level before looking for the file).
Multiple instances will drop multiple directories (../../) before looking for the specified file or object.

When to Use Fixed Addresses

While you can use fixed Web addresses (e.g. http://www.canauthors.org/index.html) this proves inflexible since you cannot work the links to test them on your own computer. The same result can be achieved with relative addresses (e.g. index.html) and it will work on both your computer during testing and on the Web in actual use. Fixed addresses are useful in certain circumstances, such as:

A fixed address for your copyright statement (conditions of use) will make it possible for someone to find this information easily if they've copied your page to their computer; or
If you are using Server Side Includes (SSI) for a file common to the whole site, like a footer; or
Pointing to a shortcut icon (favicon).

You should also take into consideration Internet Security issues and the information in the following section because they affect Website design.

Return to Top

How Viewers Use the Web

Be Aware of Differences in Viewer Experience

Unlike the print medium, websites aren't displayed consistently for all users. This is an important concept for both the person managing the website and for those asking for content to be displayed a certain way.

Websites Scanned, Not “Read”

People don't “read” websites like they read books. Typically, the viewing pattern more closely follows that of a person reading a magazine in a doctor's waiting room than someone absorbing every detail. They scan quickly, glancing through pages until something catches their eye or until they find something they're specifically looking for.

Drawing Attention

Just like the waiting room, there are dozens of other “magazines” to choose from and they don't need to make a purchase to view the content. Follow the magazine example and use pull-out quotes to grab your reader's attention. You can also use frequent sub-headings (there are various sizes related to the importance of the material), photos or relevant images and other techniques to draw your viewer's attention to content on your site.

Don’t Depend Upon Illustrations Alone

While you can effectively use illustrations to draw attention to your article or emphasize a point, remember that not everyone can see images (content is read aloud to those visually impaired and Google can't see them either) and there are cultural and other considerations of colour and other subtle details. Using alternative text to describe the effect you're trying to achieve will help in those circumstances where the image is not visible to the viewer.

Not all Browsers Are Alike

The various browsers (and their various versions) will display your pages differently, even within the same operating system. It is always a good idea to view your pages on other computers to see what the results are. You can install more than one browser on your system at one time (although it is difficult to use more than one version of Internet Explorer).

Firefox Recommended

I'd recommend using Mozilla Firefox because it is the most standards-compliant and is available for a large range of operating systems.

Only Use Internet Explorer's Most Recent Version

I strongly recommend that Windows users install and use only the most recent version of Internet Explorer (currently IE 8) as it not only will display pages more accurately, but is safer to use (although, not as safe as Firefox).

Internet Explorer (IE) is only available to Windows (they abandoned the Mac platform at version 5.5) IE has also introduced different style-sheet bugs with each version. IE 6, 7 and 8 all display differently.

There are campaigns to get rid of IE 6 for the sake of the future of the web. IE 6 is holding back improvements that will make the web more user-friendly.

Download a Current Browser

The CAA site maintains information on the various Web browsers and links to their download sites on our CAA Writing Links pages.

How Choices Can Affect Viewers

More Than “Personal Choice”

More is at stake than your personal choice. The choice of how your site is built will affect who can view the content on your site.

There are a number of sites that will help you understand these issues:

The Web Standards Project will help you understand the need for standards and why it may become a legal issue for the CAA (and possibly your branch) in the future.
Web Content Accessibility Guidelines discuss some of the directions Web accessibility is going. Not all access is by standard browsers, nor do we know how the content will be rendered. Discusses why HTML and CSS elements should not be used inappropriately.
Browser Cam is probably too expensive for anyone but a Web studio to use, but this service will show you how your site displays the same page differently on various browsers at different resolutions on various operating systems and on small portable devices (iPhone, Blackberry, etc.) without having to own and set up these computers.
SitePoint Forums discuss all sorts of Web design issues. I've invested in quite a number of their books and would strongly recommend them. HTML Utopia: Designing Without Tables Using CSS was my tool for learning the techniques used in redesigning the CAA National site and the branch template.
css Zen Garden- The Beauty in CSS Design is one of my favorite sites for illustrating the power of cascading style sheets (CSS) in design.
Eric Meyer's CSS Work is another excellent CSS resource site. Check out the ComplexSpiral Demo which shows how CSS has all the advantages of frames-based sites without the disadvantages.

Return to Top

Writing for the Web

Writing for Websites: Fourteen tips for great Website writing.
http://www.website-writing.com/writing.html

Writing for the Web Research on how users read on the Web and how authors should write their Web pages.
http://www.useit.com/papers/webwriting

Return to Top

Copyright Issues

Copyright Law, Agencies and Electronic Rights includes copyright law and the agencies that administer it.
http://www.CanAuthors.org/links/copyrite.html

The Copyright Website deals with copyright issues on the Web.
http://www.benedict.com

Fair Use of Copyrighted Works.
http://www.cetus.org/fairindex.html

What Do You Do When Someone Steals Your Content educates about the realities of copyright and theft of content and provides solutions.
http://lorelle.wordpress.com/2006/04/10/what-do-you-do-when-someone-steals-your-content

Return to Top