Don’t look like a newbie: Avoid these common web design mistakes

Web design carries with it certain challenges that don’t exist in print design. Perhaps the most obvious is that in print design, whether you print your own work or have it printed by a professional, you know what your work is going to look like before your customer sees it.

Web designers don’t have this luxury. There’s always the chance that something, or maybe many things, won’t look or behave the same from browser to browser and from operating system to operating system. It’s easy to make mistakes that can make your website appear strange or annoying to a lot of website visitors.

In this article I’ll take a look at what I feel are some of the more common mistakes that web designers make, and how to avoid them.

Resolution mistakes

Design mistakes related to screen resolution limitations are quite common. Those of us who work with computers on a daily basis, and particularly those of us who design graphics, tend to have the newest, largest displays. It’s easy to forget that the typical website user will likely have a smaller, lower-quality display.

For example, Apple’s new 27” iMac has a display resolution of 2560 by 1440 pixels. However, according to W3Counter.com, which tracks website and browser statistics, the typical display in September of 2009 is only 1024 by 768 pixels. If you were to design your site for a width of 2560 pixels, only 1024 of those pixels would appear on a typical monitor. Seeing the rest of the website would require scrolling from left to right while viewing the site, which is hardly practical for most users. (This was an extreme example, but you get my point.)

If you were to instead design for a width of 1024 pixels, users on a 2560 pixel display would still be able to view your site, they would just get extra white space on one or both sides. The extra white space is a far more acceptable solution than requiring readers to scroll their browser from left to right.


Above: Royal Pingdom’s 1024 resolution website, as viewed on my iMac.

Sound mistakes

Creating a website with auto-loading sound, such as background music, is probably the quickest way there is to get your viewers to click the back button.

Not many of us share the same taste in music even with our families, let alone the strangers who will visit our websites. Expecting visitors to enjoy your taste in music is usually too much to ask. Even verbal announcements can be annoying, particularly if they’re unexpected. For these reasons, it’s a good idea to make any audio on your website an option activated by a user clicking a hyperlink.

Graphics mistakes

Even if you’re using the most recent (and most expensive) version of Photoshop, bad graphic design and image handling can still impact your website in a number of ways:

Compression mistakes

A mistake I often see is improperly compressed graphics. Most high color images, such as photos, don’t have to be compressed using your graphics editor’s best compression settings. In particular, using Photoshop can be an issue here, since its best JPG setting automatically turns off a compression technique called “subsampling”. The subsampling process can usually save quite a bit of file space in an image, without any loss of image quality.

An exception to this rule is images containing sharp edges, such as text or lines. These images can develop artifacts from subsampling. Adobe considers the issue of when subsampling is turned on or off to be a trade secret, the only way to ensure that it’s turned off in Photoshop is to use the best JPG compression setting. Some other image editors, such as Ulead PhotoImpact, use separate subsampling and quality controls, so that the issue isn’t forced upon users.

Image dimension mistakes

Another common mistake is the use of excessively large images. No one really wants to sit in front of a computer waiting for an image to load. Using your graphics editor’s slicing feature can help you break a large image into several smaller images. Although the load time is still about the same, the chain of small images loading into your browser occupies your viewer’s attention, making the site appear to load faster.

GIF vs. PNG

The GIF versus PNG issue is still a concern for some web designers, but I feel that PNG is finally supported across enough browsers to make it the better choice for low color images (such as buttons and bullets).

If you’re still more comfortable with GIF, make sure to design your GIFs on the same color background as your website. This will avoid the appearance of rough edges in your image, caused by the GIF format not having the ability to gradually blend your image into your web page background. Also, although most graphics editors still support “Web Safe” colors for GIFs and PNGs, this option should be avoided entirely. According to W3Schools.com, only 1% of web users were still using “Web Safe” (256 color) displays as of January, 2009.

The 10% Rule

This all leads to a question that’s sparked a great deal of debate among web designers: Since you can’t design for 100% of the public, who do you leave out? For example, should you still use Web Safe colors so that 100% of your potential viewers will have color compatibility? No, since the other 99% will see poor color quality.

Personally, I use what I call “The 10% Rule”. If 10% or less of my potential viewers will be impacted by a given decision, such as using 1024 by 768 resolution, or not using Web Safe colors, I consider this acceptable. Granted, that’s just one blogger’s opinion on where to “draw the line”, and it depends on what kind of website you’re offering, but stating opinions is one of the purposes of blogging.

Do you have any pet peeves regarding web design that you would like to add?

About the author:
Anthony Celeste is a technical writer, multimedia developer, and Windows programmer. Anthony wrote about color theory and Web design in “Corel DRAW 10: The Official Guide”, and covered animation and special effects in “Ulead PhotoImpact 7: The Official Guide”.

4 comments

  1. Even better than creating a web site that is 1,000 pixels across is creating a web site without spelling out a fixed size, and allowing the design and content to scale to the user’s portal, rather than forcing them to scroll or wasting their screen space with white space.

    I mean, if you’re an excellent web designer. If you’re among the hoi polloi who are feebly trying to extend a concept of print design into the web space then uhm, yeah, stick with wide margins.

    😉

    -danny

  2. Nice article, but I beg to differ with a few points.

    1. Screen resolution. Most folks who have wide monitors don’t have the screens at full size, at least from what I understand. They have large screens so they can have more things open on that real estate. So I don’t think that’s as big an issue as this article makes it.

    2. I don’t know too many professional web designers who embed music on a site unless they are designing for a musician or other music related web site where that might be expected. Even so, most professional web designers recognize that the site’s VIEWER should be in charge of whether or not music should play on page load and leave that decision where it belongs. In the hands of the user. I think anyone who still does this has forfeited any right he or she might have otherwise had to refer to him- or herself as a web designer. At that point they are just another annoying web master.

    3. I very much like your 10% rule and have never seen that concept put so succinctly. Bravo!

  3. I can think of several pet peeves:

    1. Putting time sensitive information on a site without a plan or mechanism to remove it later. Sometimes that content won’t even include a full date/time: “Come attend my event on December 10th!” leaves visitors wondering what year – is it coming up or did I miss it? In general, I hate seeing content past the date the event occurred at all. Ideally, events should be fed from a DB and the site configured to automatically exclude events in the past. Of course, then you might end up with an empty events page, but nothing to me says “I don’t care to keep my site up-to-date” more than content that is clearly out of date. Having text saying “No upcoming events” is fine.

    2. Sites with links to pages that say “coming soon.” I completely understand that it’s hard to get a site together by a certain date no matter how good your efforts, but if you don’t have content, don’t include the link yet. Often these links are never finished, and we come across the site in a search for some specific thing, are excited that the link indicates we should find what we’re looking for, then we click and are greatly disappointed.

    3. Form fields that require things in one specific format only. Even worse are forms that don’t tell you that format until you’ve tried to submit the form. I subscribe to the idea that you should set up your site or software to prevent people from making an error in the first place, rather than having to present them with an error message and hope they figure out how to fix the problem. Normalizing data for storage in a DB makes perfect sense. But regular expressions (GREP) is a powerful tool. I should be able to enter my phone number as 123-456-7890, (123)456-7890, 123 456 7890, 1234567890, etc. and as long as it has enough digits, you should accept it. Your job is to make it as simple as possible for users to complete the process. Not to make them meet your data formatting standards.

    3b. A related issue. If you setup three fields for a phone number and have it move focus from one field to the next automatically – as you should if you’re going to make me enter it like that – be very careful which event you monitor. I’ve had situations where I mistyped a digit in the second field but every time I try to move focus back to it, it puts focus back in the third field because the second field is considered “full.” This means I literally can’t fix my mistake.

Leave a Reply

Comments are moderated and not published in real time. All comments that are not related to the post will be removed.