I am available for freelance work - HIRE ME

Defend your Designs Against Unexpected Defaults

posted by Matt Ward on Nov 17, 2009.

Surprisingly, there are a number of websites out there that are subject to being hijacked or broken by unexpected browser defaults. Is your site at risk? Read more about why this happens, and what you can do to defend your sites against it!

How many people remember the early days of the Internet, with the old Netscape Navigator and its ugly system-grey backgrounds and bright blue links? It certainly wasn’t an aesthetic delight and I’m sure it’s the sort of thing that still haunts the nightmares of many veteran designers.

Though I was just in high school then, I was already making a few simple web pages and I clearly remember using the bgcolor property of the <body> tag to change the background of many of my earliest website designs to white (in those dark days before I was introduced to styles). I had no real right to call myself a designer back then, but I knew enough to realize that system-grey was just plain ugly.

Fortunately, somewhere along the line, the browsers got the hint. Today, every major browser that I know of simply defaults to a white background for pages where no background property is set. Not only is this more attractive, it is also makes pages more readable.

Problem solved, right?

In a manner of speaking. However, it seems that this simple fix has given rise to another problem. It seems that many designers have developed a tendency to rely on those defaults – even unintentionally. Everything works just fine, until someone comes along and changes the defaults in their browser. Then strange things can happen to unprotected designs.

Let’s look at an example.

Personally, I work on both a PC and Mac, and my browser of choice on both systems is Firefox. If you select Firefox &rquoa; Preferences (PC: Tools » Options) and click the Content tab, you will see a section Fonts & Colors, as shown here:

Default fonts and colours can be changed

Default fonts and colours can be changed

Clicking the Colors button will bring up a dialogue box showing the browser’s default colours.

Screenshot

Change your default colors

If you click any of the colours, you will notice that you can’t actually select new colours. Try changing your background to lime green or something equally obnoxious and head out to surf the Internet (in a new tab, of course). It shouldn’t take you long to start coming across pages that look something like this:

Screenshot3

The ugly screen

This screenshot is from a site sample site that I designed specifically to illustrate this concept (I’m not one for pointing fingers), and it’s based on a lot of what I’ve seen out there on the web. Not very pretty, I know. You can actually view the sample site here.

Notice how the background on the logo clashes against the unexpected background, where it would normally just blend in. Similarly, the image-based headings are surrounded by that ugly white that marks them clearly as transparent GIFs. Like the links in the menu, they also blend into the background making them almost impossible to read. The page is actually supposed to have a nice white background, like this:

What the page is supposed to look like

What the page is supposed to look like

Unfortunately, the design is built on the assumption that the background will always default to white. However, if the default is changed, the unity of the design is compromised, along with all of the designer’s hard work.

A similar problem can also arise with your text. In the screenshot below, the browser’s default text colour has been changed to red. The effect is not quite so startling as having the entire background colour changed, but it still breaks the unity of the design.

Text colour is also vulnerable to changes

Text colour is also vulnerable to changes

Granted, the majority of surfers are will probably never going to play with their default settings. There are, however, a few reasons why these defaults could be changed.

Kids

My own childhood wasn’t that long ago (I’m only 28), and I remember more than a few occasions where I would sit at the computer, tinkering around with some type of system default – like creating hideous visual combination in Windows 3.1′s system colours. It was actually a very valuable exercise, since it helped me learn my way around an operating system, but I’m sure it drove my parents crazy.

The point is that I am sure I was not all that unique. Kids like to play, and as I designer, I certainly would not want my designs to be unintentionally sabotaged by a bit of innocent, juvenile tinkering.

Customization Fiends

Trust me, there are people out there who love to customize everything. You can also rest assured that many of these same people don’t share your eye for aesthetic beauty. Just look at all the horrible MySpace pages out there, probably created by people who never really grew out of playing with all the settings when they were kids.

Regardless, they pose much the same threat as our overzealous children. In their effort to change every default they can find, these customization fiends can wreak havoc on designs built on system defaults.

Testing

A few months ago, I was working on an online application that required a number of different icons, at a number of different sizes. I even had multiple versions of the same icons with slight variations. In an effort to prevent the redundancy of using a massive library of static icons, I set about writing a little server side script that could tweak and resize a base set of icons and return them as transparent PNGs.

