David doesn’t use a business name, and the focus needs to be on his services and not him personally. In case he wants to change the site name, the header needs to be text and not a graphic. For his name I specified Fontin Sans SC (using @font-face), Lucida Grande, Verdana, sans-serif. The tagline is Georgia.

The desired header (Firefox 3.5)

Looks pretty good, doesn’t it? Sigh.

In Internet Explorer his name disappeared completely, so I adjusted the colors. It’s a little more gaudy than intended, but it will work.

Google Chrome (Win) - added 7/25

Opera 9 (Win)

Safari 4.0 (Mac)

Firefox 3.5 (Win)

Firefox 3 (Mac)

IE 8 (Win)

IE 7 (Win)

IE 6 (Win)

I was disinclined to fire up the second PC for this post, so the IE 7 and IE 8 screenshots are courtesy of IE Net Renderer. My laziness also explains why there’s no screenshot from Google Chrome.

Update August 20, 2009: I couldn’t handle the variation in headers. It was too confusing to me to have the site look different depending on which browser I had open. It was an interesting experiment, but I felt like the trade-offs required to make the header usable for all browsers exceeded any design benefits.

2) Next to the “Upload/Insert” label is a row of buttons. When you mouse over each button, a title tooltip should become visible. The buttons are, in order from left to right, Add an Image, Add Video, Add Audio, Add Media.

3) Insert the cursor at the point in your post where you want the file link to go.

4) I want to upload a PDF, so I click the Add Media button (the one on the far right that looks like an asterisk or sunburst).

5) A dialog box will appear. Navigate to the file on your computer that you want to upload and click “Open.” The file will be uploaded to your blog.

6) A dialog box displays. Here you can give the file a title, caption, and description, if you want. I suggest adding at least a user-friendly title. The title will be the link text.

7) Still in the dialog box, click “File URL” (below Link URL).  Then click “Insert into Post.”

8) That’s it! Success!

If you don’t like to write, if you don’t know what you would write about, if your days are already so full you can barely find time to catch your breath, blogging might not be for you. Then again, you might love the opportunity to write whatever pleases you and to engage with others.

The major differences between a blog and a Web site are that a blog is updated more frequently and your readers can comment on what you’ve written. Blog entries are usually displayed on the main blog page with the latest entries first. A blog can be incorporated into your Web site, or it can take the place of your Web site.

Getting started blogging is easy: go to one of the free blog hosting services and sign up. You’ll need a user name (WordPress, LiveJournal, Vox) or a name for your blog (Blogger), a working e-mail address, and a password. That’s it. Fill out the registration form, click the submit button, and you have a blog.

After you’ve registered, you’ll need to log in to configure your blog. Grab a cup of tea or whatever, because it will take a while to select a template and set your preferences. Public or private? Comments or no comments? How many blog entries per page? Who should I add to my blogroll (list of other blogs)? Should I even have a blogroll? And so on.

If you still have questions, these sites have some answers:

• What is a blog?
• How to Start a Free Blog at Blogger.com
• How to Start a Free Blog at WordPress.com

Free blog hosting services

• WordPress.com
• Blogger
• LiveJournal
• Vox

Free blog software you can install on your Web site

• WordPress
• Movable Type

Books about blogging*

• Blogging Tips: What Bloggers Won’t Tell You About Blogging
• ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income

*Which I have NOT read. Blogging Tips sounds like a very useful book for the new blogger, but if you’re the type of person who can wring more than $99,000 a year from your blog, I strongly suspect you’re already blogging.

• Page tags
• Site logs
• How to access your site logs through your Web host
• Example site log entry

There are two ways to track your site visiters: site logs and page tags (counters and trackers). Both provide information about

• the number of visitors,
• the countries of your visitors,
• the links on other sites that led to yours,
• the words that brought up your site in online searches,
• which search engine was used,
• the Web browsers and operating systems used by your visitors, and
• other data.

Page tags

Page tags are bits of code that you put on each page that you want tracked. (For a blog, you put the code in your template.) The code connects to a third-party Web site where your statistics are stored. To check your statistics, go to that Web site and log in.

One popular and perhaps the most complete service for collecting site stats is Google Analytics. Google requires that you have a Google account. The Google account has to be confirmed, which means they send an e-mail with a link that has to be clicked. You also have to upload a file to your server (put a file on your Web site) so that Google knows that the site you want to track is really yours. Then they give you the code that needs to be put on each page you want tracked.

Some free services for tracking visitors with page tags:

• Google Analytics
• Site Meter
• StatCounter
• GoStats

See a more complete list of free counters and trackers at DMOZ.

Note: A hit counter that shows the number of visitors (actually the number of times that page has been loaded in a browser) to every person who visits your site is not recommended. It won’t provide meaningful statistics, and a low number can negatively influence visitors.

Site logs

