tutorial

Subscribing to news feeds

owner — Sun, 22 Jul 2007 02:57:53 +0000

You'll see this symbol on our site and many others: . It indicates the presence of an news feed that you can subscribe to. If that means nothing to you, don't worry. In this article I'll explain what a news feed is and why you may benefit from using it.

Background

You are probably familiar with blogs, which are used to report on personal or news events. Imagine that you had a blog and every day or two, you added a new entry. Your postings are not on any regular schedule. For your fans to keep up-to-date, they need to check your site on a regular basis to see if anything new has appeared.

Now imagine that you are the blog reader. How likely is it that you would make the effort to repeatedly visit every blog site that might interest you? Someone figured out that there had to be a better way to read blogs and the news feed was born.

With a news feed, each new blog article gets added to a special file. As a reader, you use a special type of software called a news reader to read these files. When you add the file's location to your reader, you are said to be subscribing to the news feed. Each time you start your news reader, it checks each of your subscriptions and looks for articles you haven't read. It presents these to you—you can read the ones that interest you and discard the rest.

In years past, people accomplished this with e-mail newsletters (actually, they still do—many people like to stick with what they know). Each new article or set of articles would be e-mailed to each subscriber. You would read them with your regular e-mail program, and save or delete the messages as appropriate.

If e-mail works, why use a news reader? There are several advantages:

You can subscribe and unsubscribe at any time and the effect is immediate.
You do not need to give out your e-mail address or tell anyone about your subscriptions.
You can read articles on your schedule, not on whatever schedule the author uses to send e-mails.
A good news reader will make it easy to go through the articles you receive and find the ones you are interested in.

Another view

There is another way to think about news feeds that highlights the connection to news.

Imagine that a news reader is software that lets you design your own newspaper. You place world news on page one and local news on page two. You add a business section, an entertainment section and so on. The content for each section of your paper comes from the various news feeds you select. Just as you read the newspaper each morning, you can bring up your news reader once a day to see the articles that have been added.

The advantage of this model is that it makes you think about creating a useful source of information as opposed to a random selection of feeds you encounter.

Articles

What does an article in a news feed contain?

A headline
The date and time the article was published
The author
Either the full content of the article or a "teaser" with a link to the full article

The reason some articles are incomplete is to entice you to the Web site. Most authors like to know how many readers they have, which articles get the most attention, etc. It is difficult to get this information if you can read the complete article through your news reader. It is also difficult to expose you to other Web site content or to advertising, which funds some blogs.

Types of news feeds

So far, I have avoided describing the different types of news feeds. I'll mention some of the common types available in case you encounter their names. For most people, this is a problem for the news reader, not for them.

RSS is a popular type of news feed. RSS stands for Really Simple Syndication. Several different versions are available, but good news readers handle all of them.

The other common format is called Atom, which provides some improvements over RSS. Again, it's best to leave to the details to the news readers, but if you have a choice of both formats, you may get better results with the latter.

Reading news feeds

Choosing the right news reader makes all the difference. Many are free and I recommend you try out different ones to see which works best for you. New ones are always appearing.

The news reader I use is called GreatNews. I like it for two reasons:

It makes it easy to quickly skim over hundreds of articles
It's display captures a bit of the "newspaper" experience

Some other popular news readers I have heard about are Bloglines and NewsGator. Have something you like better? Send me a note and tell me why.

A quick guide to GreatNews

Here's what a typical GreatNews window looks like. In this example, I am displaying just the content pane. There are several different styles you can use. This one is called the "newspaper" style:

For an alternative view, I've made all three GreatNews panes visible. The side pane shows your subscriptions, organized within folders. The top pane shows just headlines—you can use it for quickly skimming through a lot of articles.

The main question I had when I started using news feeds was: how do I subscribe to a feed? What exactly do I do with the symbol I see on so many sites.

To subscribe to a feed from Firefox, use the Options menu and select the Feeds tab. Select GreatNews as the feed reader. From then on, if you click on a feed icon, GreatNews will automatically start and add the new feed to its list.

