Friday, June 22, 2007

Hating on wannabe web designers

This is not my usually fare, but I can't stand it anymore! Just because you're a designer, doesn't mean you're a web designer. The web lives by different rules ... So follow them, dammit!

Dimensions aren't fixed
In the print world, once your width and height are set, that's it, they're not changing. You can do cool things like bleeding off the edge. On the web, the dimensions change more often than the court's decision on Paris Hilton. Users can have multiple screen resolutions, and top of that, users can choose to resize their browser any which way they please.

What does that mean for you? It means to stop thinking your Photoshop canvas is the end all and be all of what the end users will see.

No fixed height
Stop cramming text into three-column formats, or placing scrollbars within your PSD. just stop it! Stop adding elements (like footers, or photography) that bleed off the bottom of your canvas. Just stop it! Web browsers do something spectacular when the height of a webpage exceeds the height of the browser: They automatically add a vertical scrollbar! It's okay to have a tall webpage. Really. That's why most mouses have a scrollwheel. Your design should just have one column for navigation, and one column for text.

Two options for width
Websites can either be fixed width, or variable width. Check out my blog, for example. If you resize your browser window, making it smaller, you will see the body text re-rag so that it still fits on the page. the overflow pushes downward. An example of a fixed-width layout, on the other hand, is http://www.yahoo.ca. If you resize your browser window on that site, the width stays exactly the same, but stays centered on-screen.

Think about the needs of the website you are designing. If there's a lot of content, or large data tables, or a need for content to appear in columns, then you should design your site with the foresight of certain elements expanding/contracting as the browser resizes. If there are design elements that span the width of your layout, or if there isn't much content from page-to-page, then you should stick to a fixed width approach.

Raster based, not Vector based
I've come across many a designer that has supplied me with designs in Adobe Illustrator. These people are stupid. Don't be stupid! The web is completely raster based. Well, unless you count Flash ... if you want to design for Flash in Illustrator, that's fine. But if you want a design I can use, build it in Photoshop, dammit!

The bonus for anyone that usually works at 300DPI: Screen resolution is only 72DPI. Web PSDs usually range in the 5-10MB range. Having a PSD with any higher res is a waste of time. My time. In fact, Adobe Imageready automatically opens files at 72DPI.


Bandwidth

Even with a high speed internet connection, sites can load slowly if they are poorly designed. Too many images can make surfing a website turn into a real pain in the butt. Too much waiting, and your visitors are likely to abort mission and head somewhere else.

What is ideal is to cut a design into a few small images, and then use HTML to position those images on the page. This becomes impossible if you:
  • Add a complex, textured background that doesn't tile
  • Add a graphic, with body text that rags tightly around it
  • Use gratuitous amounts of rounded corners
  • Use gratuitous amounts of shadows
  • Use gratuitous amounts of gradients
  • Use fancy fonts everywhere
Regarding Transparency
Until Internet Explorer 6 dies (currently, it still owns 50-60% of the browser market), web transparency is difficult. Why? Because IE6 does not display transparent PNGs properly. Before the PNG file format was supported in web browsers, the only option available is a transparent GIF. The problem with GIF is that it's only 8-bit (i.e. 256 colours), and there's only one colour transparency. You want to make anything with curves transparent? Forget about it!

So please keep this in mind, people! No, you cannot have a wacky tiling background, and then border your content with a translucent drop shadow!

Web Accessibility
The beautiful thing about the web is that it can be restyled to fit different users' needs. If someone has vision problems, they can make the font size bigger. If they are blind, there are screen readers that can take the text on your site and read it out loud.

Wannabe designers tend to over stylize everything, from page titles to photo captions, to navigation elements. When you use things like fancy, non-web friendly fonts, then I'm forced to convert your text into an image. When that happens, screen readers can no longer read the text. All the screen reader will find are images. Also, web browsers can't enlarge the text that's in an image.

In Closing
If you're are a wannabe web designer, you need to go to web development boot camp. Stop making my life harder. If you do, make sure to watch for flying right hooks to your face and/or kicks to the groin.

1 comment:

Rubex Cube said...

Wow I actually understood the crap that was coming out of your month! I love school and web design!