If you find this article helpful, you should share it with your friends on Twitter and Facebook in return.

WordPress 3.0 incorporates quite a few new features, including custom post types, a URL shortener, and a new theme. Though there isn’t as many new features as previous WordPress releases, it is helpful to have a list to aid in exploration of WordPress 3.0 new features. You’ll find plenty of lists like this across the web, not least of which being the official changelog at the WordPress codex. The problem is that most of these lists don’t explain how to use the new features, and many are not self-explanatory or enabled by default. This is my attempt to remedy that. Here’s a list of the top seven most compelling features that could change the way you blog.

1. Built-in WordPress Multiuser (MU)

WordPress 3.0 adapts the ability to manage multiple different blogs from a single installation. Previously, you would have to install the WordPress MU (Multiuser) edition in order to do that. This is what blog services like WordPress.com use to provide and sell their hosting services. Now, instead of only having one blog, you can very easily create a network of thousands of blogs, and manage them all from the same interface.

A quick caution to people who are currently running a WordPress MU install: you want to be careful before you upgrade to 3.0. Use a test site to make sure all of the WPMU plugins work before you put them in production. There’s nothing like a ton of angry clients first thing on a Monday morning from users who can’t access their blog.

The multiuser functionality is disabled by default when you install or update to WordPress 3.0. To enable it, you need to paste this line in wp-config.php, right above where it says /* That's all, stop editing! Happy blogging. */:

define('WP_ALLOW_MULTISITE', true);

You should refer to the WordPress documentation for more information.

This will allow the Network option to show up in the Tools menu, which you’ll access by going to Tools → Network. When you access that page, you’ll be greeted by an installer that will ask you to choose whether you want to install sub-blogs in subdirectories or subdomains.

From there, you’ll have to paste in a new wp-admin.php and .htaccess file. WordPress 3.0 will walk you through the steps as soon as the installation of Network mode is completed.

2. Custom Post Types

WordPress custom post types are a feature that could turbocharge WordPress as a content management system — and not in the way of the now defunct Turbo mode. While this may not seem much different than a post category at first glance, this gives developers and theme designers the ability to cause certain types of posts to have a different appearance and functionality than the rest of the blog.

For instance, I’m currently working on a WordPress theme gallery called Themebook. This is a portfolio theme that allows me to upload an image and use that as a centerpiece of the content, much like a photoblog. But, I can’t figure out how to incorporate a normal blog post — that is, an article with a headline, body, and footer — without having to create a special category or tag that I could sort through on the backend. With post types in WordPress 3.0, I could define the types “theme” and “blog-post,” and have the theme use a different approach for each type.

For instance, I could create the ‘theme’ post type by sticking the following in my functions.php file:

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'theme',
    array(
      'labels' => array(
        'name' => __( 'Themes' ),
        'singular_name' => __( 'Theme' )
      ),
      'public' => true,
    )
  );
}

You’ll want to put in your post type, in both singular and plural form, where I put in ‘theme.’

Then, the “Themes” option will appear on the admin page on the top level of the left menu, right by where pages and posts normally live. After I create a few theme posts, I can sort for them with the following:

$loop = new WP_Query( array( 'post_type' => 'super', 'posts_per_page' => 10 ) );
while ( $loop->have_posts() ) : $loop->the_post();
     . . .
endwhile;

Now that you’ve seen Themebook, I would love some advice about the viability of turning it into a theme store, iTunes-style (minus the closed system). Tell me what you think in the comments.

3. Navigation Menu Customization

This nifty little feature lets you build your own custom menu, complete with categories, tags, posts, pages, and anything else from the taxonomy. It uses a nifty drag and drop interface that allows users to sort, organize, and remove elements from the menu on the fly.

I tried to play around with this with the new Cherrysave theme (which will hopefully be available for download soon), but I couldn’t get the link to show up in the admin interface. It turns out that because the menu’s public output is meant to be rendered as a widget, you need to have a widgets-aware theme. So, for those of you using custom themes without widget support, don’t get your hopes up (but those of you with stock or good custom themes, let me know what you think of this feature).

4. Custom CMS Taxonomies

Basically, taxonomies are pieces of meta information that attach to things you create in WordPress 3.0. They are used to organize and sort your content in ways to relate directly to the content. For instance, older versions of WordPress only have tags and categories as the available taxonomies for posts. WordPress 3.0 allows users to go far beyond that.

