10 Web Design Rules That You Can Break

As web design and design in general have evolved, rules have been established to ensure consistent and usable designs.

Some of these rules were created simply because website creators abused certain principles without regard for their users.

But these rules are not enforced by anyone and should be broken when necessary, especially when breaking them would lead to a stunning design.

In this article, we present 10 rules that you can break if it suits your design needs.

 

Rule #1: Do Not Display the Horizontal Scroll Bar

A significant number of mice don’t have a horizontal mouse wheel. This makes it awkward to scroll left or right when a web page’s content extends past the sides of the browser.

It can be annoying to have to bring the mouse cursor down to the bottom of the window and drag the scroll bar over just to see a word or two that lies beyond the viewable area of the page. That said, here are some well-designed sites that put the scroll bar to work in effective ways.


Benek

Benek uses JavaScript to change the scroll direction of the mouse wheel from vertical to horizontal. Each item in Benek’s portfolio is separated into its own column. The site has a surprisingly fresh feel and flows smoothly.

Benek


Shoe Guru

Shoe Guru gets away with horizontal scrolling because it takes advantage of the way people look at shoes. People look at most products from top to bottom, but shoes are different. People’s eyes usually move across the length of the shoe. Using this habit to its advantage, Shoe Guru makes its website’s design flow in the same direction, making the motion feel natural.

Shoe Guru


Stephane Tartelin

Stephane Tartelin uses the horizontal scroll bar to make his artwork look like it’s in an art gallery. Although the vertical mouse wheel doesn’t function like it does in the examples above, the effect works surprisingly well. You could even argue that the effect would be diminished if the mouse wheel were re-coded to scroll horizontally.

Tartelin


Graphic Therapy

While Graphic Therapy doesn’t display a horizontal scroll bar on its page, it still allows horizontal scrolling by clicking and dragging around the screen. Graphic Theory used horizontal navigation because all of its images are the same height but not the same width. The horizontal navigation helps the site flow smoothly.

Graphic Theory


The Horizontal Way

The Horizontal Way is a showcase of websites that use horizontal scrolling. The grungy graphics are beautiful, and this site is unique as far as CSS galleries go.

The Horizontal Way


 

Rule #2: Use a Minimal Number of Font Faces

Too many fonts usually conflict with each other and overwhelm the viewer. Each font has a personality, and too many personalities can create disorder.

To effectively use more than just a couple of fonts, a design has to be very text-oriented, and the rest of the design needs to be relatively quiet. Here are some examples of sites that use this sense of conflict and disorder to engage the user.

Links LA

Links LA uses many fonts in a non-linear layout to create a sense of energy. The page is difficult to read quickly but draws the user in. It’s also worth noting that none of the fonts are overly decorative; each word is legible, keeping the design crisp and clean.

Links LA


Geo Elements Design Studio

Using a variety of fonts usually conveys a sense of energy and chaos, but Geo Elements Design Studio‘s website is very open and clean. Each font is given its own space so that the viewer doesn’t associate it with another font. The image of the sky in the background helps reinforce the sense of openness.

GeoElements Design


Richard Stelmach

Unlike the last example, Richard Stelmach pushes his different fonts close together. The design works because only one font doesn’t look hand-drawn, and the other two work well with the illustration. Hand-drawn fonts usually work well together, even when there are many different font faces.

Richard Stelmach


Satsu

Satsu seems to have a lot of different fonts but actually only has three (not including the Sports Council portfolio item). By spacing everything carefully, Satsu associates certain lines of text with each other, even though the text may be in different fonts.

The logo title is in one font, and the two sub-titles each have their own font, but the viewer naturally groups these three text items together. Satsu is able to create energy without overwhelming the page with personalities.

Satsu Design

 

Rule #3: Do Not Use Too Many Colors

The fear of going too far with a design is what separates professionals from rookies and rookies from the oblivious. The oblivious try to make their designs as extreme as possible, with words on fire, blinking text, and as many colors as possible.

Rookies want to keep their designs subtle and easy on the eye, but in the end their designs can sometimes look lifeless. The following eye-pleasing designs are by some true professionals who are pushing boundaries.


Matt Mullenweg

Matt Mullenweg’s beautifully colored design looks like a watercolor painting (site has been updated since this article was written). All of the colors in the background would grab anyone’s attention.

Generally, good designs with a ton of colors will have these colors in the background, with a simpler palette up front. Reading text is very difficult when too many things are going on.

Matt Mullenweg


Travic Isaacs

Travis Isaacs’s design has a colorful vertical gradient in the background that makes the design seem colorful throughout. This website has bright pink as its link color, which is a great choice for designers who want to create a colorful effect.

Travis Isaacs


James De Angelis

James De Angelis’ website shows that text can be colorful without coming across as rookie-like. The design is very spare, and the tagline is certainly given center stage.

James De Angelis

 

Rule #4: Make Your Site’s Goal Obvious

Something that really gets crammed in the ears of young designers is that a design should instantly tell viewers what they are looking at before they read any text.

Brand recognition is important for large corporations, but sometimes the smaller guys need to be a bit more clever to get the viewer’s attention. Holding back information can intrigue the viewer and “tease” people into wanting to learn more.

Applying this technique to web design can greatly increase the time that users stay on your site.


Cetrotrees

On most portfolios today, the freelancer or company usually introduces themselves and explains their work. Cerotreees instead puts some vaguely labeled links on the left and samples of its work on the right, but nothing explains the idea or person behind it.

The air of mystery surrounding the site entices the user to stay.

c e r o t r e e e s


The Last Mixtape

The Last Mixtape is another portfolio that shows its work and nothing more. Such designs exude a feeling of extreme confidence. They never try to sell themselves; they just expect the user to be blown away and come begging for a contract.

The Last Mixtape


Peter Pearson

Using a splash screen is a good way to slow the user’s thought process and inspire them to dig deeper. The splash page’s goal is usually to explain the site quickly with photos or a short bit of text.

But in Peter Pearson’s case, its goal is to evoke a feeling. The big sky and splattered text effect do a great job at evoking curiosity because these things don’t usually appear together. This site also does a great job at continuing the emotion created by the splash page into the actual content.

The side-scrolling motion and animated lines that follow the user are really effective.

Peter Pearson


Piepmatzel

A great way to get around the language barrier is to not use any words. Piepmatzel is a CSS gallery, and people who have seen a CSS gallery before will likely recognize it as one right away.

Those who haven’t may be intrigued enough to give a few of the thumbnails a click in the hope of figuring out the pattern. The small amount of text at the bottom of the page helps with sorting and is superfluous.

Piepmatzel


 

Rule #5: Navigation Should Be Easy To Figure Out

Navigation should not be the bottleneck of a site. Users should be able to find what they want quickly. Sometimes, though, unintuitive yet engaging navigation can help the user feel connected to the site and what it is promoting.


Alvin Tang

As mentioned in the previous section, an air of confidence is conveyed when a portfolio doesn’t spell itself out. This is the case in Alvin Tang’s photography portfolio. When first arriving on the site, the user does not immediately recognize the words they see as links.

This uncertainty should prompt them to poke around a bit. Moving the mouse over a word reveals that it is indeed a link, and upon clicking it, a gorgeous photo loads. The photo will entice users to continue browsing.