In IE7, it's just a little harder. Bring up GreatNews and click on the Add News Feed icon on the tool bar. Copy the URL of the page displaying the feed icon into the Feed URL field of the dialog GreatNews displays and select Next. GreatNews will examine the page and locate the feed(s) it contains. In other words, while some news readers need to be told exactly where to find the feed, GreatNews just needs to know the Web page which the feed symbol; it will the exact location of the feed on its own.

Try it, you'll like it

People who use news readers would find it hard to live without one. But many people are reluctant to use news feeds—they imagine it as something mysterious, difficult to learn and use and of doubtful value. I hope this article has helped clarify the benefits of news feeds and enticed you to create your personal newspaper.

Using FTP

owner — Wed, 18 Jul 2007 20:18:20 +0000

This article will teach Web site owners with Microsoft Windows how to use FTP to transfer files to and from their Web site. It is intended as a tutorial for people who have never used FTP. You should be comfortable using an Explorer window to move or copy a file from one folder to another before attempting this tutorial.

FTP stands for File Transfer Protocol. A protocol is a language that computers use to perform a particular task. Files can be transferred from one computer to another in various ways, but File Transfer Protocol, as the name implies, is particularly well suited to this task.

Installing an FTP client

Since FTP is only a protocol, we need to find a program that implements that protocol. More precisely, we want an FTP client which can then communicate with any FTP server. You can think of the client as the equivalent of your Web browser and the server as the equivalent of a Web site.

The program I'm going to recommend is called FTP Surfer. It is free, courtesy of Whisper Technology Limited. You can download it from their site. Despite its age, it works well and is extremely easy to use. If you find something even easier, please let me know.

Click on the download link and select a place to store the downloaded file. When the download completes, locate the file and double-click on it to begin the installation. Click Next to reach the license agreement. Accept the terms and click Next again. Choose to let it install in the default location by clicking Next and the program will be installed. Click Finish to exit the installation program.

Since we want to transfer files to and from our Web site, we will need the address of the FTP server associated with our site, as well as a few other pieces of information. You will usually need to talk to your Webmaster or hosting provider to get the information you need.

The following data should be sufficient:

The name of the FTP server.
The username and password of the FTP account.
The path to the top of the Web site.

For instance, if our Web site were called www.sample.com and hosted by ICDSoft.com, the answers would be:

ftp.sample.com
The same username and password used to access the account's control panel.
/www/www

Configuring FTP Surfer

With this information, we're ready to start running FTP surfer. Bring up the Start menu, select Programs, then FTP Surfer and FTP Surfer again to start the program. The first thing we'll do is create a profile for our Web site.

In the menu bar, select File, then New and Site Profile. The Profiles dialog will appear. We will enter our data in the tabs on the right. Here is what the dialog will look like when it's filled out for our sample site:

A few notes:

The Name and Description can be anything you want.
The Server type should be set to Auto-detect.
The User profile should be User defined.
To enter the path, select the Explore from field and then the User defined item from the drop down. Now type in the path given by your Webmaster or hosting provider. If the path is "/", you can also select Login folder.

The remaining tabs can be left at their default values. Press OK to complete the profile creation. Your FTP surfer window should now look like this:

You should leave most of FTP Surfer's settings at their default value. But you should check these values by clicking on the Tools menu and then on Options:

In theContent tab, uncheck Hide files starting with a period. This allows you to see all files on your Web site.
In the Connections tab, make sure Always use PASV mode is checked. Most of today's FTP servers seem to work better with the client in "passive" mode. You may want to check with your Webmaster to verify whether passive mode is recommended for your FTP server.

Adding a profile and configuring FTP Surfer is something you only have to do once. From then on, you start the program and can immediately begin transferring files.

Transferring files

What makes FTP Surfer easy-to-use is that it operates much like an Explorer window. Click on the profile name in the Explorer tab on the left-side of the window and FTP Surfer will automatically connect to your Web site and present a file display similar to this:

To upload a file (you go up from a client to a server), open a normal Explorer window containing the file you want to transfer. Drag the file from the Explorer window into the FTP Surfer window. The file will be copied to your Web site (your local copy will not be deleted).

