<%= "Michael Frederick" -%>

Over time I have seen some pretty awful web designs. Ever see Ron Oslunds website? I may not be a graphic designer, but I know a bad design when I see one. This is a list of some of the web design techniques that annoy me the most. Unfortunately, I have to admit that I have created websites that make some of these mistakes, but in most of those cases I fought against using them and ultimately the decision was out of my hands. Pet peeve: website owner that knows nothing about web development or good standards and ignores the advice of his or her web developer.

1. The CSS overflow:auto property
   This property gives vertical and/or horizontal scrollbars to elements whose contents exceed their dimensions. There should be only one set of scrollbars on your website, and they should only be visible when the content of your site cannot fit within the screen dimensions of the device that is viewing it. Ideally, your site will only have a vertical scrollbar. I can't think of a single case when overflow:auto should be used.
2. Large background images
   The worst example of a large background image would one background image that scales the entire screen. There are a few problems with doing this:

   1. Not all screens have the same aspect ratio. If you scale the image to be 100% width/height of the screen, you will distort it's aspect ratio on some screens. Distorted images == ugly.
   2. In order to support all screens, you need to have an image with very large dimensions (> 2560x1600). That means your image file is going to be at least a few hundred kilobytes large and that will significantly increase the loading times on your site.

   Background images should be small and symmetrical so that they can be repeated. Ideally they will be no larger than a few kilobytes.

3. Using non-symmetrical images as repeatable backgrounds

   This one sort of goes with the one above it. One of the ugliest things you can do is repeat a non-symmetrical images across the background of an element. A lot of people do this on Twitter since Twitter allows users to upload a background image to customize their profile (and the average user wouldn't know how to make a repeatable background image).

4. Replacing text with images of text

   You're kidding, right? I remember when I was working with True Graphic we once got hired to do the web design and development for a landscaping company. Unfortunately it looks like that company went downhill as they are no longer on the web. Anyway, the owner insisted that we use this absurd cursive font for all of the text on the website. ALL of the text. When we explained that the only way to do that would be to save the text as images in photoshop, he didn't care to listen to the downsides of doing that (SEO, user-friendliness, ugliness, etc). So we saved all of the text as images and when we finished the site he asked, "Why doesn't the site track well on Google?" 

5. Overuse of Flash

   Flash content should be kept minimal on a website. It should rarely only be used outside of areas where there is no suitable alternative. Some acceptable forms of Flash include:

   1. Video players. The HTML5 alternatives are pretty young at this stage and for the time being I believe that the flash video players are superior to HTML5 players. I don't expect this to be the case a couple of years from now. Some people might say "what about Silverlight?", to which I say... what about it? It's bad enough that people have to install flash player to access content on too many websites. If I see a dialog that tells me I am missing a Silverlight plugin, chances are I am leaving your website. 
   2. Animations. This is actually the only time that I would ever use the Adobe Flash application. For all other "Flash" needs, Adobe Flex is the way to go in my opinion. I haven't played around too much with animations in HTML5 so I can't speak for them as a suitable alternative to Flash.

   The worst-case Flash usage scenario would be a website that is entirely Flash based. This is yet another great way to never show up on search engines. If, for some reason, you find yourself in a situation where you have to create a chunk of user experience within Flash, make sure to use deep linking so that users can still link to content.

   To be honest with you, I think that Adobe Flex and ActionScript 3.0 are pretty great (yay data binding). If you need a low-cost solution for creating a desktop application that is compatible across operating systems Flex/Air would be my go to. ActionScript does have some annoying issues, but then again so does everything Adobe makes.

6. Scrolling text marquees

   Makes me want to throw up.

7. Blinking text. Actually, blinking anything.

   It hurt me to put this on my website.

8. Auto-playing audio

   I don't care if your Spotify (and if you are, I love you), don't play audio unless I tell you to.

9. Mystery Meat Navigation

   According to wikipedia, "The typical form of MMN is represented by menus composed of unrevealing icons that are replaced with explicative text only when the mouse cursor hovers over them."

   The terminology "mystery meat navigation" is frickin awesome, though.

10. Site counters

    Only 2 types of websites use site counters:

    1. The type where the counter is very low (meaning no one visits the website), and
    2. The type where the counter is very high (meaning the owner started the counter at a very high number and no one has visited the site since).