Web Design for Writers

Web PR for Writers

It is strongly recommended that writers create a presence on the Web where your readers, potential publishers and others seeking information about can find accurate and authoritative information about you and your writing.

Without this control, you are at the mercy of what others say about you as well as in what context the information is presented.

Websites and Alternatives

Generally, this has meant that you hired a web designer to build and maintain a site unless you wanted to take the time and expense to learn HTML (the markup language used by the web) and the other nuances of building a professional site.

The emergence of blogging software has made it easier to maintain a Web presence without having to pay someone for ongoing maintenance.

In addition there are the aspects of social media (Facebook, Twitter, etc.) that have their own requirements and dynamics.

Websites and Blogs — What's the Difference?

Websites allow for a great deal of creativity when laying out your content across the site. Blogs, for the most part, are based upon the time of posting — much like an electronic diary.

Is Your Content Static or Fluid?

The expectations of your visitors can be quite different as well.

Blog viewers generally expect regular updates — perhaps as frequently as daily and certainly no less than weekly. Those visiting websites tend to expect more static content (although that depends upon the nature of the site).

Return to Top

Websites

Hanging Out Your Shingle

One of the advantages of a website is that it is easy to refer to content in your blogs, emails and other communications and sites that advertise your readings, book launches and publications have a concrete place to link to as well as obtain reliable information.

Doing It Yourself

There is modern software that can help you build and maintain a website much easier than was possible several years ago.

Just Because You Can Doesn't Mean You Should

That said, it is important for you to realize that there is much more to a professional site than cobbling some content together that displays relatively decently in the browser on your computer.

Just as the emergence of modern desktop publishing software (your current word processor) meant that anyone could produce a book didn't mean that just anyone should do it themselves. There are many reasons to go to a professional to begin with.

Hiring a Professional

A professional designer can work with you to provide the sort of website that you can be proud of — one that showcases you as a serious writer rather than a wannabe.

You also don't have to invest in expensive software then take the time to learn to use it. Stick with your writing and avoid the pitfalls of designing your own site.

Return to Top

Blogs as Website Alternatives

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 provide less control of the layout (depending upon the template you're using).

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 normal CMSs.

Be sure to read the conditions of use for the hosting site before signing up. You'll want to ensure that you retain control of the contents of your blog. The two most common hosting sites are:

Blogger.
WordPress.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. You can also purchase templates.

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.

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 to host the blogging software.

WordPress.org. Requirements

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 the reasons a writer may wish to start a blog.
Beginner Blogging for Writers: Part 2 free vs self-hosted and getting started with a WordPress.org blog.

Return to Top

Designing it Yourself

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.

Historically HTML Used and Abused

When the framework of the web was designed, it was viewed as a way for scientists to quickly share data. HTML, the building blocks of the web, was then manipulated in ways that its designers never envisioned to try to emulate the precise control users expected from modern print media.

This created bloated websites where designers either created a photo of the content they wanted to display or intensely redefined every line of text. You can imagine the result: sites that were extremely difficult to maintain or change — even by those that designed them.

Separate Styling from Content

Current web practices mean the separation of content from the tools of layout and styling. This both makes your site more flexible and easier to maintain. Styles could be defined in an external style sheet (CSS) and simpler HTML with layout specific elements depricated in favour of CSS.

Learning HTML and CSS

Even if you don't plan to build websites by hand it is useful to have a basic understanding of HTML and CSS as tools that help you to fix errors and problems on your site:

HTML primer — learn the basic language of the web.
The HTML Writers Guild offers current information and courses on web design.
The Web Developer Extension for Mozilla Firefox is an excellent tool.
W3C is the body that establishes the standards for HTML and other web technologies.
Web Style Sheets are a powerful way to enhance the look of your site and to separate content from layout.
Web Design Resources () includes HTML basics, standards validation tools and more.

Validate the HTML and CSS on Your Site

A good practice is to run your 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 proprietary features that are not recognized by any other browser and should not be used. They were included by the browser before acceptance by the standards bodies approved them (or perhaps even discussed them) in the hopes of drawing support to their particular browser.

Working with Stylized Charactures

The stylized quotation mark (with the dot and the curved tail as illustrated in the graphic to the right) will probably be misinterpreted by the browser to display garbage or an unknown character, which will confuse the viewer.

The most common source of these issues is content copied from Microsoft Word.

There are alternatives like “quoted” (displaying as “quoted”), but this is probably too complex to be practical for most people.

The Ampersand Needs Special Treatment

Because the ampersand (&) indicates the start of special HTML symbols, any other ampersands in your site must be expanded to &.

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 when your site is accessed from your hosting ISP.

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) — especially where the links are underlined (a typical practice on websites).

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 the file (or page) “web.html” in the “links” subdirectory 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 SSI for a file common to the whole site, like a footer; or
Pointing to a shortcut icon (favicon).

Condiderations When Linking to Sites

If you are too specific in linking to an external site (e.g. http://www.canauthors.org/index.html) you are more vulnerable to a broken link in the future when the site is reorganized. You are best to link to the root site domain where possible (e.g. http://www.canauthors.org/). Where you link to specific pages, you can suffer if even the extension of the specific page changes. The following are just some of the current extensions in use:

.html (.htm and .shtml); or
.php; or
.asp (.aspx).

As well, many sites are generated on the fly from databases and tend to have addresses based upon the search critera (e.g. http://www.timescolonist.com/technology/Canada+ability+track+tankers+exclusion+zone+limited/4239269/story.html). These addresses can often use ampersands which need to be expanded to &.

Don't Get Hacked: Be Aware of Security Concerns

You should also take into consideration Internet Security issues and the information in the following section because they affect the stability of your website, particularly in protecting your site from being hacked.

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 — an important component in how search engines evaluate the content on your site), 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 the visually impaired — 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 (each with their progressive 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. It is also open-sourced and development is driven by the needs of a large international group of volunteers rather than corporate goals.

Download the current version of the common web browsers. ()
Where Our Standards Went Wrong is an interesting discussion about the value of standards in terms of economics and other issues.

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 9 unless you're using Windows XP) 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 (Microsoft 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 several campaigns to get rid of IE 6 for the sake of the future of the web, including one by Microsoft.

Developers have spent a disproportionate amount of time catering to the special requirements to make IE 6 display properly — particularly considering the diminishing user base (now less than 1.2% of Canadian users and less than 0.8% of U.S. users).

Download a Current Browser

This site has information about web browsers. Download the current version of the common web browsers.

How Choices Can Affect Viewers

More Than "Personal Choice"

More is at stake than your personal choice. 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.
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 design 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 is an excellent book to learn the techniques used in the current CAA National site.
css Zen Garden- The Beauty in CSS Design illustrates 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 shows how CSS has all the advantages of frames-based sites without the disadvantages.
Basic Guide to Web Design provides links to a number of resources that explain concepts like layout, navigation, fonts, colour and images.

Return to Top

Writing for the Web

Writing for the web requires a different approach than that taken by most media. Long paragraphs and lack of white space is more than an issue of style.

Writing for the Web Research on how users read on the web and how authors should write their web pages.
Writing For Websites: Tips For Effective Communication.
See also How Viewers Use the Web on this page.

Return to Top

Copyright Issues

Start by viewing the Copyright and Electronic Rights: Laws and Agencies page on this site. It includes copyright law and the agencies that administer it.

The Copyright Website deals with copyright issues on the web.
Fair Use of Copyrighted Works. Remember that Canada has nothing similar to the "fair use" available to creators in the U.S.
What Do You Do When Someone Steals Your Content educates about the realities of copyright and theft of content and provides solutions.

Return to Top