WEB DESIGN FOR BUSINESS WEBSITES
At a minimum, users should see a thumbnailof the product. This does not have to be elaborate.
To avoid forcing users to squint, make sure that
the image is at least 150 pixels wide.
Providing a larger image when the thumbnail is
clicked is almost always a good idea. This
higher-resolution version should appear in a
new browser window, not because this
constitutes better usability which it really doesn’t,
but because people expect and accept this
functionality that has been perpetuated by
thousands of websites. This window can be
loaded several different ways:
1.The simplest method involves adding the targetattribute to the anchor tag, such as
<a href="/images/tractor-engine_large.jpg" title="View a higher resolution
photo" target="_blank"><img src="/images/tractor-engine_thumbnail.jpg
alt="tractor engine" /></a>. This technique avoids JavaScript, which might be
disabled; the disadvantage is that the targetattribute is deprecated in XHTML 1.0
and beyond, and if included, will prevent the page’s markup from passing the W3C
validator.
2.To open a new window while keeping the page valid, many developers use
JavaScript. A basic version would look like this: <a href="/images/tractor-engine_
large.jpg" onclick="window.open(this.href); return false;"><img
src="/images/tractor-engine_thumbnail.jpg" alt="tractor engine" /></a>.
3.The previous JavaScript examples only load the images in a new window, but the
language also has the power to dictate the design of the browser window, such as
the width and height, whether the navigation items are visible, and whether the
window is resizable. Building off the previous example, a simple version might look
like <a href="/images/tractor-engine_large.jpg" onclick="window.open
(this.href, 'popupwindow', 'width=300,height=400,scrollbars,resizable');
return false;" ><img src="/images/tractor-engine_thumbnail.jpg
alt="tractor engine" /></a>.
4.There are also many external scripts that handle this functionality as well. Roger
Johansson, author of the web design site 456 Berea Street, wrote a simple script
that loads any link with a rel="external"attribute in a new window, relegating the
behavior to an external file.
1
Lightbox, another good option covered later, is a
piece of JavaScript that loads images into a <div>that overlaps the main page. Both
ofthese prevent the JavaScript from being embedded in the HTML, so the page size
is kept small and the HTML remains semantically strong.
Generally, opening links in new windows is regarded as bad usability and accessibility practice, but in this case, users expect a thumbnail to open a new window with a larger image.
The one and only concrete rule about this entire discussion is to nevermake a thumbnail
link to an image that is not bigger. If a higher-resolution version with increased detail is
unavailable, do not link the thumbnail.