Those of you who may have read my 25 Dark Websites and 25 Creative Footers posts may be noticing a pattern developing here. I’ve decided to do my best to stick with the whole 25 theme for these roundup articles. It’s just a nice, round manageable number, but still enough to prove valuable. I have a wide range of different ideas for these roundups, too, so be on the look out for more coming your way.

I’ve also been doing some thinking about roundups in general. I’ve seen several different posts just this past week that are complaining about how the authors’ RSS readers are getting crammed with all kinds of roundup posts – so much so that it’s getting difficult to find other, valuable content.

I guess I hadn’t really thought of that before. Most of the stuff in my reader is actually tutorial and/or freebie oriented. I see most of the roundups I visit via Twitter. Still, I certainly don’t want to be viewed as clutter, so I’m going to do my best to add extra value to these roundups with a bit of extra editorializing!

Anyhow, today I want to look at a trend that I’ve been noticing in my frequent visits to various CSS galleries. It seems that on almost every page of these galleries I see sites that are designed around green and grassy imagery. Obviously, such sites don’t actually appear on every page, but there certainly are a lot of them! They tend fall into one of two categories. Either they use a ground level view of grass as a sort of horizontal divider or feature lush rolling hills – usually vectorized and cartoony.

Here are 25 different examples of this trend.

Anna Pawelczyk

Blogsville 2009

RIPIE

TwittGround

New House Farm

Ten24Media

Acroex

BimbiSicuramente

Blossom Village Resort

CampamentoUniversiatrio

Clark Studios

Dean Oakley

Foot Steps

GeoVision

Guga

HearthCore

Jaider Morais

Juan Diego Velasco

KiddiKicks

Mint

Parcheggio

Riegos Ariel

Slim Kiwi

SPAFU Online Marketing

Yodaa

These sites come in varying degrees of effectiveness, and I am in no way trying to suggest that these are great or sensational designs (though I did weed out some of the weaker designs – pun intended). I am also not saying that they any of them are poor. This is simply a showcase. However, this collection certainly demonstrates that there is a very strong trend towards using these this kind of imagery in web design. And there are many different types of sites represented, suggesting that it is not just one particular group or industry that’s latching on to this trend.

You make also notice that these elements all tend to work pretty much the same way. The grass stretches horizontally across the screen, creating a clear and logical divider. Most of the sites listed here actually take advantage of this, using the natural break as a means of organizing their content in some form or other. It’s an interesting technique that many of these sites actually implement quite well.

Now, before you get too inspired and run off to throw a grassy divider into your next website design, let’s take a moment to think about some of the advantages and disadvantages of using this kind of imagery.

Advantages

• Position yourself as Green – The entire concept of the environment and climate change is a huge deal these days. Many people are thinking and talking about it, and this use of nice, green grass very naturally posits your site as being “green”.
• Natural Divider – We’ve already touched on the fact that that this design technique provides you with a very obvious horizontal break, which you can use to organize your content
• Open and Friendly – Grass can suggest friendliness and openness – a sort of neighborly camaraderie – and could be a useful visual element if this is the kind of image you want associated with your site or brand.

Disadvantages

• Position yourself as Green – Wait, didn’t we just mention this as an advantage? We did indeed, and while it can be beneficial, it can also work against you. Many environmentally conscious people are also very aware of what companies are doing, or not doing, and can have very strong backlash against those who try to make themselves look “green” without taking any actual steps or initiatives to helping the environment or slowing climate change. Beware of the backlash that can come from this kind of “greenwashing”, even if it’s unintentional.
• A Tired Concept? – This post alone collects 25 grassy sites, and I had several most listed when I was doing my research. I’m sure there are more than that, too. So, I think it’s pretty safe to say that this kind of imagery is pretty common out there on the web these days. As such, unless it is a perfect fit for your site, you may want to think twice about following this particular trend.
• Wrong Visual Cue? – Another possible disadvantage with this trend could be the strong associations that grass can convey. Will visitors immediately assume that the site has something to do with grass itself – perhaps a seed or fertilizer company? As designers, we always (or at least almost always) want viewers to look at something and get it right away, not have to puzzle it out on their own. If using grass (or any other design element) will obscure meaning rather than reveal it, then it’s probably not the right choice

Obviously, this is just a really cursory look at the trend of using green and grassy designs on the web, but I hope that it has been at least somewhat insightful and/or inspiring for you.

I’d love to hear you opinions! Have you ever used grass as a design element? Are there any other sites that you would like to add to this list? Are there any other advantages or disadvantages that strike you? We’d love to hear them, so feel free to drop a comment!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

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

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

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:

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

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

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!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

The 960 Grid System is a great development tool for web designers. It’s so great, in fact, that I wanted to share it with anyone who might not have heard of it

The system is pretty much entirely based on a single style sheet that, when linked to your documents, creates a simple and user friendly grid-based framework for developing your site. You then use a series of classes to establish a direct link from your content to the style sheet. The grid system takes care of all the rest.

The 960 Grid System Website

As the name would imply, the system works on a base of 960 total pixels, which is subdivided into either a 12 or 16 column layout. With the 12 column layout, each column measures precisely 60px in width. With the 16 column layout, the columns measure 40px. In both cases, columns are separated by a 10px margin.

Of course, you would never actually want to display 12 or 16 columns, so the system is designed to allow you to establish how many columns you want a particular element to take up. For instance, if you were using the 12 column layout and designing a page where you want to display a primary content area and a sidebar, you could use one area that stretched over 8 columns and another that would stretch over 4. Or you could have three equal areas of 4 columns each. As long as the number of columns add up to 12, they will automatically fall into the grid beside each other.

That’s pretty sweet.

But why 960 pixels? Is that just some random, cool sounding number? Not at all. In fact, 960 is a very special number, a fact which is supported by some simple math. This blurb from the 960 website gives a pretty simple explanation:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

There you have it. It’s a nice even number, which happens to fit the proportions of most modern browsers and which can be divided every which way.

So what’s the advantage of the 960 system? Well first, and foremost, it allows for rapid prototyping. Link the style sheet to a simple HTML document with some placeholder text and add a few key class names and bingo, you have a simple wireframe layout that you can present to clients as part of an early stage proposal.

After your proposal, you also have the starting point for your design too, which can help keep you on track. Plus, when you consider that the 960 website has design templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGaffle, Photoshop, Visio and Expression Design, chances are there is a template to match whatever design environment you favour.

Above all, though, it simplifies the development process, so that you don’t need to spend time coding styles for basic layout elements. This is especially valuable if you are just starting out in CSS, or are making the transition from the old-school table-based layouts that still permeate much of the internet (if you are still using tables, please consider this your enlightenment).

The 960 Grid System also has the added benefit of predictability. The style sheet is pre-coded and tested, so you know exactly what you are going to get – even more so after having designed a few sites this way. And, as any experienced developer would tell you, there is an almost immeasurable value to predictability in any system. For this reason alone, I would recommend at least trying the 960 Grid System.

Lastly, don’t think the system will in any way inhibit your creativity. All of these sites have been designed with the 960 Grid System!

GoBible Website

Tapbots Website

Avalonstar Website (new version is totally different)

As you can see, while they all use the same basic grid system, they are all also very different. When it comes right down to it, the grid itself is just a tool, a way to give your site some basic shape and form in the context of HTML and CSS. Beyond that, what you do is entirely up to you!

In case you’re wondering, as of the date of this posting, Echo Enduring Media and the Echo Enduring Blog do not use the 960 Grid System, but that may change when I eventually get around to doing a redesign of the sites. Not that I have plans to change anything major here anytime soon. I have too many other projects to get caught up on!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd