Introduction - Personal Websites

Document Sample
Introduction - Personal Websites Powered By Docstoc

       For this assignment, I have chosen to critique, the online
home of America’s Test Kitchen, and Cooks’ Illustrated and Cooks Country magazines. The
site also serves as a gateway to the website for the America's Test Kitchen television show
produced by Cooks’ Illustrated (CI).

       Each year, America’s Test Kitchen (ATK) runs thousands of tests, on everything from
mayonnaise to food processors, in an effort to “develop the best recipes and cooking techniques,
recommend the best cookware and equipment, and rate brand-name pantry staples for home
cooks” (Cooks' Illustrated: About Us, 2005). Neither the website nor the magazines accept
advertising. In this way, the publishers safeguard against any bias that may result from these

       Because it accepts no advertising, the site is subscription based, with subscribers paying
either monthly or yearly ($3.95 or $24.95). Subscribers to either magazine receive a discount on
an online subscription ($19.95). For this price, subscribers receive access to “nearly every recipe
article, equipment test, Quick Tip, and food tasting developed over the past ten years for Cook's
Illustrated” (Cooks' Illustrated: FAQ, 2005). Moreover, the site offers the following items not
available to print subscribers:
        Delicious recipes not published in Cook's Illustrated
        Helpful reviews of cookware, tools, and ingredients not published in Cook's
        In-depth archives of photographs that cover basic cooking techniques, from dicing
           an onion to butterflying a chicken – step by step
        Searchable database, which allows easy access to all features from any computer
        Printable “Buying Guides” for supermarket ingredients and kitchen essentials
 (Cooks' Illustrated: FAQ, 2005)

       The site also hosts “Cooks Chat,” the CI bulletin board. Subscribers and non-
subscribers may access this portion of the site, but registration is required. Just about any
question or topic you can imagine (and some you can’t) is addressed on this board. The
“regulars” are very friendly; they would never make a newcomer feel silly because, for example,
she did not know where to buy chicken fat.

         I have a subscription to the site, but I have limited my comments to those areas accessible
without a username and password. It is possible to preview most areas of the site before buying,
so nothing critical will be missed.

Web Design

Contrast was redesigned about six months ago and nearly all of the design
elements work well. The site uses a primarily white background with black text. Along the top
and sides, there are colored or patterned boxes/table (cabbage leaf pattern, tan, red, yellow,
green) with either black text or bold, “reversed out” white text. The links, and only the links, are
consistently bright blue. CI maintains this nice use of contrast throughout the site.

         The designers of this website definitely worked hard to reinforce the CI brand. The top
banner on every page of the site is the same: the site’s name and the navigational tabs. The only
variation occurs on the page for the TV Show, but since this is actually a link to another site, not
a page on the CI site, it is not jarring.

         As mentioned above, CI uses similar colors throughout the site; the fonts are also
typically the same throughout. In nearly every area, the site uses Ariel for body copy and either
Ariel or Verdana for links. Both Ariel and Verdana are legible, sans serif fonts that look
remarkably similar, so they coordinate. However, this choice is about more than just design. In
its publication, Making Your Web Site Senior Friendly, the National Institute on Aging
recommends the use of sans serif fonts such as Ariel because they are easy for those with
diminished sight to read (National Institute on Aging & The National Library of Medicine,

         CI also repeats images on each page, but they follow Todd Stauffer’s philosophy and use
the images to enhance the text, not overwhelm it (Stauffer, 2003). Since the site does not accept
outside advertising, CI is eager to increase revenue by selling their products. Therefore, there
are many boxes, mini-banners, and links enticing readers to click though and purchase a
cookbook or a subscription. This quantity aside, the site does a good job of ensuring that the
images are not gratuitous. They are there for a clear reason, such as demonstrating the best way
to clean mushrooms or indicating what a new book will look like.

       All of this repetition means that crams a lot of information onto
every page. Moreover, some pages, like the ones for the Tasting Lab and the Equipment Corner,
can be overwhelming. Users must scroll vertically to see all of the available information on a
page (there is no horizontal scrolling on the site). However, the alternative would result in a
significantly less readable page, so scrolling is not the enemy here. Even without scrolling, the
most important parts of each page, including the descriptive copy, the search bar, and the
navigation tabs, are visible in the main screen area. The less critical, but still interesting areas
are kept for the lower portions of each page.

       Someone on the design team at CI has either a ruler or a well-defined ability to align
tables. For example, if text and images were designed as left aligned, then they are left aligned –
all of them. I could not even find a misstep with an indentation.

       Text is always close to the image it describes. This is true in the Bookstore, where
descriptive text appears below pictures of books; the Recipes, where step-by-step instructions
accompany helpful illustrations; and anywhere buttons that refer to nearby text.

Usability, Visual Design and Navigation

       There are two possible audiences for this site. The primary audience is people who like
to cook and the secondary audience is browsers who have come across the site while looking for
a recipe. This second group may or may not consider cooking a pleasure. Many in both groups,
like me, watch the television show and subscribe to the magazines, but many do not. The site
accommodates both types of users. CI offers recipes that are very complex and require top-
notch cooking skills and implements. However, there are just as many that suit a novice cook.
Anyone with a yen for good food will feel at home here.

       However, as welcoming to culinary professionals and neophytes as the CI site may be, it
is not welcoming to the physically disabled. Text, while readable for the average person, is not
scalable, so there is no way to increase magnification in areas that may be unclear. Some images
and links are labeled with Alt tags; some are not. Ironically, most of those that are labeled, such
as the “JOIN OUR WEBSITE NOW” link on the Home Page, bear the tag “recipe.” It is not a recipe,
and neither is the picture of the Showtime® Rotisserie featured on the same page, but a user of a
text-based or audio browser might think so.

       Another disadvantage this site holds for the disabled is its extensive use of hyperlinks.
Not only are they inadequately labeled, as mentioned above, but also for users with arthritis or
carpel tunnel syndrome, lots of clicking with a mouse may be painful or impossible. On the plus
side, these links do require only single clicks and most are large enough to be accessed by those
with limited dexterity.

       These lapses were likely unintentional. CI’s founder, Christopher Kimball probably does
not believe that only perfect specimens of humanity cook, but until they correct their
accessibility issues, those with physical impairments will be unable to access the site effectively.

       In response to user complaints, the CI site has vastly improved its search capability
recently. While it was always simple to navigate from page to page, browsing for what I needed,
the search engine was pathetic. I use this site 3-4 times a week for recipe ideas, and some of the
search results I have relieved are ridiculous. However, now when I search for an ingredient such
as “chicken thighs” I get recipes containing that ingredient, not a link asking me: “Did you mean:
troughs.” I tried to stump the search engine with its perennial nemesis “oyster sauce,” but even
that query generated the desired results.

ADA Compliance

The CI site is not obligated to be ADA compliant, as it is not a Federal agency, nor does it
receive any Federal money, such as grants. I ran several pages from the site through the
Bobby/WebXACT online service, which located a slew of accessibility errors. Not surprisingly,
given its complexity, the home page generated the most errors and warnings, including:

        Priority One Checkpoint Errors and Warnings
            Provide alternative text for all images (31 errors)
            Provide alternative text for all image-type buttons in forms (2 errors)
            Provide alternative text for all images map hot-spot (AREAs) (21 errors)
            If the submit button is used as an image map, use separate buttons for each active
              region (2 warnings)
            If an image conveys important information beyond what is in its alternative text,
              provide an extended description (37 warnings)
            If you use color to convey information, make sure the information is also
              represented another way (86 warnings)
            If this is a data table (not used for layout only), identify headers for the table rows
              and columns (14 warnings)
            If a table has two or more rows or columns that serve as headers, use structural
              markup to identify their hierarchy and relationship (32 warnings)
            Make sure pages are still usable if programmatic objects do not function (1
            Provide accessible alternatives to the information in scripts, applets, or objects (1

        Priority Two Checkpoint Errors and Warnings
            Use relative sizing and positioning, rather than absolute (33 errors)
            Explicitly associate form controls and their labels with the LABEL element (6
            Create link phrases that make sense when read out of context (15 errors)
            Do not use the same link phrase more than once when the links point to different
              URLs (6 errors)
            Check that the foreground and background colors contrast sufficiently with each
              other (86 warnings)
            If this is a data table (not used for layout only), provide a caption (32 warnings)
            If this .gif image is animated, make sure it does not contain fast or distracting
              motion (34 warnings)
            Make sure that all elements that have their own interface are operable without a
              mouse (1 warning)
              Inform the user that clicking on certain links or areas of a window will open pop-
                up windows or change the active window (2 warnings)
              If scripts create pop-up windows or change the active window, make sure that the
                user is aware this is happening (1 warning)
              Avoid use of obsolete language features if possible (38 warnings)
              Consider grouping long lists of selections into a hierarchy (1 warning)
              If there are logical groupings of form controls, use FIELDSET with LEGEND on
                each group (3 warnings)

          Priority Three Checkpoint Errors and Warnings
              Client-side image map contains a link not presented elsewhere on the page (7
              Identify the language of the text (1 error)
              Provide a summary for tables (32 errors)
              Include default, place-holding characters in edit boxes and text areas (4 errors)
              Separate adjacent links with more than white space (21 errors)
(Bobby/WebXACT online compliance test, 2005)

        The errors and warnings for the other pages were similar to those listed above; there were
simply fewer of them.

        I think it would be difficult to catch many of the flaws noted by the Bobby/Watchfire
program without its help. Some, such as the use of alternative text are obvious – if you are the
programmer, you know whether you used it or not – but it would be easy to omit other, more
obscure items, like the use of placeholders. I also found it confusing that many of the warnings
were simply things to consider that might not apply to this site. For example, I spent several
minutes looking for the 34 animated .gifs before I realized that the service was merely telling me
that if the .gif was animated, then something needed to be done. Bobby/Watchfire is a good
service, but clarity is not its strong suit.

        If were my site, I probably would not make too many
changes, the Bobby/Watchfire report notwithstanding. I would correct the instances in which
alternative text is needed and move to a scalable font, but the other warnings seem excessive.
       I believe that most users of the site can access it in its current format, but I also maintain
that, with a few modifications, the site could have a broader audience. And, is that not what
every business wants? Given that CI’s subject matter, and the way in which that material is
presented, appeals to a wide range of people, I think it is wrong to be exclusionary when the
necessary adjustments are relatively minor.

Bobby/WebXACT online compliance test (2005). Retrieved April 18, 2005 from

Cooks' illustrated: About us. (2005). Retrieved April 16, 2005 from

Cooks' illustrated: FAQ. Retrieved April 16, 2005 from

National Institute on Aging & The National Library of Medicine. (2002). Making your web site

    senior friendly. Retrieved April 18, 2005 from

Stauffer, T. (2003). Absolute beginner's guide to creating web pages (2nd ed.). Indianapolis:

    Que Publishing.

Shared By: