Synthetic Monitoring

Simulate visitor interaction with your site to monitor the end user experience.

View Product Info

FEATURES

Simulate visitor interaction

Identify bottlenecks and speed up your website.

Learn More

Real User Monitoring

Enhance your site performance with data from actual site visitors

View Product Info

FEATURES

Real user insights in real time

Know how your site or web app is performing with real user insights

Learn More

Infrastructure Monitoring Powered by SolarWinds AppOptics

Instant visibility into servers, virtual hosts, and containerized environments

View Infrastructure Monitoring Info
Comprehensive set of turnkey infrastructure integrations

Including dozens of AWS and Azure services, container orchestrations like Docker and Kubernetes, and more 

Learn More

Application Performance Monitoring Powered by SolarWinds AppOptics

Comprehensive, full-stack visibility, and troubleshooting

View Application Performance Monitoring Info
Complete visibility into application issues

Pinpoint the root cause down to a poor-performing line of code

Learn More

Log Management and Analytics Powered by SolarWinds Loggly

Integrated, cost-effective, hosted, and scalable full-stack, multi-source log management

 View Log Management and Analytics Info
Collect, search, and analyze log data

Quickly jump into the relevant logs to accelerate troubleshooting

Learn More

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”.

Webpages Are Getting Larger Every Year, and Here’s Why it Matters

Last updated: February 29, 2024 Average size of a webpage matters because it [...]

A Beginner’s Guide to Using CDNs

Last updated: February 28, 2024 Websites have become larger and more complex [...]

The Five Most Common HTTP Errors According to Google

Last updated: February 28, 2024 Sometimes when you try to visit a web page, [...]

Page Load Time vs. Response Time – What Is the Difference?

Last updated: February 28, 2024 Page load time and response time are key met [...]

Can gzip Compression Really Improve Web Performance?

Last updated: February 26, 2024 The size of the web is slowly growing. Over [...]

Monitor your website’s uptime and performance

With Pingdom's website monitoring you are always the first to know when your site is in trouble, and as a result you are making the Internet faster and more reliable. Nice, huh?

START YOUR FREE 30-DAY TRIAL

MONITOR YOUR WEB APPLICATION PERFORMANCE

Gain availability and performance insights with Pingdom – a comprehensive web application performance and digital experience monitoring tool.

START YOUR FREE 30-DAY TRIAL
Start monitoring for free