To see more photos, users have to click the “Back” button on their browser (something most people understand to do) and then click another link. There is no hand-holding in the design, and it works extremely well. This isn’t a conventionally “gorgeous design,” but it delivers exactly what it needs to.

alvin tang photographer


Kasulo

Kasulo‘s navigation isn’t terribly hard to figure out, but the average user may not know exactly what to do upon arriving on the site. After the first click, though, everything becomes obvious.

The user navigates the portfolio pieces in 3-D style, and the latest items appear closest to the beginning. Using the mouse wheel is even more fun.

Kasulo


Marcio Kogan

Marcio Kogan’s site is another example of great navigation that isn’t immediately obvious. The instruction “Drag me” is hard to resist, and once the user does that, they’re on their way to cruising the portfolio items. The mouse-over previews are a small detail but really impressive.

Marcio Kogan


Ceranco

If a client were to ask a designer to make their site in 3-D, like a first-person shooter video game, most designers would silently laugh to themselves, take a deep breath, and then slowly explain why that would be a bad idea.

While the website for Ceranco isn’t exactly a 3-D shooter, it could easily be confused for some sort of indie computer game. Sites like this are great at engaging users. While the long loading time and poor search engine optimization make this less than ideal for most projects, it’s definitely worth a second thought.

Ceranco


 

Rule #6: Use Different Colors for the Text and Background

This rule perhaps isn’t written all over the place, but many rookies are so afraid of making text unreadable that they don’t consider using the same base color for both the background and font itself. You can follow some simple techniques to make the similar colors work.


Linksys

The Linksys site is neat because of how it has one blue for all of its links, even though the background color is various shades of blue. While a risk and maybe not the greatest color decision, it does work.

Linksys


Brad Colbow

Brad Colbow’s design is similar to Linksys’ because of the blue text on blue background. Blue on blue is difficult to pull off nicely, especially with so many different blues throughout the site.

Brad Colbow


Powerset

So far in this section we’ve seen only blue websites, because blue text is hardest for the human eye to read, and so legible blue type is always impressive. If a text effect works in blue, it will most likely work in any color.

Powerset uses a letterpress style for its font to create a 3-D effect that effectively separates the text from the background.

Powerset


Artist In Design

Artist In Design not only has green text on a green background and yellow/beige text on a yellow background but has text directly on top of a photo.

While some individual letters may be hard to read, the words as a whole remain legible. This type of effect should almost always be center stage in a design.

Artist-In-Design


Horacio Bella

Horacio Bella uses another 3-D effect on his portfolio. In this case, the letters appear to pop out rather than be dented inwards. Without this effect, legibility would have been greatly reduced. Another good effect used here is the tight kerning of letters, which further improves legibility.

Horacio Bella


 

Rule #7: Don’t Put Animation in the Way of Your Content

Seriously, don’t pop up little Flash ads right where the user is reading. Same goes for those survey boxes that show up whenever the user is in the middle of a sentence. Users do not enjoy being distracted when they’re halfway through a sentence. Unless…

It’s really hard to not be enthralled by the little spider on ABA‘s site. The design is clean, and although the spider is a distraction, it’s okay. So far, this site I think is the only exception to the rule.

aba.bg

 

Rule #8: Stick to Web-Safe Fonts

Although font face replacement techniques are still young, they’re already making a big splash. sIFR was the first, and recently Cufón and Typefasce.js have emerged.


Diseñorama

On the Diseñorama website, the red “Recientemente” text is selectable. One downside is that if the site doesn’t load instantly, the user will see the original plain font briefly.

Another downside is that if the user has either JavaScript or Flash disabled, they would only see the original font. All things considered, it’s still pretty cool. Hopefully it’s a preview of what’s to come in the next few years.

Disenorama


Cactuslab

Cactuslab also uses sIFR for the blue sub-headers (such as “Winter Work”). Although sIFR is the most complicated of the font-replacement techniques, text can be copied and pasted, giving it a big advantage over the two other techniques.

Cactuslab


 

Rule #9: Don’t Have a Splash/Landing Page

Many designers have had that same old discussion with their clients about why a splash page is not a good idea. Google tends to rank such pages lower, and they slow down the user from getting the content that they’re after. But they can be incredibly beautiful and inspiring if done right.


Gloss Postproduction

The purpose of the portfolio sample that appears on the splash page of Gloss Postproduction‘s website is to elicit an emotional reaction from the user.

Upon each visit, a random photo from the portfolio is loaded. Clicking on the photo scales it down and puts it in its place among the other portfolio pieces on the site. The scaling and motion effect provides continuation and helps carry over the user’s emotion to the rest of the company’s work.

Gloss


Issa London

When a site is completely done in Flash, the loading bar can serve as a splash page. When a user sees a loading bar, they will either close the page and go somewhere else or switch to another tab and browse elsewhere while they wait.

Once the page loads, it’s best to wait for the user to return before starting up. In Issa London‘s case, the gate is a perfect metaphor to say that the site is ready and the user may enter.

When the user clicks on the gate, the gate opens and various illustrated models appear. Using the gate on the splash page is a great design idea because upon entering, the user feels engaged.

eyessaiditbefore


 

Rule #10: Don’t use Tables

Any web designer who uses tables in their designs will instantly be called a rookie by experienced designers. Tables don’t display the same in all browsers, and they can make the source code look messy, but at the very least you’ll know what you’re getting with them. Here are some examples of designs that incorporate tables.

This table is slightly hard to see but is tucked in there between the two chairs. It’s a nice little side table but sadly doesn’t contribute much to this site’s design.

Abba Salon


Tables are way in the background of this design on Work at Play, but they keep the workers’ laptops and other items within easy reach. Without these tables, the room would feel much emptier, and the background photo wouldn’t have the same effect.

Work At Play


Although this design mostly features chairs, a nice little table appears in the top-right of the thumbnail. Looks like a pot is sitting on it.

Fiberon Decking


As far as designs with tables go, this is one of the best. With two tables featured in this Flash animation, the design gives them a lot of attention. This site should be on every designer’s list of great designs that use tables.

LevelTen

 

Break the Rules!

Breaking the rules is okay when a design calls for it. Many of the design choices reviewed here would not be considered by the average designer. This is what separates great designers from average ones.

Those brave enough to go against what they’ve been taught always stand out.


Written exclusively for WDD bt Eli Penner. He runs his own website at SleepyHero.com

Do you break any rules in your web designs? Why or why not? Please share your views with us…



