A Neopian Web Design Treatise: On Images
A MESSY DESK - In the previous
section of my so-called "treatise", I discussed the use of colour and
its corresponding aesthetic and accessibility issues as related to web designing
for Neopia. This one will extend that central theme of making a Web site accessible
to as many people as possible, without having to sacrifice excessively in the
looks department - this time to the use of images and text/typefaces.
Images - Backgrounds
It is easy to come across a picture that looks like it would make a good background
and consequently, use it as such. Coincidentally, it is a lot harder to come
across a picture that will actually make a good background. A good background
is not just one that is attractive and repeats seamlessly, it also has to be
one that does not interfere with text legibility, or draw attention to it that
should instead be focused on the site's content.
That being said, it is generally a bad idea to use backgrounds that have contrasting
light and dark colours, since it is often difficult to find a good "in-between"
text colour. Besides, the changes in background colour will make the text a
lot harder to read. Similarly, it is also obviously a bad idea to have a background
in a similar shade of colour as your text.
A stickier issue on the topic of backgrounds is that of the repeating background.
I am personally not fond of them at all. The human eye is drawn to repetition,
and therefore, a repeating background can distract your visitors from reading
that lovely story on your pet page, or anything else that you may want them
to pay attention to. Considering the number of people that do use repeating
backgrounds though, it is obvious that they do have a certain amount of aesthetic
value. Keep in mind though, that in the majority of places where such a background
can be used, a solidly coloured background will most likely be no less aesthetically
pleasing, and probably more effective.
Needless to say, if a repeated background is distracting, an animated background
is a terrible idea. I have seen it used before, usually by people who think
that it adds a certain environmental aura to their site or lookup. Perhaps it
is for this reason that most of these backgrounds are little blinking stars.
It is a justified move, however, the "environmental aura" does not eclipse the
fact that it is not only often unrealistic, but also gets rather annoying, especially
if the site actually has interesting content. On the other hand, I also know
people who do use garish and plainly hideous repeating, animated backgrounds
despite the fact that I know they know better (yes, this is a very pointed comment).
Like everything else, the use of an animated background is a plausible design
choice, however, I have yet to see it used in a way where it can actually be
called a good one.
Clipart and other fun things
As an extension of the generally accepted background conventions I discussed
earlier - the same applies to other site images, such as clipart, site buttons
and so forth. Animated images are distracting, especially if they are generic
clipart. Generic clipart in itself is well - generic. Design reflects on content,
and if your page, shop or lookup is filled with common and widespread items,
it will be presumed that any content you have is unlikely to be particularly
interesting. To what extent this is true, I do not know, but it is difficult
to deny the psychological impact a site's design can have on its viewer.
Is it necessary?
No site should rely on graphics. This is one of those "set in stone" design
rules that have unfortunately, been forgotten, or intentionally ignored by many,
myself being one of them. It seems to be a very Neopian tendency to clutter
up one's pet page or shop with shop dolls, adoptables or quiz results. Don't
get me wrong, one or two can be cute, and even enhance the personality you project
through your site. But having a shop full of dolls representing you and your
entire classroom of friends, twenty adoptables to represent your pets, their
petpets and respective companions and a number of rectangular squares declaring
that you are a Fire Faerie, the colour Blue, Chet Flash, a clone of Obi Wan
Kenobi and a bent Spork are quite simply - ridiculous. Not to mention that these
items are mostly for your personal enjoyment - the majority of your visitors
will not care at all. They just want to read your pet pages, view your profile
and buy from your shop. Please, make it easier for them.
Matching site colours with images.
Images should always blend as seamlessly as possible into a site design. There
is little less appealing that a site filled with "bordered" .gif images. I'm
referring to the supposed "transparent" images that have borders around them
that clash terribly with the background colours. For instance, a jagged white
bordered .gif image on a dark background. This can and should be avoided as
often as possible - the simple fact is this - some images were meant to be used
on dark backgrounds, some on light ones, and deviating from that intention can
produce some rather anaesthetic results.
Yet another mistake often made is specifying a background image that looks
little like the background colour. For instance, I can set my background colour
to black (#000000) and have a background image that's let's say...shades of
light blue. To complement that, I use black text. Now, then the page is completely
loaded, it looks pretty good. However, if I have a background that takes a while
to load, while the page is loading, the page will have, guess what - black text
on a back background (the page's original background colour). Similarly, a number
of people browse the Internet with images turned off, which is an option in
Once again, considering people with disabilities...
In my last article, I discussed and suggested a number of ways to make your
site as legible and good-looking as possible to people with colour deficiency
problems. Images play by the same rules.
However, what about people who are not just colour blind? How will your images
work in, let's say, a Braille web browser (yes, they exist)? If someone cannot
see the images on your site, how will your site function? For that matter, this
also applies to people who prefer to browse without images. As such, you should
make sure that your web page is fully functional and navigable, even without
any images. Also, even though someone cannot see your images, you can describe
the images to them. This is what the "alt" function that can be used in an image
tag is for. For example : <img src="moopey.jpg" alt="my Sheep of Doom,
Moo"> . For someone who has images (and vision) enabled, the image will
load just fine, presuming that it is linked correctly. For someone who doesn't,
the text description will appear (it will also appear when you hold the mouse
over the image, so it is a good way to include more information about an image).
There are many other aspects of designing for people with disabilities, and
I'm presuming (or at least hoping) that Neopets conforms to them. However, making
sure that your site is not dependent on images or colour is a very good start.
Thus ends another section of my so-called treatise on Neopian web design.
The normal "you don't HAVE to listen to me" disclaimer stands. I know I promised
to cover text and typography as well, but I didn't expect that I had that much
to say about images (and there as far more than this). Please join me next week,
if you found this interesting or helpful - because text and typography really
is quite an interesting topic. Yay.
Next time: A Neopian Web Design Treatise: On Text