To download a file, drag it from the FTP Surfer window to an Explorer window.

If you are more comfortable using Copy and Paste to copy a file from one location to another, you can also use Copy and Paste to upload or download files with FTP Surfer.

Final words

With great power comes great responsibility. Make sure you understand where to place any files you transfer. Consult with your Webmaster if you have any questions.

Don't delete any file on the FTP site that you are not familiar with—files deleted through FTP Surfer are permanently deleted. They are not placed in the Recycle Bin.

If you have a small Web site and a fast connection, a good safety trick is to copy the entire Web site to a temporary location on your PC before you make any changes. If anything goes wrong, you can copy the files back to restore your site.

Recommendations for improving fixed-width designs

designer — Fri, 25 May 2007 03:19:12 +0000

This article focuses on overcoming some of the drawbacks of fixed-width designs. These are suggestions based on my experience rather than hard-and-fast rules. Feel free to critique my suggestions and propose improvements or additional guidelines.

Use a CSS reset stylesheet

Fixed-width design: A design in which the Web page elements maintain their size and position regardless of the browser window's width.Each browser has a default stylesheet that is used when no styles are defined, but the default is not the same for all browsers. A CSS reset stylesheet provides a consistent base style for all browsers, which is valuable for fixed-width designs, where layouts are dependent on pixel-perfect positioning. Eric Meyer has been working on this problem for years. Take a look at his most recent CSS reset file. Yahoo! also provides a CSS reset file as part of their UI library.

Select the design width based on your intended audience

For a fixed-width design, one of your most important decisions is selecting the design width. Your choice should work well for your targeted audience. Make it too narrow and much of the visitor's screen goes to waste; make it too wide and visitors will need to scroll horizontally (which people hate to do¹).

For almost all the sites I work on, my clients prefer not to exclude any significant chunk of the population. This results (today) in choosing an 760-pixel-wide design for an 800-pixel-wide screen. Once a Web site is in operation, you can use the server log files to validate your decision. For example, in the last five months 12.5% of all visitors to my Tiger Heron site used an 800x600 display—not a large number, but still significant. No one used a smaller screen size.

An alternative approach is to create more than one design and use Javascript to select the corresponding stylesheet based on the visitor's screen size. In practical terms, one 800- and one 1024-pixel-wide design is probably sufficient for almost every site. For screens larger than 1024 pixels wide, maximizing the browser window becomes a matter of preference rather than necessity, so the browser width won't always be the same as the screen width. Even if maximized on the largest of today's displays, a 1024-pixel-wide design does a good job of filling the screen.

Yahoo's 1024-pixel-wide Web site on a 1920x1600 display.

What about smaller displays, such as phones and PDA's? I don't have much experience with these, but my instincts say that creating an effective Web site for small displays involves more than just switching a stylesheet. Suggestions, anyone?

Select appropriate font sizes

Font sizes are a design choice. But here's a problem: in print, 12 point text is the same size everywhere. On the Web, the size of 12 point (or even 12-pixel) text depends on the pixel density of the display—the higher the density, the smaller the text. If you use a single stylesheet, your fonts need to be large enough to be readable on high-pixel-density displays, but not so large as to overwhelm a viewer on a low-pixel-density display. If you select your stylesheets based on the monitor's resolution, you can choose larger font sizes for monitors with higher resolution.

Select the line length

In print, the typical line length is 10 to 12 words. If that sounds like a small number, pick up some books and start counting—you might be surprised. At an average word length of five characters plus a space, this translates to 60 to 72 characters per line (CPL).

While the print world has a time-tested rule for line lengths, I'm not yet convinced that we have the answer for Web pages. In a study² about the effects of line lengths when reading from a computer display, researchers found that reading speeds increased with line lengths up to 95 CPL without affecting comprehension (about 16 words per line). Despite this, the study participants were split on which line length they preferred.