It works like a charm, but as part of my testing I needed to make sure that the transparency was working. So, I changed my default background colour to grey. The testing worked fine, but I didn’t change the colour back right away. It wasn’t long before many of the sites that used to have nice white backgrounds were broken up with grey instead.

These are just a few of the reasons that defaults might get changed. There are bound to be others. The full spectrum of human behaviour is unpredictable at best. Fortunately, the problem of browser defaults its easy to address. Here are a few different things you can do to defend your designs.

Explicit Declaration

The simplest way to protect your designs is to simply declare everything. If you want to use a white background and black text, declare those styles explicitly at the top of your stylesheet instead of relying on the browser defaults. It may sound simple, but it is clearly frequently overlooked. Otherwise, there would not be so many sites breaking because of simple changes to browser defaults.

Modify your Reset Stylesheet

If you don’t want to have to be bothered with making explicit declarations every time you start coding a new site, theme or template, consider using a reset stylesheet. Most of the reset stylesheets that I have seen don’t include declarations to reset the default background and text colours, but all you need to do is add the following code:

body{background-color: #FFFFFF; color: #000000}

I always prefer to use six-character hexadecimal for my colour declarations, but any method of declaring white and black will work just as well.

Even on its own, using a reset stylesheet is an extremely useful tool, and I highly recommend adding this bit of code. Doing so will allow you to design with peace of mind, knowing that your websites are protected against changes in browser defaults.

Background Images

If you are the type of designer who likes to work with highly textured websites, you’re probably not in much danger of having your backgrounds hijacked by unexpected browser defaults. The image(s) that you choose will hide the background colour – whatever it is set to.

Of course, you still need to keep your text in mind. If you are still going to be using black text, make sure to declare it, either explicitly or by using a modified reset stylesheet.

Change your Own Defaults

If you are already part way through a design, or if you’ve inherited a design from someone else, there’s a really easy way to put it to the test. Just change your own browser’s defaults and then browse through your site and look for any oddities that you might find.

When using this method of testing, I recommend selecting extremely loud colours that will really clash with your design. They may not be the nicest to look at, but they will stand out, and that’s really the point. Besides, if your design is air-tight, you shouldn’t see anything anyhow!

We’ve already looked at how to change the defaults in Firefox. Here’s how to do it in some of the other major browsers.

Internet Explorer 7

  • Select Tools » Internet Options from the menu.
  • Select the “General” tab and click the “Colors” button at the bottom of the dialog box.
  • Unclick “Use Windows colors” if it is checked.
  • Then, simply select your colors.

Opera

  • Select Tools » Preferences from the menu.
  • Select the “Web Pages” tab.
  • Select your colours at the bottom of the dialog box.

Safari

This one seems a little bit more complicated. I don’t use Safari for very much other than site testing, but I dug around and it looks like you can set up a default style sheet.

  • Select Safari » Preferences from the menu.
  • Select the “Advanced” tab.
  • Click the drop down style sheet menu.
  • Select “Other” and choose the style sheet that you would like to use.

It seems like a lot of work just to change the defaults, which would probably discourage most people from trying to change them, but the very fact that I found forum posts about how to do this only underscores the importance of protecting your designs. There are people out there trying to change their browser defaults.

I also did a bit of digging around for Google Chrome, but I was unable to find any real way of changing the default colours. If you do know how to do this easily, please feel free to comment and let us know.

Ironically, however, many of the sites that I was poking around trying to find answers about Safari and Chrome suffer from the exact problem that we have been looking at. On at least two of the forums that I visited, all of the text was displayed in the very ugly red that I had selected as my default for testing purposes.

Of course, now you will be able to defend your designs against this. Just beware that you can only ever defend your designs. In most browsers there is actually a setting that actually prevents websites from choosing their own backgrounds or colours at all. In this case, no matter what you declare, your design is going to be severely broken. There’s nothing you can really do about this, other than rest assured that people who have this setting activated will probably be used to hideous looking websites, so your won’t really be all that different.

Still, I hope that this discussion has opened your eyes often overlooked design mishap, and that some of the techniques we looked at will help strengthen your designs and defend them against deviant defaults. What are your thoughts? I would love to hear them!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Leave a Comment

Copyright © Echo Enduring Media 2009-2014