Brian Casel at Mashable explains it far better than I do:

Let’s say you’re a film fanatic and you use your WordPress blog to post reviews and rate new movies. You can create a custom taxonomy for “Rating,” then add R, PG-13, PG, G to every review.

Another example would be real estate listing websites. In addition to photos and descriptions, you might use additional taxonomies to provide a list of specs on each property such as asking price, number of bedrooms, year built, etc.

Much more clear, right? So how does one create said taxonomies? Just stick this code snippet into your functions.php file, my dear:

register_taxonomy('test', 'post', array(
'hierarchical' => false,  'label' => 'test',
'query_var' => true, 'rewrite' => true));

Just replace “test” with the name of your taxonomy, and you’ll be off and running. Now, when you edit or add a new post, you’ll see boxes where you can fill in content about the taxonomies you just created.

And, as Cosmin Negoita over at 1st Web Designer points out, you can easily access this information in your theme with the following snippet, placed inside the WordPress loop:

echo get_the_term_list($post->ID, 'test', 'Test: ', ', ', '');

Again, “test” gets replaced with the name of your taxonomy.

5. New Default Appearance: The Twentyten Theme

Twentyten is the much needed new default theme for WordPress 3.0. It’s actually quite beautiful, and features simple lines and great typography.

Twentyten also has advanced features built directly into the theme that take advantage of the power of WordPress 3.0. For instance, you can select a custom header and background from a variety of different stock images, or upload your own. The menus, created by the menu management tool, are drop-downs that live in the header. One of my favorite new features, though, is the ability to create “Asides” and “Galleries” from your posts.

To create these types of posts, just create categories called “Asides” and “Gallery,” and file your post as appropriate. The only thing I can’t figure out is why the WordPress development team didn’t choose to take advantage of the new custom post types feature to do this instead. Without reading a guide on Twentyten, most users would never have known that these features existed. With custom post types, Asides and Gallery would appear in the left column, and people could create them at will via a graphical interface. If you have any insight on this, please, leave me a comment.

6. WordPress URL Shortener with Shortlink (self-hosted blogs only)

Shortened URLs are a great way to share your content on Twitter and Facebook. Unfortunately, though, a link from bit.ly or owl.ly, while effective, masks your domain name and can make users wary. Furthermore, it doesn’t do much for your branding. Wtih WordPress 3.0, you can make your own shortlinks, assuming that your blog is self-hosted. All you need to do is click on the “Get Shortlink” button right below the title page in the post editor.

Then, you’ll get a pop-up with the WordPress shortlink URL. For example, the shortlink for this post is:

http://www.cherrysave.com/?p=461

7. Author Templates

Now, you can customize how author information is displayed on your blog. This is really useful for those who have multiple people posting, or those who took advantage of the new Network feature in WordPress 3.0.

In order to create a new author template, merely create author.php in your current theme directory, and use the author template tags as appropriate. At least, that’s how you would have done it in previous versions of WordPress.

In 3.0, you can go a step further and set up a custom template per author, based either on their nice name or their user id number. For instance, I could have a custom author template for myself by creating author-kurt.php or author-1.php in my theme directory, and filling it with author template tags. One feature I would like to see in future versions of WordPress is the ability to create author templates by the user’s class. For instance, there could be one template for admins, one for moderators, and one for authors. If anyone knows how to do this now, let me know.

Is there any important features that I missed? Let me know in the comments, and I’ll update this post as things turn up!

If you find this article helpful, you should share it with your friends on Twitter and Facebook in return.

Images increase download time for end-users and workload for web designers, slowing down the time it takes to fully develop a concept for clients. Furthermore, images can add unneeded clutter and increase search-engine blindness, detracting from the principle of simple web design.

You don’t need images to create a deep and beautiful web design. Instead, you can use CSS, typography, and optical effects to do many of the same things and instead only use images when they are clearly needed. If you like these tips, you should check out the bonus tips for five more ways to stop using images in web design.

Before we get started, there is one potential downside to these techniques that needs to be mentioned. Because of the (awful) state of standards-compliant browsers, not all of these ideas will work (or look the same) in all browsers. Therefore, there may be times when you might opt to use an image instead when you want an element to be sure to render the same across all browsers. One way to test browser standards is via the Acid3 test. And, you can see how your design will look in a variety of different browsers with BrowserShots.