I checked a number of other sources for recommendations and the only conclusion I can draw is that a range of 60 to 95 CPL is probably fine. Much longer or shorter lines can be unpleasant, although I suspect you can go somewhat over 95 CPL when information density is critical and the typical visitor will read only a portion of the text.

Set the leading

Leading is the typesetter's term for the line-to-line spacing. Studies³ indicate that tight leading doesn't affect reading speed or comprehension, but people still find it uncomfortable. On sites where information density is of primary importance, you may opt to use tight leading. I've found a 1.2 to 1.4 range works well for comfortable reading.

Use an appropriate amount of white space

The usability studies I've seen have been contradictory on the topic of white space. For example, one study⁴ found that reducing white space also reduced the time it took for people to locate information on a Web site. A second study⁵, however, found that it also decreased comprehension. I suspect that the results in the first study, conducted in 2002, were due to the advantage of squeezing more information onto a small screen.

My advice on whether to increase or decrease white space depends on the amount of time a visitor is expected to spend on a page. Blogs should use white space to increase the readability and appeal of a page. A search results page, on the other hand, could sacrifice white space to increase the useful content on the screen.

Center the design

A left-aligned design from the CSS Zen Garden Web site I was a fan of left-aligned designs right up until I purchased my 24-inch 1920x1200 display. Now I'm a fan of centered designs. When I maximize the browser window, a left-aligned design puts the content uncomfortably on the left. I prefer to maximize the window to focus on a page without distractions. In the case of left-aligned designs,however, I can only center them if the window is not maximized, which reveals the background clutter.

Integrate the design with the background

A fixed-width design in a large or maximized window is going to have some unused area. This area is sometimes ignored, but it should be treated as part of the overall design. It can be left plain when appropriate to the site. I tend to spend more time on pages with visually exciting designs.

Two techniques that work well for me. Perhaps you have others?

Compose the design so that the page looks like a piece of paper on a desk. Shading or a complementary background pattern (or both) can improve the visual appearance.

A paper-on-desktop style design from the CSS Zen Garden Web site
Use design elements (e.g. banners, footers) that extend the full width of the browser window.

A WordPress fixed-width design with some stretchable elements (from TemplateMonster)

Keep the content area at least the full height of the screen

Fixed-width designs with little content tend to look weak and insubstantial (in slang, "lame"). If all site pages have a lot of content, then you don't need to do anything to overcome this problem.

Here's an example of a fixed width design (from my ISP's Web site, iinet.com). It looks OK in an 800x600 window:

Maximized on my 1920x1200 display, it looks as though the designer left before completing the page.

The easiest solution is to create a content area with 100% height and fill it with a pattern or color. What I prefer to do, however, is to use some CSS magic to keep a footer at the lower part of the window or content bottom. SolarDreamStudios has a nice tutorial with samples. I've tested their technique on IE6, IE7, Firefox 2 and Opera 9. It works on all but Opera—on Opera it works sporadically (in my testing, it fails when the window is resized vertically, but fixes itself if you resize horizontally). An alternate approach is to use Javascript as described in this article on A List Apart.

Below, I've taken the same design and moved a few elements to the bottom. Although it still has the same content, the site looks much more substantial.

Avoid large expanses of undifferentiated text

Without contrast, long areas of text give the eye nothing to use as a reference point and prove unappealing to viewers. Print designers are familiar with this. On the Web, designers sometimes stop designing when the page template is complete; someone else takes care of providing content. Sites designed this way are sometimes easy to spot—they have a lovely layout wrapped around a mass of text.

One of the main advantages of a fixed-width design is the ability to fully lay out the page. We should take advantage of this opportunity.

References

Web Site Usability, A Designer's Guide, Jared M. Spool and Tara Scanlon
The Effects of Line Length on Reading Online News, A. Dawn Shaikh
Reading Online Text: A Comparison of Four White Space Layouts, Barbara Chaparro, J. Ryan Baker, A. Dawn Shaikh, Spring Hull and Laurie Brady
Web Site Usability, A Designer's Guide, Jared M. Spool and Tara Scanlon
The Effects of Line Length on Reading Online News, A. Dawn Shaikh