0 shares
  • http://www.ninique.net ninique

    I couldn’t stop laughing at your table examples. Indeed, tables can hold laptops and coffee cups way better than they can hold layouts.

  • http://www.designsojourn.com DT

    The last one takes the cake! Love it and the tone it sets to encourage designers not to be so serious all the time!

  • Timothy Armstrong

    An interesting article (with some great examples), but I’m not sure I’m down for breaking some of these rules. Yes, some of them can be safely broken, but, in the name of accessibility and usability, I don’t think that unobvious forms of navigation or tables for layout should be used…

  • http://www.joshuarussell.net Joshua Russell

    good post.
    totally agree with #5 Navigation.

  • http://www.JoelVardy.com Joel Vardy

    Very nice list of rules you should follow. I generaly agree with all of these, although you have pointed out the sites which ‘work’ even when contradicting these rules!

    I personally have used the same colour for backgrounds and text in the past and providing you use light and dark colours it works very well.

  • http://www.twitter.com/rocknroses Oreana

    #10 is most useful. Thanks~

  • Alex

    Love the table joke :L :L

  • http://greenflipflops.com Gabe

    Excellent examples, thanks for the post. Web safe fonts can go jump off a bridge with IE6, please and thank you. I <heart> breaking rules.

  • Mikaela Lily

    Nice article :D

    sometimes we have to break the rules to make an outstanding web design
    without forgetting the points of using the website it self ;p

  • livz

    it tooks me a while to figure out what’s rule #10 about ^^||

  • http://divyasharad.blogspot.com div

    Very Useful Info……..

  • http://blog.insicdesigns.com insic

    Nice article and great sites that is being featured.

  • Tristan Kurniawan

    LOL at #10.. :D

  • http://www.veronicawong.ca Veronica Wong

    HAHAHA … your table examples were gold. Thank you my friend for that.

  • http://www.pixelstudioworks.com PixelStudioWorks™

    Hi

    Ten rules that you have explained in this article are so impressive and useful.
    I think it is definitely useful in designing excellent websites and it has worked for me.

    These rules made my job easy.

    Thanks for post such a wonderful article.
    It really helped in all aspects.

    Thanks again.

  • http://www.orphicpixel.com Mars

    hahaha! table ha. good example

  • http://www.sjlwebdesign.co.uk SJL Web Design

    Number 10 was great! I really liked the idea of using a horizontal scroll in a design too.

  • http://accessibleweb.eu/ Richard – Accessible Web Testing and Design

    Love the tables example, will probably refer to that when design gurus start being dogmatic about tables being the worst sin of web design.
    It’s great to push the envelope in these ways but my difficulty is that a lot of this is counter to good web accessibility, for example colour contrast between text and backgrounds and intuitive navigation. It’s a dilemma I haven’t resolved as I do think most of these work well if accessibility is not an issue.

  • http://bartvermijlen.wordpress.com bart vermijlen

    concerning the tables: I once did a presentation on email etiquette, and talked about the fact that the use of capitals equals shouting. Reaction from the public: “can we use other cities without problems?”

  • http://www.ferdychristant.com Ferdy

    The table joke was good, but I do have a problem with your abuse of the word “rookie”. Your article strongly implies that rookies are rookies for NOT breaking the rules. The opposite is true. Everyone, rookies or not, should follow the rules and only break them in exceptional cases, of which you demonstrated a few quite well.

  • http://james.padolsey.com James

    “Breaking the rules is okay when a design calls for it”

    I wonder what Jakob Nielsen would say to that…

    In reference to #5, if I can’t figure out a website’s navigation then I do one thing, and one thing only: leave!

    • http://www.webdesignerdepot.com Walter

      It’s all about finding the right balance I think. And usability remains an important factor of course…. I don’t think Jakob will like this article, though ;)

  • http://thedesignsuperhero.com aravind

    haha… awesome post :D
    but let me say, using tables is always nasty!.. don’t use tables.. lol!!

  • http://www.highresolutiontextures.com 2lip

    great article and an even greater joke at #10!

  • http://cahcepu.com Om Ipit

    if we want to create great design, we must feel free…
    yess.. break the rule…

  • http://designjojo.com/ jojo

    haha.. fantastic post!!!!

  • http://webdesignernotebook.com Yaili

    When I first started reading #10, my thought was “Oh boy, here we go…” :)

    I agree, tables are absolutely awesome and I use them all the time both at home and at work. I’m a big tables advocate!

    About #1, I usually don’t like horizontal scrolling, but it’s true some sites know how to do it properly. However, I would advise against dual scrolling, it’s just plain annoying.

  • http://www.designerpie.co.uk Adam

    Hi;

    Well Benek’s a nice guy and a good designer, but he’s broken that rule and many others, his telephone number does not stand out one bit, and he has no links directly to his services or a propper contact page, so poor. And using javascript to basically change how I control my PC is annoying, nearly as bad as resize’in my window.

    ShoeGuru, not bad but the footer text is badly thought out, it’s nearly unreadable.

    “Breaking the rules is okay when a design calls for it. Many of the design choices reviewed here would not be considered by the average designer. This is what separates great designers from average ones.”

    Riiiiiight, ok then…

    And some of these just seem, well quite frankly lol, you include a site selling tables for using tables…

    “As far as designs with tables go, this is one of the best. With two tables featured in this Flash animation, the design gives them a lot of attention. This site should be on every designer’s list of great designs that use tables.”

    Sorry are you on crack?

    I have a sense of humor but the table joke is just an epic fail. Oh well better luck next time.

    • http://elizawhat.com Elizabeth Kaylene

      I thought the table joke was lame, too. Sometimes, designs need a table and you just have to suck it up, rookie or not.

  • http://www.goodusability.co.uk David Hamill

    OK your tables example is funny, but some of the advice you’re giving here is really quite poor. You’re actually using an example of a site that takes over the user’s mouse and rearranges the control. For what? A pretty design.

    Your advice on Rule 4 is way off the mark. Only designers are ‘intrigued’ by designs that aren’t instantly obvious. So just because you like to explore a design to work out what it is and how it works, doesn’t mean real people will. Remember you’re designing for the user not to impress your peers.

    There’s a fundamental difference between your reason for being on these sites and real people’s. You’re there to critique the design, they’re there to find something.

    If all you want to do is make designs that are pretty then knock yourself out, but design is more than just ‘snazzy making’. You are designing an experience and your users are not there to be wowed by how clever you’re being. They’ll be wowed by a beautiful design that gives them what they want.

    • jolypop

      Comment of more value than the article itself.
      Thanks David Hamill!

    • http://elizawhat.com Elizabeth Kaylene

      If you’re designing just to impress your peers, you’re in big trouble!

      I agree that some of the advice in this article is bad. My jaw pretty much hit the floor when I read the part claiming that you can break the “navigation should be easy” rule. I fight with myself all the time when a site requires the use of a dropdown menu. If they have more than two levels, they can be very frustrating.

      Animation and splash pages should be used at very minimum; I usually leave sites built entirely in Flash, because they tend to have splash pages that take forever to load and load slowly in general. Don’t get me wrong, the use of Flash can result in some fun stuff. I think it should be used strictly for ads and games.

      There are many “rules” that we can break, but we should not sacrifice usability for any design, EVER. To me, navigation, fast load time, and minimal animation are huge components of usability.

  • http://www.embed-design.com/ Oliver

    Great post. Loved the Kasulo site. lol at the last post though. Cracks me up :D

  • r_jake

    Rules #4, #5, #7 and #9 can be broken for personal portfolio sites, where a more creative approach might be appropriate, but not so much for commercial or corporate sites methinks.

    Surely#6 should be ‘Use Contrast between Text and Background’, not different colours. Most of the examples here use variations of the base colour, and use contrast to make the text readable, just like you should.

    #8 I’m really getting into using Cufon and Typeface.js, they offer a great solution in terms of progressive enhancement (much better than sIFR), and think this is one area where the old rules no longer apply.

  • http://www.graphic-euphoria.co.uk Si

    Im sure you could prob find a site which breaks any rule to give an example. These shown here are more like general practice recommendations than rules. The only one of interest was the horizontal scrolling rule.

  • Jeremy

    Most of these rules have been put in a place for a reason.

    Horizontal scrolling can cause issues for people with impaired vision using a text reader. And in the first example the scroll redirection was not working in Safari.

    Unless you’re going for a cluttered look too many font faces makes your site look disorganized. You’re either using a lot of images and hurting SEO, or creating longer load times by making tools like sIFR load 10-15 fonts.

    And did you honestly say you should hold back information to “tease” the visitor. If you have quality information and present it nicely the user will come back. A suggestion like yours only serves to annoy people.

    I realize these “Rules you should break” or “Standards you shouldn’t follow” articles appeal to everyones rebellious side, thus generating traffic, but please be a little more thoughtful. Most of these rule can be bent, but breaking them? You’re asking for a sub par site.

    • pamela leong (Singapore)

      oh great, i like everything you’ve said here.
      I’m still on my journey into mastering web designing
      you might have just saved me from breaking the rules:D thanks Jeremy!

    • http://elizawhat.com Elizabeth Kaylene

      Agreed. I was not impressed with this article, at all. If not being rebellious in my design makes me lame, then I don’t want to be cool. I’d prefer to make the site look aesthetically rebellious than break rules that are in place for a reason.

      Glad I’m not the only one who didn’t like this article. I was going to leave a standalone comment and worried that I’d be the only one not wowed!

  • http://www.evowebdev.com/blog Ray Gulick

    Tables: funny. Great way to make the point.

  • http://getlevelten.com/blog/chris Chris Sloan

    Hey thanks; we love tables too! Unfortunately that design has since been changed to a table-less design.

  • http://espresso-online.info Jonathan Wagener

    Cool article. #10 is great :D

  • http://www.tedgoas.com Ted Goas

    Nice post! You bring up some good points. Your idea about navigation might be a slippery slope to some, though. If I’m navigating around the web looking for something (read: not looking at creative sites for inspiration) I don’t really want anything to get in my way, you know. When working on a site, one might consider its purpose before designing any bleeding-edge, atypical function into it.

    Great ideas overall!

  • http://www.sametomorrow.com/blog Adam

    Good post and list

  • http://www.dreamberry.co.uk Manchester

    With my beautifully functioning eyes and relatively long attention span I can see how many of these sites are marvellously pretty, however not everyone has eyes as good as mine or as long an attention span.

  • http://pthesis.com p()thesis

    Great article. I also liked the tables joke. As someone else put it, it’s a good reminder to not take things too seriously all the time.

  • http://dealfreezer.com/blog.php web2000

    I enjoyed your article 10-web-design-rules-that-you-can-break. Thanks!

  • http://www.tdesignonline.com richard andrew lee

    funny!.. fun post. like the sections about type/fonts and the tables was hilarious.

  • http://www.azzcatdesign.com Catherine Azzarello

    Very witty. So glad I read the entire post!

  • http://bengood.org Ben G

    Rule #10 = awesome.

  • http://www.sleepyhero.com Eli Penner

    Thanks everyone for all the wonderful feedback!

  • http://www.aledesign.it aledesign.it

    Fantastic post.. Really important some rules..Thanks a lot!! See you!! :D

  • G F Mueden

    My laptos doesn’t have horizontal scrolling. I think it has vertical but I have never sed it. If my right arrow doesn’t work, I leave.
    ===gm===

  • G F Mueden

    Wish this website ad a more legible font in the text entry box. I can’t see mu errors. ===gm===

    • http://www.webdesignerdepot.com Walter

      Which website do you mean?

  • Samson

    I disagree with all this. These are all rules you shouldn’t break, but have the freedom of different options within these rules. Think about that.

    Breaking these rules creates bad usability and information architecture. There’s no point or reason users should have difficulty finding the information they want. There’s just no point to that. Why would you make something a user is looking for harder to find?

    Visual design is important to convey credibility, but certainly, not that much is needed. People go overboard with visual design and throw on layers of ostentatious graphics and colors in the name of “being creative”, when all your doing is complicating the design because you don’t have the knowledge on how to simplify.
    All visual design is important for is credibility. A simple logo, textured buttons, consistent link and heading colors is all that is needed to convey credibility. Apple.com as a good example. The reason Apple is so good is because they are so consistent with their styling. The links are blue, the copy color is dark gray and headings are black bold. This is what good design is, not the breaking of rules and order.

    The logic of this article doesn’t make sense. Is it that if other websites break these rules, then that makes it ok? What if all the sites that did break these rules are just badly designed sites? Wouldnt the article then be titled ’10 Web Design Rules Many Websites Are Breaking.”

    • http://www.sleepyhero.com Eli Penner

      Most of the designs I included in the list are from companies or individuals who offer design as a service and I would argue that it’s important for them to make their site with examples of their creativity and a sense that the designs that they offer will stand out. Although horizontal scrolling wouldn’t work on Apple.com or another site that needs to be accessible, I believe that it works for these sites as it offers a unique option for standing apart from their competition. I don’t think it’s fair to group Apple’s site with sites that have a different goal.

      The logic of the article is that the basic goals made for web design don’t apply when the goal of the party behind the site contradicts it.

      • Samson

        First, I want to clarify that I am not saying I dislike your post or anything, but it raises a lot of issues that Information Architects battle with. In essence, all websites have one goal and that is to communicate or receive information. This may be oversimplifying things, but without simplification it is difficult to narrow things down to objective truth.

        I agree that websites that offer web design services need to show their creativity and such, but you cannot compensate consistent order and structure for that. Simply put, a website is not a canvas for art. A website is a tool to display canvas art. It’s a tool. It’s useless to get creative with a tool. Sure, you can decorate it like putting stickers on a hammer, but you cannot change the structure, or it defeats the purpose of a hammer.
        The real creativity is in the content that you display for your services. Your portfolio. That is the bulk of it. (80% content and 20% visual design)

        In terms of usability, what good is amazing content if it’s hard to find, or hard to read? This is the key here. While Apple may serve a different function as a business, it does not server a different function as a site, which is to communicate content and information. Do more people WOW at Apple’s visual graphics (albeit there is very little) or their products they display online?

    • http://elizawhat.com Elizabeth Kaylene

      Replying to your second comment:

      If I were a potential client instead of a designer, and I went to a designer’s site that made it hard for me to find what I wanted, made me wait for it to load because of a splash page, and had frustrating navigation, I would leave.

      Just because we are designers, doesn’t mean we have to show off every single trick we know in one design. Of course we want our portfolios to look good; we wouldn’t keep upgrading our personal sites’ designs if we didn’t care about how we presented ourselves. But I agree that there are certain rules that absolutely should not be broken, no matter who you are designing for (unless, of course, you’ve got a client who just doesn’t care and you’ve tried to explain it to them many times).

      We don’t have to be flashy or bend over backwards to show how creative we are. If you are a good design, this will come naturally. But usability should never, ever come second to aesthetics, and I’m really disappointed in WDD for this article, because it seems to imply that heavily, all for the sake of being rebellious. We aren’t punk rockers; we’re professionals offering a service.

  • http://www.retroboutiques.com Arlene

    The tables joke was tooo funny! LOL! I’m gonna send this link to my clients who still want tables in their design!

  • http://www.subprint.com Joe McCann

    I believe this massively fails in regards to accessibility. If you just want a real “artistic” website, then NO rules apply. But I believe the reason some of the “rules” (practices) exist is for a better experience for the MAJORITY of users.

    • http://www.sleepyhero.com Eli Penner

      Websites don’t “need” to be incredibly accessible depending on what they’re trying to achieve. If someone is trying to show off some illustrations, then their market isn’t the visually impaired or users on cell phones.

      • http://elizawhat.com Elizabeth Kaylene

        Your market is anyone and everyone who can access the web. It’s awfully presumptuous of anyone to ignore accessibility, no matter what you are trying to convey with your site. We are professionals and should act accordingly.

  • http://www.webdesignerdepot.com Walter

    The essence of the article is to show how breaking design rules can sometimes improve a design. It doesn’t mean that you always need to break every ‘rule’ out here.

    And yes, usability is a very important factor, and we’ve covered usability extensively in WDD.

    That being said, breaking a design ‘rule’ will not necessarily ‘break’ the usability of the site. It’s important that you use your common sense as to what’s right for your site.

    Take for example the horizontal scroll bar examples at the top of this article. If the mouse is coded correctly so that the wheel triggers horizontal scrolling instead of vertical scrolling, most users will quickly figure this out and be a bit more engaged than usual, and at the same time more likely to stick around a bit longer.

    The longer someone stays on your site, the better opportunity you will have for making a sale on an e-commerce site for example, or gaining more subscribers or comments on a blog.

    • Umm

      “most users will quickly figure this out and be a bit more engaged than usual, and at the same time more likely to stick around a bit longer.”

      Because if there is one thing web surfers love, it’s unconventional navigation schemes! I would file most of this stuff under “How to murder your hit counter in 1 month or less.” For god’s sake, don’t do any of this on production sites, kids. Leave the experimenting for your design school projects.

  • http://www.timc.be Tim

    Most of these rules concern some form of accessibility or usability. For example, the horizontal scroll is a bad idea because it is inaccessible and goes against the basic convention that pages expand down.

    This article gives, for lack of a better word, lousy advise to webdesigners all around the world. It will hurt their customers who sell less, it will hurt the users of those customers who grow frustrated in the loss of time.

    But, by all means, break these rules if you wish. It’s the reason why agencies like the one I work for make money…

    • http://elizawhat.com Elizabeth Kaylene

      Agreed. I’m very disappointed in this article. It astounds me.

  • http://billsmind.com Billco

    The biggest problem I have with this article is the gross misinformation. I would have titled this post “10 ways to act like a pretentious web-ignorant designer”. Go ahead, make it illegible and confusing. The true skill in web design is to combine the utilitarian nature of information structure with pretty graphics and styling to make the end result a little less boring.

    The only people who visit an overly prettified site are there to look at pretty pictures. The rest are seeking information, raw data, which these “broken rules” purposely obstruct. You can do whatever the hell you want, but don’t go calling it web design because this is print design clumsily thrown on the internet.

  • http://wakeupfamous.com Nicole Seiffert

    “Although this design mostly features chairs, a nice little table appears in the top-right of the thumbnail. Looks like a pot is sitting on it.” That one almost put some coffee on the laptop!

    Your post is a great example of how to lighten up and still get the job done.

  • http://digitalapplejuice.com madbadcat

    great examples- and justification for many of the designs ideas that have gotten shot down for not following the rules. thank you.
    cheers.

  • http://www.nettutes.com Praful

    Wow..Awesome! I’ve never seen a tutorial like this before. Thanks

  • G F Mueden

    Far too many of the examples use low contrast. Young designers with good eyes do what looks good to them without realzing (or caring?) that old people who still make decisions and spend money, may have acceptable visual acuity but lack sensitivity to low contrast.

    If you love me Baby, make me know it !!

    ===gm===

  • bigyaz

    The exceptionally talented can break the rules and get away with it. The rest of us should tread very carefully.

  • http://www.twitter.com/cyberick cyberick

    Good one.

  • http://www.cezz.co.uk Cezz

    I Have to give you 10 out of 10 for that one, the whole post is informative, but you have ended it on a good note, making me not only strongly consider where to next break a rule but also that light heartedness is good in design…

    Thanks for the inspiration…

  • http://www.evaneckard.com evan

    You can’t “break” these rules per say, simply because it’d be a bad user experience. You can bend them however if designed really well. A website can have as many font faces, colors, contrasting elements, horizontal scrolling, effects, etc. as long as it’s all designed well and still makes sense to the user.

    Going outside of that you enter the realm of art where user interpretation of the site is left wide open.

    As for technical issues like #8 and #9… you can use any font you’d like to as long as it renders on all browsers you’re developing for. As for having or not having splash pages – that all depends if you’re willing to impact your site’s search results. Search engines give huge weight to that main index page, and if that page has very little content and entry points into the site, then your results might tank.

  • Uncle_zed

    show me HOW to make the SPIDER??

    it’s amazing.

  • David Miller

    Good article. ONe of your readers has a good point about accessibility issues. I guess for some sites design innovation will also mean user exclusion. Other than that, great way to lighten things up with the tables joke. I still like them myself. They will expand ro contract with the addition or subtraction of content.

  • Amos

    Funny bit about the “no tables” rule…

  • Michal

    In comparison how dumb the advice is in points 1-9 (as stated by numerous posts before) using (actual) HTML tables sounds like a great idea – saves time money and reduces the risk of a heart attack.

  • Nakia

    Love the post! made me laugh!

  • http://www.gamesnooper.com JustChris

    I once tried my attempt at a horizontal-scrolling site. There was one fan-made online anime magazine called The Ramen Bowl and it was very ambitious in design and execution. Only problem was that it was made to only work in IE 6 (this was in 2003-4) and the Javascript-enabled slider buttons that made it scroll totally broke the layout in other browsers.

    Well, it was ahead of its time and only ran 3 “issues”, but it was still a nice sight for the eyes.

  • Ian

    Nice post, but what’s with giving us a horizontal scrollbar on 1280×1024 when viewing your blog? You can’t possibly have a design rationale for that…

    ;-P

  • http://meiert.com/en/ Jens Meiert

    Quick question, did you—the author—test any of the layouts with users? Alternatively, what data are there backing your claims up?

    • http://www.sleepyhero.com Eli Penner

      I did not test the layouts with users. All the claims are not backed by solid data but rather interpretations of how I believe users feel based on my various studies of psychology and user interfaces.

  • TomA

    Seems to me you made up most of these “rules” yourselves.

    Then, you didn’t do any testing (or report on any) to see if any of it actually works beyond a pretty picture and ended with the “tables” joke to deflect any criticism – although you seem to have a serious point to make.

    Isn’t it always the case that there are exceptions to such “rules” and that one sign of mastery of a medium is knowing when breaking the general rules is appropriate?

    Unfortunately though, it seems to me, the last thing anybody needs is to give more fuel to the purely visually-oriented designers who know nothing of good Information Architecture and Interaction Design and care nothing about best-practices with regard to accessibility, but think that if it looks great from their perspective (on their system with their understanding of the design) then people who complain are just whiners who don’t understand the exigencies of the aesthetic (that is, who would not appreciate the value of “a stunning design”).

    All-in-all, nice eye-candy — but I would have received it much less grumpily if it had been framed by some appreciation for the basis of the so-called “rules” and offered as what is possible in terms of variations once one has mastered the basics.

    – Tom

    • http://www.sleepyhero.com Eli Penner

      The rules included in the list are unofficial rules that I’ve seen, usually from people who I’ve asked to criticize the designs that I’ve created.

      Your second paragraph is bang-on. This article is intended to stir the reader’s mind a little and hopefully designers will feel that they have more options and they won’t be as closed-minded when making design-based decisions.

      I also appreciate your points that I haven’t focused enough on only breaking design “rules” if it creates more value for the website. I wrote this article hoping that users would’t it as permission to throw away all the rules and do whatever they thought looked pretty.

      • TomA

        Well, you certainly assembled an impressive array of sites which make the point well that “rules” are really “rules of thumb” and can – and should – sometimes be broken without it being a mistake.

        Two things concern me about the discourse around “rules”:

        1) It’s really hard to generalize to the extent that most people would like to in these contexts. In other words, there are very few one-size-fits-all “rules” in Web UI design. Maybe it would make more sense to talk about “aims” or “design goals” or something that abstracts away from specific layout or technology choices. Cross-browser, cross-platform, cross-device and cross-variously-abled-user considerations can make Web UI design a real challenge. The temptation to reduce the complexity to easy-to-repeat/easy-to-remember lists of things-to-do and things-to-avoid is strong. That said, I seriously doubt you want anybody reading your post to decide that there is no need to pay attention to the constraints* that are far from obvious when one is sitting in front of one’s own computer screen generating ideas for a site.

        *Cross-browser, cross-platform, cross-device and cross-variously-abled-user compatibility

        2) The activity-of-design and the paying-attention-to-constraints. These two modes of thinking/acting are often in real and important conflict. I think this is where a lot of this churn comes from and why many more visual-design-oriented folk end up seeing a concern for “rules” as the enemy. I think there really has to be room for both in a Web design process. To be a good designer, you have to make room for free-style, *unconstrained-by-technology/implementation-constraints* design “thinking” (it’s a very strange sort of thinking that is hard to pin down, hard to articulate, often under siege by a bottom-line, rules-governed mentality on the part of others) — BUT to be a *responsible* designer — a citizen of the system in which your design is going to live — fundamentally to have social integrity as a designer — not to mention ultimately to be successful from a business perspective — you have to then move through a phase where you subject your ideas to the constraints in which your design is going to live and breathe. This is the phase where “rules of thumb” about layout and do’s and don’t’s of various design elements should enter the fray. Too many designers get obsessed with insisting on the validity of the first of these two phases and lose sight of the importance of the second. Actually too few can’t see how these two phases can possibly live in harmony – and so either feel they’re being forced to “sell out” for a living or continue to produce broken UI’s for unsuspecting, not-well-informed clients.

        Your post is very cool and garnering lots of attention. I just wish you’d add some sort of disclaimer that nothing you say here should be viewed as license to ignore the need for wide compatibility and accessibility, but is rather an exploration and reminder of the approximate nature of any design “rule” and suggestion of what is possible in advanced Web design practice.

      • TomA

        Interesting. My “” closing tag didn’t render, above — I wonder if the quotes will do the trick?

        – Tom

      • TomA

        OK the cute little tag was supposed to be: open-angle-bracket forward-slash “windbaggery” close-angle-bracket.

        Hmm — it was intended to poke fun at my potentially overly serious, long-winded commentary – but now I’m kind of defeating that purpose by obsessively pursuing the rendering of the tag, itself. My, what a meta-world we inhabit when first we practice to mark up. :)

  • http://www.wordweb.ch Barbara

    Thanks for a great laugh! The part about the tables is so funny :) Of course, the rest of the article is great too. Too many rules hinder creativity, that’s very true. But remember, don’t use tables ;)

  • http://codemypantsoff.com Dylan Barber

    After years of being told not to use tables its nice to see someone who says its okay sometimes to use tables!

    JK – Great article and really inspiring examples!

  • http://pleasurebypixel.com ilkut

    still laughing at number 10 : ), the seriousness got me. wonderful post

  • http://www.peter-pearson.com Peter Pearson

    Thanks for the feature! Glad you like the site.

  • http://tylershaqiri.com Tyler

    The article was interesting however I would NEVER break the Navigation rule!
    I am sorry but if a website requires the user more than two seconds to orient themselves, they’re gone in one!

    The too many font rule is also another that I am weary about and quite frankly the examples chosen were not quite exemplary. I’m open to this one but it depends on the typefaces used.

  • http://www.misty-blue.net Sarah

    I find some of the conversation about treating “the rules” with more respect a little amusing. There’s a reason that nearly all art/design teachers always say that it’s important to know the rules and the limitations so that you’re educated enough to know when it’s okay to break them. I don’t think I’ve ever met a designer who disagreed.

    Sometimes breaking the rules creates something new and interesting. Sometimes it causes a design to fall flat on its face. I think the examples given demonstrate that– some look really great and some seem to be floundering. In the end, it all depends on who the website’s audience is and what the goals of the design are.

  • http://www.WorkAtPlay.com Jordan Willms

    LOL.

    You got us with that crack about the tables ;)

    Great post!

    Jordan @ http://www.workatplay.com

  • http://spyrestudios.com Jon Phillips

    haha, tables rock! :)

  • http://www.tangyong.net tangyong

    so cool.

  • http://chamelledesigns.com/blog/ Livia

    Rule #10: Don’t use Tables” Hahaha. Funny!

    • http://blog.kevinvs.ca Kevin

      hahahaahahahhahahaha seriously it is!

  • marl

    i give the link to my friend =D d’ designer. i like all pics :)

  • http://www.kronikmedia.co.uk Web designer

    I wonder why does anyone in their right mind will use a splash page designed in flash. The concept of splash pages are so nineties. I personally would never visit a website which has an annoying splash page.

  • G F Mueden

    All this is frightening to an old geezer who would like to have a website devoted to Low Vision and Legibility, that would be universally accessible. My needs demand simplicity and a professional appearance.
    Nothing I have seen here gives me confidence that this group could do the job without the thrat of being flogged at the first sign of cleerness. Above all its legibility must be without exception. E.g., here is a site devoted to good (?) design whose text entry box has a font of particularly poor legibility compared to the rest of the text.

    So much for my dream. At 92 I am unlikely to achieve it, but still I dream. There are four things I would like to see in it. @1, a public message board, somewhat like this, but with the opportunity to send private messages to other participants, #2, an Assissttive Technology (AT) database with links to users of the products listed so that others can ask about their experiences, #3, Avocates, an experts who can critique bad examples (printed or on screen) and try to get the publishers to shape up, and #4, a census of the population’s ability to read different combinations of font size, colors and contrast so as to create minimum standards of legibility.

    [#4 is a real killer and the pros in the field have told me, with good reason, that the factors are so many and hard to deal with as to be overwhelming. I accept their reasons, but not their conclusion; I think I have a way to do it.]

    Should I continue to hope? Suggestions?

    gfmueden@verizon.net ===gm===

  • http://www.goldenretrieversite.com Lou

    Good points. It really boils down to the purpose and client for the site. The tables example is funny.

  • rocky

    nice post. i am very happy to read it

  • http://www.platinummango.com Jordan Foutz

    #10 scared me for a sec. I thought for a second that perhaps some of the furniture tables were put in website tables, but then I said to myself, “whoa, those sites look way to nice for internet tables, thats mighty interesting how they could have put those really nice table images into a table on the websitel.” I was also anxious to scroll down to the comments.

    I agree w/ safety in pulling rank on colors, web safe fonts (sifrflash is a good way of bypassing that), horiz navigation, but the site’s purpose should always be abundantly clear once you arrive on site. Great sites in here.

  • http://www.sonichtml.com/en/ sonichtml

    nice~ thank you for shared…

  • Chian

    great :D totally amazing

  • http://tweeaks.com/forums Jared

    I was like wtf is he talking about the tables…. I had to keep re-reading it, cause I thought I was missing something. Good stuff

  • http://eveltdesign.com joel k.

    ha ha “tables”
    took me five minutes to get it

  • http://www.jamesdeangelis.com James De Angelis

    Very humbled to appear amongst some of the other really strong designers here. Otherwise a quality post too, web design needs this sort of activity to be pushed forward!

  • http://www.kingjason.co.uk Jason King

    My next website will have black text on a black background with huge animated coal miners. You have shown me the way! Seriously though, I enjoyed playing with some of these websites and thank goodness not everyone follows the same rules.

  • http://maddon.net Madeline Ong

    Rule #1: Do Not Display the Horizontal Scroll Bar

    It’s okay to break this rule on artistic sites, personal sites, and sites targeting the youth. But for large commercial sites with a broad user base, or for sites targeting middle-aged people or seniors, we should probably stick to the standard.

    Rule #2: Use a Minimal Number of Font Faces

    Links LA might not be a good example to give; the different fonts are more art than text, so it doesn’t count.

    Rule #3: Do Not Use Too Many Colors

    Yes, this rule should be broken more often… but carefully. :)

    Rule #4: Make Your Site’s Goal Obvious

    It’s hard to break this rule without annoying and/or confusing visitors. Isn’t design about communication, after all?

    I think the reason why we (web designers) think it might be okay is that we’re used to web design. We know when a design element or user experience is uncommon, and if it’s particularly sleek, we appreciate it. And we know a portfolio site or CSS gallery when we see one. But regular visitors might not get it, and then bounce away.

    Rule #5: Navigation Should Be Easy To Figure Out

    It SHOULD be easy to figure out. See above.

    Rule #6: Use Different Colors for the Text and Background

    I didn’t know this was a rule. :)

    Rule #7: Don’t Put Animation in the Way of Your Content

    The spider is adorable. And yes, this is probably one of the few ways you could break this rule gracefully.

    Rule #8: Stick to Web-Safe Fonts

    Perhaps the rule should be changed to “Stick to Web-Safe Fonts in Body Text,” since using custom fonts for headers is all the rage these days. Two other downsides: 1) AdBlockPlus places a little Block button next to sIFR headings. 2) bad web designers are now free to choose fonts that are very hard to read.

    Rule #9: Don’t Have a Splash/Landing Page

    I remember circa 1999 when so many sites had splash pages. Oh, how the world has changed.

    Rule #10: Don’t use Tables

    LOL! Thank you for adding a little fun to an otherwise serious article. :)

  • http://blogposition.com.br leandro

    benek and Tartelin website scroll doesn’t work on Chrome… :/

  • http://www.tndmedia.nl TND webdesign

    That is great, thanks!

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    Appreciate the table joke as well. Great article. Rules are meant to be broken as long as you can fully justify their means.

  • http://swellcss.com CSS Gallery

    Great list. I have to second the idea about not having splash pages.

  • http://www.getafreelancer247.com/ Alisa Rogers

    A good collection. I would say that just use the one that you need, I think the author not really want you to use everything here, we all know that we have our own style, we use different tools to design those tools we are comfortable using. This is just a variety of tools that maybe one of these are your must-have-tools

  • http://www.inowweb.com http://www.inowweb.com

    Thanks for the information. Very helpful. I have been looking for an article like this!

  • http://www.renderings4u.com Patricia Vandivort

    Interesting information – thanks. I am just starting to try to find out about internet marketing and am a print designer trying to learn about web design.

  • http://swapnil.com.np swapnil

    LOL the table joke was the best one. I agree with most of these – but I really don’t think it’s a good idea to use dynamic text embeds.

    Otherwise, this post is truly very very helful.

  • Yo

    So with #10 you’re saying that tables should never be used right, since there’s no good example of where tables are used.

    If that’s not what you’re saying (which some comments seem to indicate), then there’s absolutely no good reason to use tables. Anything that can be done with tables can be done with CSS if you know what you’re doing.

    Rule #5: Navigation Should Be Easy To Figure Out
    If you’re trying to express something artistic , you can break this to an extent. But even on art portfolio pages, you need to make the contact information obvious.

    If I can’t figure out how to get what I want from a site, I’m not going to stick around to be ‘intrigued’.

    Rule #6: Use Different Colors for the Text and Background
    Since when is that a rule? Most sites I’ve done use the same color for the text and background, just lighter and darker shades. I’ve seen it done all over the place. As long as it passes the validator that checks if it’s readable by the visually impaired, you’re good to go.

  • http://www.traxor-designs.com/ Luke Jones

    Niiiiiiiiiice :-)

    The table one made me lol.

  • Shiva

    Tables..! Wow, they are amazing

  • http://www.austraweb.com.au Ginni the web designer

    I upgraded my house long time ago and we’ve been eating our dinner on a div, sometimes a span, for many years now. But seeing this article, I must say that a little bit of that old fashioned table charm wouldn’t hurt. I might get us a small table again.

  • http://www.webdesignsouthyorkshire.com Sheffield Web Deisign

    interesting about the horizontal scroll and how we look at shoes!

  • http://apexfreelancedesigner.com apexfreelancedesigner

    wow… thanks for sharing this very informative article… God bless and more power…

  • http://www.2imahl.fr michaël

    ahahahah… being a webmaster for furniture-selling websites, your #10 really cracked me up

    nice article too ;)

  • http://rupensharma.blogspot.com Rupen Sharma

    This article is interesting. I agree with your take on #2 and #3.

    I strongly disagree with the horizontal scroll bar and the relation between how people browse for shoes in a shoe store. People have always read from left to right, unless you are catering the audience in the Middle East. In shoe stores, even though people browse from left to right, they also look down. In web world, people have already been trained to scroll down. Even if I forgive that, I just don’t like people taking control away from me. Don’t play with my mouse and I will stay for awhile.

    The Navigation bit is also a bit hard to believe. Unless, of course there has been some usability analysis conducted that supports the claim.

    Lastly, Sleepyhero.com hurts my eyes…it’s low on readability.

    • http://www.sleepyhero.com Eli Penner

      Yes, I agree with you that sleepyhero.com is not a very nice site. I’m hoping to redesign it soon. I’ve learned a lot since I created it.

      Thank you for your thoughts. My hope is that people will challenge these “rules” but also that people will challenge me. Comments like yours are definitely my favourite. They definitely add to the article.

  • http://www.xicom.com Web Development

    This looks great! Thanks for sharing this information.

  • http://www.xicom.biz Web Development Services

    Thanks for the information. Very Helpful! I have been looking for an article like this!

  • GB

    Interesting (and yes, the tables one is very funny-ish). However, on some of these, the “different colour for background and font” and the “mystery navigation” for example, you claim “it works”. But it what sense does it “work”? In a design sense or a usability sense? You imply it’s the latter, but where’s the evidence that unintuitive navigation doesn’t just get in the way or that people with disabilities find poor colour contrast manageable on sites like Linksys?

  • http://www.shopfordesigns.com logo design crowdsourcing

    any insight on how to effectively use CSS? what about writing CSS that degrades gracefully? it will be a great way to designing SE Optimized pages that will rank higher in SERPs.

    nice post.

  • http://www.etcshow.com/ badrun

    Yeah right. Break The Rules … Thank you for this post .. I have adopted one of the examples above … Guess which one is?

  • http://www.iandevlin.com Ian Devlin

    Great article and loved the tables comments. Very original!

    I do like the spider on ABA’s site too. As you say, it’s distracting, but not too much so.

  • http://www.junowebdesign.com/ Web Design Agency

    I like Graphic Theraphy personally. Thanks for sharing and I have already bookmarked the page so I could further analyze the rest of the designs.

  • http://the-mil.com Michael

    Just like nearly everyone else, I couldn’t stop laughing at the tables bit.
    Sometimes you just have to use tables, use colour and try and find unique ways to keep people intrigued with your own/client web site….. YEAH!! :P

  • http://www.777icons.com Icon collections

    very very meaningful post. but i am somewhat disappointed as the horizontal scroll bar and the relation between how people browse for shoes in a shoe store. People have always read from left to right, unless you are catering the audience in the Middle East.

  • http://elizawhat.com Elizabeth Kaylene

    I’m so glad that I’m not the only one who was not impressed by this article. It’s been said plenty of times in the comments above, but most of these rules exist for a reason. I don’t care how long you’ve been a designer, how good you think you are, or what you think your priorities should be when building a website, but accessibility and usability should always, always, always come first.

    There is nothing wrong with showing off your skills or lightening up, but a web designer who disses usability is not truly a web designer at all. This article heavily implies that in some cases, usability doesn’t matter, and I’m pretty disappointed in that message. There are great web designers out there who create stunning websites and still put usability first. If you want to see someone who is one of the best at this, go check out Nick La’s work at http://www.ndesign-studio.com/ He is incredibly talented and creative, and yet never fails to build websites that are mostly intuitive to use.

    Just because we are designers doesn’t mean we can do whatever we want.

  • Boobalan

    Good for a beginner…
    Gr8..

  • http://www.xplaye.net Javier Mateos

    Hahaha! Really amazing about the tables point I was like trying to guess, wtf with the tables there? I think it’s pure CSS. Cool one made my day!

  • http://www.tommybrophy.com Tommy

    No. 10 is definately the best advice. I’m redesigning a clients site soon and I’m going to have to figure out a cool place to put in some tables. :P

  • http://planeador.net/blog Sebastián

    i think the joke is not only with the TABLES example; it’s ALL a joke.
    but it seems everybody agree with the other 9 broken rules.

    and that is really dangerous.

  • Steve F

    I think its rather curious that – in an article dealing with permissible offences in design – you have broken two serious ones:
    1) Do not create a very long page without inserting links back to the top of the page at regular intervals, and
    2) Do not create a page full of links to external sites, where the user is likely to be interested in following many or all of them, without making those links open in another tab/window.

  • Steve F

    What Elizabeth Kaylene said +1 :)

  • http://www.facebook.com/mauconline mauco

    very interesting. Thanks for sharing.

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Nice article, there are some very valid points here. . I think when designing a website just use your common sence and put yourself in the shoes of a user not a designer/developer. Or seemingly daft ask your Mother to look at the sites you have designed and ask her opinion :)

  • http://www.edigitalstudios.com Chicago Web Design

    Splash pages are very annoying; They are pointless and just put one more barrier between the user and the pages actual content; Also, I HAAAATE tables.

    • http://dewlillydesign.com/ Anne

      It depends on the type of site you’re designing – splash pages are usually not recommended, but if done right, for the right reasons, it doesn’t have to be another ‘barrier’. Think outside the box.

  • http://ardiimawan.co.cc Ardi Imawan

    Nice picture..!

  • http://twitter.com/xrommelx xRommelx

    i don’t support rule number 10

  • Alex

    Horizontal scrolling with the mouse wheel doesn’t seem to work in Chrome.

  • http://www.etcshow.com/ badrun

    @ Chicago Web Design,
    If your visitors come from search engines, then they will not find the splash page. The visitors who opened your site through a splash page, I think are the people who came as official/special guest, So, let us welcome with a welcome page.

    @ Alex,
    I have a website with a horizontal scroll (based on THW template, thanks to THW), it really does not work in chrome to scroll by mouse, but I can add a button to scroll.

  • http://dewlillydesign.com/ Anne

    A refreshingly different topic! So tired of the gazillion list posts that are all the same regurgitated stuff over and over and … you get my point. You actually have something of substance to share, and you share it well, so much so I read it all the way through! ;)

  • http://justinledelson.com Justin

    Very clever for the tables. lol

  • http://maksofttechnologies.com Web Design Company Maksoft

    Very Helpful but 100% agree with the comment regarding tables . . .

  • http://www.best-website-designer.com Sarah Jones

    Yes, I knew some of these points, but this is a good source of information for all. thanks

  • Dan

    Hilarious (and very helpful otherwise). It really took me a good two minutes to get the tables section. I doff my hat to you, sir, on your excellent and unwavering commitment to dry humor.

  • http://connorcrosby.me Connor Crosby

    I used tables all the time when I first started out with web development. Very nice list, though.

  • http://www.wevio.com Web Design Company Wevio

    Using too many colors and fonts in web design doesnt really look good on eyes. I completely agree with the 10-points highlighted above. Thanks for the post…

  • http://www.altwebmedia.com/ Alt Web Design

    Very good article. Great points. Thank you.

  • http://www.webcatch.co.uk Nottingham Web Design

    As many have said before me, great post and I love #10 about the tables! I can’t belive it’s nearly 2011 and I’m still seeing a great number of websites written in tables. If it’s in tables, it’s probably time for a redesign.

  • http://www.webdesignstuff.co/ Web Design Stuff

    Its a very useful article. Bookmarked.

  • http://www.offenmarkt.com Megha

    I completely agree with Anne. We should think somewhat different from others. If you can properly use your innovative ideas, I am sure you will get success.

  • http://www.asteritsolutions.com/ Web Design

    Very nice list of rules .
    I generaly agree with all of these points because for a good wed designer these rules can help a lot specially for a beginner..

    Thanks

  • http://www.veztekusa.com Faraz

    A very useful article and very interesting to read and go through all the examples.The way of explaining the points with examples is just great for readers to understand.

  • http://www.mindxstuduio.com mindxstudio

    Thanks for sharing web design rules, happy to learn it, great post.