Please don’t hate me for calling these folks out. There is nothing inherently bad about their sites. However, the layots & graphic elements are becoming all too common from one site to the next. These are all well put together examples, and to someone who doesn’t read 30 design blogs everyday, they look pretty darn good. But are they worthy of being showcased for their individuality? Probably not.

“3 bar” layout

Here are 5 sites with the “3 bar” layout – a top nav with a logo, a middle bar with headline content and main content below that. Usually the top nav is in a dark grey, the middle is a bright blue or green and the bottom is a light color.

http://www.solidshops.com/ – This layout has become ubiquitous with web apps. I could have filled 5 blog posts with web apps that use this style and layout. It looks clean and professional, but gets an F for layout originality.

http://niagakit.com/ – Same as above.

?http://www.proudcloud.net/

http://www.yaronschoen.com/ – At least the illustrations and breaking of the grid make up for the standard layout used.

http://www.nabru.co.uk/ – Again, it looks clean and professional and the elements add a more organic feel, but the layout is still too out-of-the-box for me.

Here is where to go to learn how to do this effect:

PSD Tuts+ – How to design a family of websites

And, here is how to do it right:

http://madebygiant.com/ – Giant Creative has taken this layot and made it their own simply by making their navigation “talk”. The bright colors contrast with the neutral background. The superb typography makes the design shine.

http://www.stanleysolutions.in/ – This site is broken into those same 3 visual sections, but the diagonal lines on the center text box as well as the lack of line dividing the nav and the feature area make this site own its design.

The pinking shear effect.

I like textured edges as much as the next guy. Heck, I probably like sewing and handmade edges more than the next guy. But it has become an over-used design trend. Evidence below:

https://epicevent.com.au/ – To me this site is overdone and Photoshop heavy. The overall effect is nice, but there is just one too many effects here.

http://www.stthomasartgallery.org/ – You cannot take pinking shears to wood. The zig-zag line makes little to no sense here. No background behind the nav and darker text would have made more sense.

Culinary Culture

http://www.culinaryculture.com/- This one has me on cute overload. This is another case where someone needed to turn off 30% of the Photoshop effects. It isn’t bad, but it isn’t terribly awesome either.

Here is where to go to learn how to do this effect:

Grafpedia – Design a unique WordPress theme

Grafpedia – Gritty website design

And here is how to do it right:

http://analog.coop/ – The effect is used sparingly. And tastefully. It adds to the design without being an over-powering element.

In conclusion, the web design world is slowly being over taken by what is “trendy”. And, yes, it can still be good design even if it is “trendy”. What you want is a site that acknowledges the trends in the industry and then takes them and makes them their own, instead of letting the trends take control.

That being said, all of the websites here are designed well (I don’t like ugly websites, and don’t want to call out people for having terrible skills, just doing what is “trendy” or “typical”), some are just more original than others. These sites were all put together by designers with tremendous skill. Some are just a little too attached to the bandwagon.

Our favorite jQuery techniques/plugins to enhance your CSS are:

Rounded Corners Don’t you hate it when your corners aren’t rounded in every browser? Or having to use some image based hack to get it just right? This jQuery plugin will fix that for you. Any browser that doesn’t support rounded corners natively will display your corners just how you intended.
Equal Height Columns Sometimes CSS just isn’t enough, and this little script will help you overcome the hurdles that CSS leaves.
Selector Styling Select menus are ugly, and really, they have no alibi, at least not any more. This plugin utilizes the jQuery UI to fix some really ugly HTML elements.

Better tooltips with CSS this tooltip tutorial walks you through better tooltips and creating them with CSS.

Pretty checkboxes and more pretty checkboxes and radio buttons We all know checkboxes look better on a Mac than on a PC. This script changes that. It lets you change yet another one of those ugly default parts of the web with jQuery.
Targeting advanced elements One of the best parts of jQuery is its ability to use advanced selectors, and this indepth guide will explain it to you better than I ever could.
Make an entire div a clickable link This little jQuery plugin will allow you to set a rollover effect and a link on an entire div all while letting your code validate. C’est super chouette!
Super Selector Support from the plugin’s site “In the course of a recent project, I used jQuery to add a first-child class to some <li> elements in our top navigation, to shore up IE6 CSS support without having to alter the markup. After seeing how easy jQuery made that, I realized it’s be possible to write a plugin allowing any browser supported by jQuery capable of supporting all CSS 2.1 selectors. So I wrote SuperSelectors. It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.” Ah, thank you!
Better current field highlighting Yes, you can create some field highlighting with CSS, but this technique from Chris Coyier over at CSS tricks is a great way to enhance the usability of your forms.

Some helpful resources are:

• jQuery for Designers
• Learning jQuery
• Noupe

This week we will be discussing some popular text replacement libraries and their limitations and potentials.

1. sIFR
   sIFR is one of the original font replacement techniques, and is one of the most complicated. It involves saving a flash movie with your font in order to allow the glyphs to be displayed when called for by your site. This site currently uses sIFR. The official sIFR 3 Beta site has examples you can take a look at. (I don’t think they play too nice with internet explorer, and since that is what is on my loaner computer…) And, as they themselves say, this is an OK solution for now, but not the answer for the next 20 years.
2. FLIR
   Facelift is a little different than sIFR. It does not require Flash to run, so there is wider browser support for this option. You can style the text just about any way you would like. However, there are drawbacks here as well. If the user has images disabled, they will not see the pretty text. It does support links and will change colors on hover.
3. Cufón
   This javascript library is quite promising. No images or Flash required to make the font replacement work. Hover has to be enable specifically for elements on which it is needed and Cufón replaced text is not selectable. But for a highly simple and easy to configure solution, this is a definitely an option to consider.
4. typeface.js
   This javascript library is infact quite similar to Cufón, it allows for a little bit easier uploading, hoever it only accepts TrueType fonts. Typeface.js allows use of a greater range of CSS selectors than Cufón, but it is a little larger, and the spacing out of the box is a little bit off (although that can be fixed with a little bit of CSS magic). Typeface.js also provides you with selectable text.
5. Typeselect
   This was originally built on the typeface.js library before typeface.js added selectable type as a way to make the type selectable. However, it is a strong solution in its own right. It uses jQuery (which means it will play nice with what I build) but there is currently no suport for :hover or line breaks. This is a promising library that I intend to follow until either they get the kinks worked out, or all browsers on all computers support @font-face.
6. @font-face
   The holy grail of font replacement. What we have all been waiting for. The CSS3 specification that allows us to use our fonts without having to worry about sacrificing accessibility, design or functionality. The support is coming. Webkit browsers support it (Safari and Chrome). So does Firefox (as of 3.1). And, heck, even IE does. The specifications are not yet final, so your CSS might not validate, but you can start including it in your work. (And here is an article on how to make @font-face work with Cufon so the js only gets executed if the user has a browser that is incompatible with the CSS property. Nifty, eh?)
7. HTML/CSS/IMG Phark Method
   What most of us do (or should be doing). Using a background image for a header with the text displayed at -9999px (although I think I read that this could do bad things to your Google Page Rank and that you would be better off with an image and alt text for SEO, but this is better from a usability standpoint)

Want to know if you can embed that font? For sIFR you can use any font that you can embed in a PDF or Flash file. For the others you need to make sure your license allows the use. FontSquirrel has a nice list of @font-face ready fonts (for free) that can be used with any of the above methods.

(Image credit sindesign)

1. Tables are evil and should never be used.

Tables are one of the most vilified aspects of HTML. While for quite some time they were over used and abused, they do have a place in modern, semantic web design. Gasp! It’s true. Tables deserve to be used! But, they deserve to be used correctly and responsibly. Tables are meant to hold tabular data, go figure. Your site will indeed be XHTML/HTML compliant, even if you use a Strict doctype and tables. Because you used them properly.

2. IE6 doesn’t work with transparent PNGs

I know there are a million IE hacks to make the PNG files that you made in Photoshop work with IE6. But did you know that you don’t need that fancy workaround? What doesn’t work in IE6 is PNG24. But I am guessing that you didn’t know that PNG8 supports Alpha transparency. It is Photoshop that doesn’t support the Alpha transparency in PNG8. What is a designer to do? Make their transparent PNGs in Fireworks! You can make your PNG8s have Alpha transparency. No hacks required to make them transparent in IE6! Which is good, because as much as I hate it and do not support it in my work without additional charges anymore, it is around. And it always comes back to bite you when you least expect it.

3. Flash is not SEO compliant.

Ok, so this is an iffy one. Flash is definitely not accessible to screen readers, and to be 508 compliant you need a text version of the information on your site. But there is an initiative between Adobe and Google to help search engines crawl all your fancy schmancy Flash designs. So, as I have said before, Flash in small doses is OK. Flash on an enterprise level is OK. I have changed from a Flash hater to ambivalent, but yes, it does (sort of) talk to search engines.

4. Small fonts make your site look “designer”

Please. Don’t. Do. This. Yes, in print, itsy bitsy type makes you look luxe and high class. On the web, your 9px text looks ridiculous on my wide screen. Creating white space shouldn’t be done only by making text smaller. It should be done by creating vertical rhythm and adding enough padding to your text blocks.

5. There is no such thing as good typography on the web without replacing text with images.

Web typography is tough. But we aren’t chained by simply using images any more. There are @font-face and Cufon. There are sIFR and FLIR. Some of these are easier to implement than others. And some of these give you more control than others. But the important thing to remember here is that your line spacing, vertical rhythm and general typography can (and should) be controlled.

I know there are other misconceptions about the web, but these are some of the most pervasive, and I thought it was time to set the record straight.

(Header image credit: Imformatique)