Most, if not all, servers (a server is the computer where files are stored) keep a record (log) of every resource (pages, images, scripts) that is accessed. These logs record the date and time, the file name, whether the access was successful, the requesting agent (browser), and where the request came from (IP address).

If you have a Web site, you should already have access to your site logs. You can see the data from the site logs in a couple of different ways:

• Install a log analyzer program and download the logs to your computer
• Use the log analyzer program provided by your Web host

You can download free log analyzers from SourceForge.

How to access your site logs through your Web host

A log analyzer may be included with your hosting.

If so, you can log in to your control panel to check your stats. The control panel is the page where you change your site configuration. If you’re not sure how to log in, go to your Web host’s main site and look for the customer log-in. If there’s a control panel option after logging in, select it.

Different Web hosts offer different control panels. Below are instructions for three of the most common ones, cPanel, Plesk, and vDeck.

cPanel

Before any statistics can be collected, you need to select the statistics program you want to use. In the Logs section, click the Choose Log Programs icon. [screenshot] You can select all programs that are available, if you want. Until a program is selected, there will be no data to view, and it will take up to 24 hours for anything to be reported. Check your stats in the Logs section by clicking the icon of the stats program you want to use. [same screenshot]

Instructions for viewing statistics with cPanel.

Plesk

Click the Home link on the lefthand menu. A set of icons separated into sections will appear. [screenshot 1] Click the Report icon inside the Domain section. A Web site report will appear. Scroll down to view the report or click any of the Tools icons to change your options. [screenshot 2]

View Plesk tutorials (scroll down to End User Tutorials).

vDeck

Click the Reports icon. [screenshot 1] You’ll have three choices for viewing your Web site traffic. [screenshot 2]

A vDeck tutorial.

Example site log entry

Here’s an entry from the site log for Williams Writing, Editing & Design. This is a raw entry; it has not yet been processed. What you see in your stats program will look completely different.

86.3.238.188 - - [19/Mar/2008:08:46:57 -0400] "GET /design/book.shtml HTTP/1.1" 200 12950 "http://www.google.co.uk/search?source=ig&hl=en&rlz=&q=designing+book+layout&meta=" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"

What this entry means:

86.3.238.188

This is the IP (Internet Protocol) address assigned to the computer that requested the file. You have an IP address when you connect to the Internet. Your IP address is usually temporary, may be shared with other customers, and is assigned to you by your Internet service provider (ISP), the company that sells you dial-up, cable, or DSL service.

[19/Mar/2008:08:46:57 -0400]

This is the date and time, Greenwich Mean Time, with a 4-hour adjustment.

"GET /design/book.shtml HTTP/1.1"

The GET command says to show the page at http://www.williamswriting.com/design/book.shtml using the HTTP/1.1 protocol.

200

The status of the GET command is okay; the request was received. The most infamous status code is 404: Not Found.

12950

The size of the requested file, in bytes.

"http://www.google.co.uk/search?source=ig&hl=en&rlz=&q=designing+book+layout&meta="

The page that linked to my page (a Google UK search) and the search term: designing book layout. A log analyzer program would search for the location of the URL www.google.co.uk and report the visitor’s country.

"Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"

The browser and operating system my visitor used, which is MS Internet Explorer on Windows XP.

The current version of the Event Calendar plug-in (3.1.1rc3) doesn’t work with WordPress 2.5. A solution was posted to the Event Calendar e-mail list.

I’ve uploaded my patched files here: http://www.williamswriting.com/pdf/ec311rc3patch.zip

To use the patch, first download and unzip the Event Calendar 3.1.1rc3 plug-in.

Then download the file from my site. Copy the unzipped files into the Event Calendar plug-in folder. DON’T FORGET TO SCAN FOR VIRUSES BEFORE UNZIPPING.

There should be two replacement files: eventcalendar3.php and ec3.js. Backup files for both (eventcalendar-BU.php and ec3-BU.js) are included, just in case the patches don’t work for you. The Past Events plug-in (not a patch but very useful) contributed by one of the list members is also included.

Added: Sergio asked, “Is there any solution to the 404 error with the tags in the WP 2.5 when you use the ‘Keep Events Separate’ option?”

This patch should fix that problem. I use “Keep Events Separate” on my test blog. There has to be an event for the month that’s clicked, however. I haven’t tried this patch on WordPress 2.5.1 yet.

In our current round of usability research, only 76% of users who expressed a desire to run a Google search were successful. In other words, 1/4 of users who wanted to use Google couldn’t do so. (Instead, they either completely failed to get to any search engine or ended up running their query on a different search engine — usually whatever type-in field happened to be at hand.) . . . Also, for this round of research we’re deliberately recruiting above-average users.

Following that link:

Unless a specific study calls for participants with a different profile, we mostly recruit people with respectable jobs — an engineering consultant, an equity trader, a lawyer, an office manager, a real estate agent, a speech therapist, and a teacher, to take some of the job titles from the first week of our current study.

What an eye-opener.

