On the Floor

Life in the web game is a lot like Law & Order.  Like the criminal justice system, the world of web development is split between two separate yet equally important groups: the designers who create the look and feel of a website, and the programmers who make it work.  Actually, that's pretty much the only way it's like Law & Order.

As a web developer I've worked with a number of designers on dozens of websites.  Some designers, like my colleagues at factor[e], are experienced in providing everything I need to turn a design into a functioning website.

However, as the popularity of the web grows and the design industry shifts jobs from the print department to the web department, a lot of designers may find themselves in over their heads as they make the switch from print to interactive design.

This can be frustrating for members of both camps.  Programmers get annoyed when they receive a mockup that leaves a lot of its intention unclear or suggests functionality that doesn't exist or is needlessly complicated.  Designers get annoyed when they see their original vision destroyed by the harsh realities of browser compatibility, differing resolutions, and web-only fonts.

In the interest of improving designer-developer relations and improving the quality of websites all around, I'm going to address a couple mistakes that I frequently see coming from less-experienced web designers.

Your designs are so edgy!

The number one issue I see with designers making the switch from print to web is having an 'edge' to their page.

Unlike with print, you are designing for a page whose size you don't know.  "8 by 11 full bleed" is a fairly simple instruction, but when it comes to web design things get a little more complicated.  Your potential users are running a variety of resolutions on a variety of different monitors.  Some are widescreen, some are full screen, some are big, some are small.  Some are handheld and some are projected on to a wall in a board room.

The background image you selected might just fit perfectly on your 960 pixel wide Photoshop file, but when it's uploaded to the web it will be viewed by people using resolutions much higher than that, and it will look sloppy on their screen.  (A quick aside, you should always use pixels as a measurement when you're designing for web.  There are no inches on the Internet - except for the ones promised in your spam folder).

Luckily, there are a few easy solutions to this problem.  One popular method is to fade the left and right edges of your background picture into a solid colour.  This is a good approach if your background image is a single image and not a pattern.

Another trick is to simply use a background image that can be repeated indefinitely like a pattern or a gradient.  You can even just use a solid colour background - like just using white for something elegant.  It's simple and effective.

Two examples of backgrounds - one a gradient, the other a repeating pattern - on sites we designed.

To sum up: the important thing is to consider what's going to happen with your site when someone resizes the browser window well beyond the defined edges of your Photoshop file.

Dealing with Dynamic Content

It's been said (by me) that web designers live in a fantasy world where every asset has been uploaded, every user-provided image is the same aspect ratio, and all content magically fits into the space provided. 

When you're building a website that has dynamic or user-generated content, this is never, ever the case.  Ever.  That's why it's important to provide alternatives for when assets are omitted, or when they run long or short.

A good example of this is the big question mark image that shows up if you haven't uploaded a profile picture on Facebook.  In any place where you expect a user to provide an image, you should provide a placeholder alternative as well.  A good way to do this is to put it on a separate layer (or layer set) and hide it.  (And while we're on the topic of layers and layer sets, I can't stress this enough: name them!  You might know exactly what Layer 132 is supposed to be, but the programmer that's slicing your file has no idea.)

Another important thing to note when designing a website with dynamic or user-generated content is that you have little control over the amount of content a user is going to provide on a given page.  If you have a design that only works when the content container is a certain height, you can pretty much guarantee that the user or client is planning on entering War and Peace on one of their pages.

A lot of designers that are new to the web game will overlook this issue during the design phase and then try to correct for it by adding interior scroll bars to the content area after the fact.  Interior scroll bars (pictured below) are not only woefully out of style, they're also a usability problem because they require the user to place their cursor inside the (often small) content area before their scroll-wheel will work.

Interior scrollbar example on a site we did not design.

During the design process, it's important to keep in mind that your website will have some very short pages, some very long pages, and some very medium-length pages.  If the design only fits for a certain number of paragraphs, you need to go back and make some changes.

The problems I've outlined above are only the tip of the iceberg when it comes to Internet idiosyncrasies, but they are also probably the easiest to remember and rectify.  Ultimately, we've found that it's best to address potential problems with a site during the design phase.  A great way to ensure disappointment is to consider your design complete without running it by your programmer first to hammer out any issues.

I realize this article places a lot of responsibility on designers, so stay tuned for our design department's response!