Sideways Text

I recently spoke of being creative with text to create typographic contrast. You can rotate text by 90 degrees in order to create a more dramatic appearance, all without resorting to an image. This trick relies on proprietary CSS attributes, so it probably will not be well supported outside of Webkit-, Mozilla-, and Microsoft based browsers.

To do it, add the following code snippet to your stylesheet:

.sideways {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Then, add the style to the element in the usual method:

<h1 class="sideways">CSSrules</h1>

The output should look something like this:

Of course, you can rotate text in a variety of different directions and angles by changing the value of the attribute.

Create a Triangle

Believe it or not (and I wouldn’t, if I were you… ), you can create some basic shapes with CSS. Now, you won’t have to use images to include basic symbols within your templates. You can create a triangle by inserting this HTML in the spots where you want the triangle to go:

<div class="upper">
     <div class="inner"></div>
</div>

Now, use the following CSS classes to complete the effect:

.upper {
     position:absolute;
     left:150px; top:100px;
}

.upper div {
     border-left-color: transparent;
     border-style: solid;
}

.inner{
     border-width: 0 0 300px / 200px;
     border-bottom-color: #955;
}

You will get the following:

Automatically Zebra-Stripe a Table

Okay, so I know that this doesn’t quite qualify as a way to replace using images, but it’s such a nifty, simple trick that I couldn’t help but mention it. Using a single selector, you can automatically alternate the appearance of rows in a table. No more having to use PHP or Rails to dynamically insert an “odd” or “even” class to every other table row…

To do this, just start with a basic table. The key thing is to make sure that you wrap the main content of the table in the
tbody
tag. This will make it so that zebra-striping is not applied to the header rows. Here’s the table:

<table border="0">
	<tbody>
		<tr><td>One</td><td>and</td></tr>
		<tr><td>Two</td><td>and</td></tr>
		<tr><td>Three</td><td>and</td></tr>
		<tr><td>Four</td><td>end.</td></tr>
	</tbody>
</table>

And the magical, magical CSS snippet:

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

And that will churn out (something) like this:

Drop Shadows or Glows

You can also avoid using images by using CSS to add a drop shadow or a glow to elements. The following code snippet will apply the shadow to a box element, which is useful for making something stand out on a page. Obviously, you’ll have to play with the effect a little bit to make sure that it doesn’t look too tacky.

.module {
  background-color: #cccccc;
  /* offset left, top, thickness, color with alpha */
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /* IE */
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  /* slightly different syntax for IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}

Of course, most of these commands are redundant in order to ensure that the browser renders it correctly. Oh, the joy of standards compliance… Here’s what the final effect looks like:

Gradients

Here’s a simple trick for gradients:

.gradient {
	background-image: -moz-linear-gradient(top, #aaaaaa, #dddddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ddd));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd)";
}

And it looks like this:

Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

As a disclaimer, remember that CSS3 is not universally supported yet by all browsers, so use the following techniques with caution. Off of the top of my head, I believe that this is supported in Webkit (Safari, Chrome) and Firefox, but if I’m wrong let me know in the comments.

Import Web Fonts Into Your Design

With CSS3, you can import fonts into our design much like you import video, images, text, and scripts. First, find a font on the web that you would like to use. Generally, it has to be publicly accessible in a TrueType format (.ttf). For this example, I’m going to use the Kimberley TrueType font referenced recently on A List Apart.

To import the font, merely reference it as follows in the stylesheet:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}

The @font-face selector indicates that you are declaring a font for use in the stylesheet. The font is named (anything you like) after the font-family: selector. The path to the font is referenced via the src: attribute.

Now, you can use the font in CSS as you would any other font by using the name you previously gave the font.

h1 { font-family: "Kimberley", sans-serif }

You can use this pattern to import a huge variety of fonts without hosting any of them on your site or by creating cumbersome images. One issue, though, is copyright issues attached to fonts you find on the internet. You should either ask permission before using a font, or find a font that is Creative Commons friendly.

Interested in learning more about simple web design? You can follow @simplrdesgn on Twitter, join the Cherrysave Facebook page, or read along by subscribing to RSS.

What is the Semantic Web?

So what exactly is the semantic web? It turns out that it is difficult to define it simply, yet I’ll try anyway. The semantic web is best described as structured data. The main goal is to take the structure that the web and some applications have as a whole — URLs, categories, tags — and apply them to the data represented by code. That is, the semantic web envisions an interconnected web of data.

Many consider the semantic web to be a founding anchor of Web 3.0. British engineer Tim Berners-Lee envisions a web with SVG graphics built on a well-organized and self-descriptive (tagged, friended, categorized) Web 2.0. The semantic web promises to organize the world’s information in a dramatically more logical way.

Riding the Semantic Web: Organizing Your Code in a More Cohesive Way

The current HTML schema doesn’t have much support for the semantic web. In fact, one of the few ways you can tell computer systems about the actual content of your page and not just the display properties is through the meta tags. Using that, you can tell search engines about things like the title and keywords associated with a piece of content, but you can’t do much more than that.

Yet, there are some things you can do with the semantic web when you code to take advantage of semantic principals. And the best part is that they tend to be quite simple. Here’s a few examples of some of the things you can do:

• For headings, use a heading tag (h1, h2, h3, etc...)
• For paragraphs, use a paragraph tag (p)
• For lists, use a list item tag (li, ol, ul, etc...

Like I said, these are really simple principals, yet it can make a huge difference in the readability and clarity of code for both web developers, computers, and end-users. For example, look at the difference between the following two snippets of code:

Non-semantic

<span id="heading-1"><font size="8" color="black"><strong>Heading 1</strong></font></span>

Semantic

<h1>Heading 1</h1>

Obviously, the second snippet is much more simple for people and for computers (read: search engines and data miners) to read, and they should (or could) look about the same in a web browser.

The Advantages of Writing in Semantic Code

There are at least two advantages in taking advantage of the semantic web. First, computers can how understand the content of your page and make use of that. For example, in the current iteration of HTML, you can tell search engines the title and content of your page with the meta. In the future, Amazon could tell computers, in code form, the type and style of the products on their web page. The books would be classified as such, dramatically improving the categorization and usability of the internet. The second benefit is that it will improve communication between web developers and designers. Engineers will instantly understand what the code is attempting to model much more so than if one was using the common universal tags.

That’s all well and good, but I’m sure you’re looking for a better way to currently take advantage of the semantic web. XFN (XHTML Friends Network) uses data in the rel attribute to describe relationships between people. For instance, I could link to my friend Creed, whom I’ve met in real life, in the following way:

<a href="http://www.creedsblog.us.creedsthoughts.office.doc/" rel="met friend">

From the rel tag, you can see that I’ve met Creed, my friend, in real life (when he was stealing things out of my garage). The key to the semantic web, though, is that computers should be able to easily parse the meaning of those friend relationships. You can use a CSS snipet to do that:

a[rel~="friend"] {font-weight: bold;}

That will bold all of your friends via the stylesheet on a given page.

Of course, these are merely the beginnings of the semantic web. There will be undoubtedly more ways to classify and organize data on the web. Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

1. Caps

Use all capitalization to increase the emphasis on the heading. You can also use small-caps to develop the presentation of sub-heading and subheadings.

You want to avoid making long sentences that are all capitalized because it substantially reduces readability. Therefore, keep capitalization for headings and away from the body.

2. Style and Decoration

Don’t use underlining for any text that is not a link, instead, use italics.

Style combines nicely with other features, such as size, color, and weight, to create deeply textured text (that is, text with multiple effects that are different than the preceeding text)

3. Emphasize with bolding

But, don’t make everything bold. My suggestion (though I don’t always do this) is to bold the text in the heading, but to italicize text in the body.

4. Size

Sizing is the main technique used to highlight and emphasize important text. Generally, designers use large text to emphasize headings, logos, and slogans. While you can use large font to emphasize text, you can also use small font deemphasize and minimize content.

Generally, headers and logo text should be larger than body text, and non-essential text like meta data for blog posts should be smaller than the body text.

5. Direction

Turning a word sideways can create a dramatic effect. It reorients the horizontal presentation of a stream of text, and adds dynamic contrast in much the same way an image would.

6. Typeface

Generally, you can only use serifs or sans serifs on the web in order to ensure the font displays correctly on a diversity of browsers and operating systems. Of course, you can get around that limitation by using CSS Image Replacement. To do that, create the text in Photoshop, and create a heading — let’s say an h1. Set the background of the h1 to the image of the text you created, and move the plain text all the way off screen to the left so that it isn’t displayed.

The best way to use typeface for alternation and variation is to use a serif for the heading text and a sans-serif for the body text, or vice versa.

7. Color

You can use colors to emphasize and deemphasize font much in the way that you use size. The benefit of using color, though, is that color preserves and conserves space in a way that 64-point font does not. Further, you can combine size and color to further deemphasize text.

Create emphasis with a brighter color.

8. Spacing

Spacing plays an essential role in typographic contrast because it dictates the usage of space on the design. Modify and vary the tracking, kerning, and leading of text in the headings so that they are different than that of the body text. For the body text, set an appropriate line height and spacing in between paragraphs.

9. Alignment

Depending on the style and content of the design, you may want to vary the extent of ragged edges on font. Font that is justified or hyphenation looks smoother and is generally much more readable than text that is ragged. Yet, ragged text could work for large text paragraphs used for stylish effect in ragged designs. For body paragraphs, I prefer a smooth edge because ragged edges are hard to read.

It would be much easier to read through the placeholder text if it was hyphenated or justified.

Easily make images disappear with this cross-browser compatible code snippet.

While CSS3 allows for a full range of effects (I’ve written some tips for CSS3 web and iPhone development), including transparency, the new selectors aren’t always compatible with a large variety of browsers. So, here’s a way to make text, sections, and images transparent with CSS.

To get around the lack of compatibility, I merely reproduce the same command in a variety of different ways. That way, if, for instance, the opacity command doesn’t work, the -moz-opacity selector might. Here’s a portion of the code snippet I used for the image above:

[css]
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
[/css]

filter:alpha

filter:alpha is compatible with Internet Explorer, and accepts values ranging from 0 to 100. 0 is a fully transparent element, and 100 is a fully opaque element.

-moz-alpha

-moz-alpha is compatible with Firefox, and accepts ranges from 0.0 to 1.0, in increments of 0.1.

-khtml-opacity

-khtml-opacity is used in Apple’s Safari, and in other KHTML-enabled browsers. Again, the scale is from 0.0 to 1.0, ranging in increments of 0.1.

opacity

opacity is the standard CSS3 selector. Use this when you are sure that the client or audience will be using a modern and standards-compliant browser.

Good luck making transparent images in your next web design. If you find these tips helpful, you should follow me on Twitter or subscribe to the RSS feed.

When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right.

Use a Proper Typographic Scale

A typographic scale ensures that all of the type follows a predictable size pattern, improving readability for the user. An easy way to do this in CSS is to set all of the font on the page to a size of 18px, and then adjust headers and paragraphs with the em measurement with equal space in between. Here is an example of that:

body { font-size: 18px; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

Make Sure the Leading is Not Too Small or Too Large

Leading refers to the space between lines of font. It’s what gives the oompf to double spacing when you type papers for class. When the leading is too small, text looks bunched together, and when it is too large, it’s unstylish and hard to read. A good rule of thumb is to set the leading about 2 to 5 points larger than the size of the font.

Emphasize in a Non-Distracting Way

When you emphasize text, you want to do so in a way that helps and does not distract the reader. Sometimes, things like bolding, small-caps, and italics all at the same time make the font too hard to read. Generally, it’s best to stick to a simple italicized script for clean and readable design.

Creating Typographic Contrast

Use elements like size, typeface, color, casing, and weight to add interest to your design. The Web Designer Wall provides a wonderful encyclopedia of effects designers can use.

Stylishly capitalize on limited space with a side scrolling image gallery, similar to the one that Apple uses to show off their products.

What is it?

The product slider is a cool way to show off something like an image gallery in a limited amount of space. You can use it for an e-commerce inventory solution or to show off photos from a recent vacation.

It’s a simple task for JQuery UI. While you won’t be using much, it does require the jquery.dimensions, ui.mouse, and the ui.slider components. Use this code snippet in the head section of your markup to take care of it.

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>

The Markup
The HTML consists of an unordered list of items for the gallery, with labels for the slider appearing further below in the span.

<div class="sliderGallery">
  <ul class="items">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three, etc...</li>
  </ul>
  <div class="slider">
    <!-- the handler to action the slide -->
    <div class="handle"></div>
    <!-- labels appear against the slider, as pointers to the user -->
    <span class="slider-lb1">slider label 1</span>
    <span class="slider-lb2">slider label 2</span>
    <span class="slider-lb3">slider label 3</span>
  </div>
</div>

The Stylesheet

.sliderGallery {
    overflow: hidden;
    position: relative;
    padding: 10px;
    height: 160px;
    width: 960px;
}
.sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

.sliderGallery UL LI {
    display: inline;
}

.handle {
    position: absolute;
    cursor: move;
    top: 0;
    z-index: 100;
    /* bespoke to your own solution */
    height: 17px;
    width: 181px;
}

The JQuery

$(window).ready(function () {
  $('div.sliderGallery').each(function () {
    var ul = $('ul', this);
    var productWidth = ul.innerWidth() - $(this).outerWidth();

    var slider = $('.slider', this).slider({
      handle: '.handle',
      minValue: 0,
      maxValue: productWidth,
      slide: function (ev, ui) {
        ul.css('left', '-' + ui.value + 'px');
      },
      stop: function (ev, ui) {
        ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
      }
    });
  });
});

…and that will do it for you.

If you found this tutorial useful, don’t forget to subscribe to the Cherrysave RSS feed. Or, you can follow me on Twitter.

Dear Web Designer:

I’ve been meaning to tell you this for quite some time, but I didn’t want to hurt your feelings. But, the time has come to out you and your dirty ways. Generally, I can take some level of bad design. I understand you use a PC. I know that most sites on the internet, especially those created by corporations, look like they jumped out of a time machine. And yes, it’s tolerable that your site is fatter than Kirstie Alley off of weight watchers. But the designs YOU make are so bad I want to vomit. Therefore, I created you a list of ways to save my stomach and your shoes. Web designer, take notes!

1. The Design is a Cluster#@$*!

2. Ugly Shapes Are Used as Design Elements

3. Your Site Fails to Work in Every Modern Browser

4. I Get Bombarded by Nickelback When I Click Your Link

5. Your Dropdown Menu Disappears Every Time My Mouse Gets Anywhere Near the Link I Want to Click On

6. You Made Your Site in FrontPage. Or Dreamweaver.

7. Your Captcha is Hilariously Unreadable

8. You Use Navigation Tabs for Sections Instead of Views

9. The Entire Site is One Big Image Sliced Apart Via Photoshop or Fireworks

10. I Can’t Use the Site On My iPhone Because There’s a Big AJAXy Box I Can’t Close

2008.dconstruct.org

3918.co.uk

3rings.designerpages.com

5thirtyone.com

aenui.com

alltop.com

astheria.com

blog.razvanstavila.com

bryanculver.com

builtbybuffalo.com

cameron.io

cardeo.ca

clagnut.com

clearleft.com

concentric-studio.com

copypastecharacter.com

[ad#header]

d-e-f-i-n-i-t-e-l-y.com

danieloliver.co.uk

daringfireball.net

davidairey.com

decknetwork.net

dingitsup.com

eightface.com

erraticwisdom.com

f5fest.com

fizy.com

getfinch.com

hellostefan.com

ilovetypography.com

indexedbygoogle.com

indielabs.com

isistwitterdowndown.com

isitaleapyear.com

isitchristmas.com

istwitterdown.com

jasonsantamaria.com

jeffcroft.com

jonikorpi.com

jonnoriekwel.nl

jonphillips.ca

konamicodesites.com

kylesteed.com

lafabrica.com

leenutter.com

middlemindproject.com

minimalexhibit.com

minimalsites.com

mitchbryson.com

new.typographica.org

nuyustore.com

olex.org

postcard.fm

quietube.com

rainfall-daffinson.com

shauninman.com

si10.shauninman.com

silnt.com

sissonstudio.com

siteinspire.net

sitening.com

skinnyships.com

spiekermannpartners.com

textism.com

theconsult.com

themaninthesea.com

thenetsetter.com

thynews.com

typedeskref.com

arpspire.com

<
a href='http://warpspire.com/hemingway/ '>

elovetypography.com

8020studio.com

aigany.org

amylevypr.com

area17.com

arias.ca