The first Web site for Northern California Publishers & Authors (then called Sacramento Publishers Association) was hosted by one of those companies that offered free sites if their banner ads were displayed at the top of each page.

I remember because I built it.

That site was built with (gasp!) tables for positioning. Tables, and bright colors, and that little stats tracker at the bottom of the page.

(Oh geez, it looks like that account was never closed. When I opened up the archive file to take a screen shot, the tracker image was linked to Extreme Tracking — “Counting since: 22 Jul 2000.” Oops.)

May 2005

Over the years I made incremental changes to the design. When the site was moved to paid hosting in late 2001, the logo was also redesigned to fit the spot previously taken by the advertisement. When the organization changed its name again, I swapped out the logo. But that was it as far as making changes. Maintaining the site took enough time, I wasn’t going to volunteer to fix something that wasn’t broken.

A two-year break from maintaining the NCPA site gave me a chance to convert my own Web site to that new-fangled CSS thing. I worked with blogs and databases and content management systems, and when I became NCPA webmaster again, it was time to drag the site into the 21st century.

December 2007

I settled on WordPress for the CMS. The templates are easy to build, and the admin interface is easy to understand and customize.

I wanted to make the site easier to update so all the work doesn’t end up on one set of shoulders. I’m still working on not doing all the work, but updating and adding pages is much faster and easier: log in and type. New announcements and events are automatically shown on the front page. I don’t have to remember to put information in multiple spots; I don’t have to remember to change it when it’s outdated.

And I wanted the site to showcase members.

Thank you, LibraryThing. After creating an NCPA account and entering all our members’ books into the catalog, I could display members’ book covers on our site by copying a bit of code from the LibraryThing site. Each book cover is linked to its listing on Amazon.com; click a book cover for more information.

I’ve got some ideas for other things to add — a group blog, anyone? — but for now the NCPA site is closed to major changes.

So Loraine asked me to add the blog link to her site.

Site before redesign

At first glance her site seemed pleasing, lots of white space and an attractive color and font for the main site heading. A closer look revealed problems:

• The header, Don’t Get Thin Get Healthy, was a graphic with no alt tag, making it invisible to screen readers and search engines
• No headings at all were used (search engines use headings to help determine site content)
• Neither book title nor author name were used in text (only in graphics), making them invisible to search engines
• Using orange text on green buttons for the current page link may cause difficulty for visitors with certain types of color blindness
• The use of three greens (header, link buttons, bold text) gave an uncoordinated, scattershot effect
• The bird of paradise graphics appeared to have nothing to do with anything on the page, like they’d just been plopped in an empty space to look pretty
• Having the menu buttons separated across the page width disrupted normal eye tracking

In addition, the link buttons at the top of the page weren’t designed for expandability — the Home button and “by Loraine Holden” were one graphic. Adding a link for a blog would entail recreating the menu anyway, so I suggested that the entire site be redesigned.

Loraine agreed, and I started working up a new design. The bird of paradise graphic was important to Loraine, so I made it a key part of the design and not an afterthought. She also wanted site visitors to call her about speaking engagements, so her phone number is placed in a prominent position on most pages. She doesn’t have time to monitor blog comments for spam, so her blog doesn’t have a comments section. In fact, her blog isn’t called a blog at all — it’s an ezine.

Redesigned site

I think her site redesign turned out well. Decide for yourself: dontgetthin-gethealthy.com.

Previously, to make sure everyone who visited my site saw it the way I wanted them to — green background, main text in a center column, narrow columns on either side containing a menu and quote — I used a table to organize where the text and graphics went. The number of people still using older browsers with inconsistent support for Cascading Styles Sheets (CSS) was high enough that I felt obligated to design the site with their needs in mind.

But in the last couple of years browser support for CSS has improved considerably and, according to my site logs, my visitors are using the latest browsers. Voilà!

Before and after

• Home page December 2005, table-based layout
• Home page March 2006, CSS implemented
• Home page March 2006, CSS not supported

Ever notice how some days, cable or not, the Internet is slower? For dialup access, the rated speed for a modem may be 56.6 Kbps. That’s the top speed. The actual connection speed can be anywhere from 24.4 to 32 to 44 Kbps — just like rush hour on the freeway.

Be courteous; do your part to keep traffic moving.

You can compress your images a considerable amount without losing any detail. Below are links to the same image exported from Photoshop with different compression levels. Each link opens in a new window so you can compare them. (Assuming you wait for the entire image to download!) The original file — not linked below — is 309 KB.

See for yourself (links open in new windows)

• Uncompressed, 154 KB, 28 seconds at 56.6 Kbps
• Minimal compression, 119 KB, 22 seconds at 56.6 Kbps
• Moderate compression, 59 KB, 11 seconds at 56.6 Kbps
• Average compression, 27 KB, 6 seconds at 56.6 Kbps
• High compression, 18 KB, 4 seconds at 56.6 Kbps