Breaking All The Rules
I have been doing a lot of thinking lately with regards to design and the rules we bind ourselves within. In the next couple of days (maybe today) I will be reintroducing a site that will begin to showcase my thoughts from the previous weeks and start to apply these thoughts across a couple of my sites — Whitespace included.
Within our designs we have applied both spoken and unspoken rules that every once in a while get broken. When this occurs it seems to start a revolution amongst the townsfolk who contemplate whether the idea is genius or not. In the end though, sites that follow the norm will always dominate because they wouldn’t be in the norm otherwise. I am sure though that none of us simply wish to be part of the norm when we know we can strive above it.
With this in mind here is a list of rules that I think sites follow to keep them in the norm.
- Logo at the top
- Left-aligned or center-aligned design
- Recent entries/comments on all pages
- Comments under entry
- Two or three column layout
- Having a logo on the site
- More than one entry on the homepage
- More ads equals more chance to make money
- Bigger is better
- Smaller is cooler
There are a couple of sites that I am sure you have come across that don’t follow these conventions or rules. Garrett’s site is one column and it seems to be effective in its presentation of content. He is by no means the first to use one column and he certainly won’t be the last, but I brought him up because it was the last one of recent memory that I could think of.
I don’t believe that anyone should attempt to break these standards since they are there for a reason. They just work. However, I wonder if we get so caught up in them that as designers we no longer attempt to stretch the limits that we have set for ourselves.
In any case I look forward to sharing my thoughts on this topic further and in applying the new principles that I am setting for myself because I think it will make this site and all the other sites involved much better.
As for the comments, if you could point me to some sites/blogs that break some of the rules that I have listed above I would greatly appreciate it.
Related reading:
I have an issue with you and the web world thinking the logo should be up top…..I used to be in the commercial printing business. We used to always tell the customer “Get them interested first, then let them know who you are”. Especially true if designing a flyer. I agree a logo should be used on every page. A couple of benefits to putting the logo, or heading on the bottom…..the content gets read first. Both the reader and spiders would like that! I’m just making some real fast comments. When I read your blog, am I reading a newsletter? ….or a booklet…or a book? Imagine a book with a header on each page. I would think with CSS you could keep a header on the bottom at all times. Thanks for your time. I wish I had time for more.
By Paul lamach on May 11, 2005 12:27 pm
An interesting deviation I tried to explain (with mixed success) today is having the main navigation at the bottom of each page, and not the top.
The critique was “how’s the visitor going to know where to find the rest of the site?”. On the home page though, the content layers are short enough (purposefully) for the main nav to fit in properly, and thus they see the different layout first-off. I think that people are smart enough to pick up that this continues throughout, but my client doesn’t think so.
By Martin on May 11, 2005 12:28 pm
Paul: That is my thinking exactly! I will be doing some of my sites with the logo at the bottom simply because I think the content should be known first. Seriously though you just articulated what I have been thinking this past week.
Obviously it goes against major standards and 99% of the clients will demand to have their logo front and center, but I have the luxury of running my own sites so we will see how it works out.
Martin: Another idea I have been contemplating which goes along with my thoughts on logo placement. Another case though where it won’t work for the majority of sites, but with careful thought can work perfectly in the right place at the right time.
By Scrivs on May 11, 2005 12:36 pm
Martin: I would caution you about putting the navigation on the bottom. I believe you want your navigation to contain keywords and want spiders to read keywords first. What I was thinking with Navigation is one line for the major folders, then as the folders were selcted the second line would carry the navigation from there. Very funny, my customers always wanted their business name up top. I used to have great ads cut out to show them how the big guys do it.
By Paul Lamach on May 11, 2005 2:18 pm
As for the logo and navigation, I obviously don’t really like either for my site. The logo, in my opinion, isn’t as much of a branding matter as it is an anchor the helps people know where they are. Since it is almost universally also used as a link to a sites home page, it serves a very common purpose that many people are comfortable with.
That being said, I’m a huge fan of questioning the paradigm, and I do think it’s possible to pull of relocating logos. I’d love to see sites that execute the idea successfully.
As for navigation, same reasoning, but I’m open to good examples.
By Garrett on May 11, 2005 2:28 pm
I think the ideas you are talking about Scrivs will definitly work when it comes to Blogs and your personal sites, but I think the methods used all depends on the TYPE of site.
If its a corporate site like Microsoft or whatever, then having the logo at the bottom will not cut it. Its also about Brand identity. The logo is typically used to associate a company’s image. If its at the bottom and the content is at the top, how does the site distinguish itself from competitors if the content across the board is similar?
I am interested to see what you do and what type of feedback it will receive. Good luck.
By Bryan on May 11, 2005 2:29 pm
While it is always good to be innovative, remember that the norm is the norm because it works.
For instance, designers put the logo on the top so that visitors know where they are. A proper logo should not be over 200 pixels square, so there is not much real estate lost from it. A quick scroll down and it is out of your screen completely.
Paul, print is much different than the web. If your print piece has the logo on the bottom of the page, it is always in peripheral vision and in a millisecond the eye can focus on it. Putting a logo on the bottom of a web page removes the logo from sight and makes it visible only if the visitor scrolls down by chance.
Remember that (in most cases) a website is not a showcase of what ideas you can think up, but a way to display information and convey a message. In the instance of a blog, new techniques (new, that is, to the designer) can sometimes hurt the content and cutting edge can make for dull reading.
Check out the following links:
http://searchenginewatch.com/searchday/article.php/3490486
http://www.useit.com/alertbox/20000514.html
By William Stewart on May 11, 2005 2:39 pm
I should have mentioned it earlier, but Joseph Wain has done just this with his site Niggle. The logo is halfway down the page.
It might not work for a corporate site, but I believe he executed the idea amazingly well. His design and IA make his site one of my top 5 favorites of all time. It’s good to be innovative and experiment.
By Garrett on May 11, 2005 2:45 pm
Yea William I know web is diferent from print. With CSS you can keep the header on the bottom of the page at all times. With css you can keep the header always at the top. Matters not if the header is up top, or at the bottom….it takes up the same amount of space. therefore hit them with the content first….they can always see where they are! I am thinking a small strip at the bottom. I wish I had the layout done on my web site so i could show you.
By Paul Lamach on May 11, 2005 2:50 pm
Love that Niggle Site. Very Clean! F R E S H !
Of course it doesn’t show with smaller browser size……Thanks for making me think a littl;e Scrivs…keep up the good work. By the way…good design principals work on any visual medium.
By Paul Lamach on May 11, 2005 2:54 pm
That Niggle site is hot. Both logo and navigation are not at the top of the page. Implements a lot of things I have been thinking of. Love it.
By Scrivs on May 11, 2005 3:30 pm
Even their Macslack site is hot. Thanks the link Garrett.
By Scrivs on May 11, 2005 3:32 pm
Hi Scrivs,
You might be interested in this post I did:
http://cre8d-design.com/designerblogs/2005/seven-layouts/
which categorises 7 different blog layouts… while there’s subtle variation, there’s a lot in common too.
By Rachel C on May 11, 2005 3:34 pm
Looks like Garrett already outed me, but I believe that my blog, still being a blog and having bloggy qualities, successfully breaks a number of those conventions. (And thanks for the compliments, guys!)
It’s easy to swim around in this discussion [earlier] when the focus is the blog archetype; try applying the same dissatisfaction to other facets of design or corporate websites and that’s another ball of worms altogether because what works… works.
That said, I do understand what you mean, though I would have phrased it “I’m tired of the designoblogosphere”.
Two observations:
1) I was surprised to see that a large percentage ofthe high-rated entries on CSS Reboot are (or at least were early on — now everything’s mysteriously 3 stars) graphic-heavy and glitzy to some extent even if they share an 80% layout similarity with other, lower-rated sites.
2) This is crude, possibly unfair and certainly inaccurate, but sometimes the defining factor in a design within the blogodesignosphere being heralded as slick and oh-la-la is the header graphic alone. That is, take two blog-esque websites with similar layout characteristics, give one some awesome header graphic done up by a good designer, and give then other a plain, boring header and guess which one shows up in CSSVault next week.
So (and I’ll say this quickly and leave the room before I get flamed) the trend I’m seeing is that all the kids like me who grew up learning from the web and practicing design on the web as a means of learning what design is and how to do it right and wrong, they’re all gravitating towards the old school of Flash glitz: graphics, sex appeal, shit flying in from stage left (ok, maybe not that) and that sort of thing. This I say after following CSSVault, Stylegala etc for a number of months. Seriously, tell me that if someone pulled a gmunk in CSS tomorrow (accessibility excused, sans-Flash and sans-load time [7 megabytes?!]) it wouldn’t make the rounds quickly and receive praise as evolutionary.
By Joseph Wain on May 11, 2005 4:00 pm
Don’t forget about perhaps the least broken rule of all: “not putting bullets inside the gutter of your page”. Broken first, right here on Whitespace! :)
By Mike D. on May 11, 2005 5:00 pm
As for unusual comment techniques, I have to toot my own horn with having comments on the side.
By Jonathan Snook on May 11, 2005 5:03 pm
I understand trying to break out of the usual paradigm, but I also understand doing things a certain way because I like it, and I find it usable (esp. important for personal sites). Different is good, but if it’s not really better (or equal), then what?
That being said, I really do like to see people trying new things — a stagnant web would be boring.
By Nicole on May 11, 2005 5:06 pm
Jonathan I was thinking of your site when writing about this, but couldn’t think of where I saw it. I like the comment box on the side.
By Scrivs on May 11, 2005 5:09 pm
Nicole, you are correct in that things shouldn’t be done just to be different and should only be done differently if there is an improvement. I do think though that we get caught up in doing things that are known to work that we don’t even think to see if there is a better way.
By Scrivs on May 11, 2005 5:10 pm
That Niggle site is fun, definitely. What a refreshing way to design a site.
And Jonathan Snook: babe, I also do the comments form on the side. ;-) Though, I don’t force the content area to move with scrolling.
So Joseph, I’m a bit confused over where your stance is on design getting more glitzy, Flash-era-esque. For or against?
By Lea on May 11, 2005 6:25 pm
While there are many “better ways” to be discovered in the web I slightly doubt that tossing logo and nav down the page is one of them. It’s like moving
door knob down the doors. Toddlers may enjoy it but it would be not so convinient for adults.
Visitor coming from search engine sees content first, that’s good, but the first wish is to know “where am I?” and the idiom of answering to this question (logo and nav on top) is so good, so old and so widly accepted that to shake it one must come with extremely better version - which is unlikely.
When I do not find things at usual places I am conufsed (gone is Cooper’s “Don’t make me feel stupid”) and I have to look for them (gone is Krug’s “Don’t make me think”).
So, while breaking all the rules may be good for purpose of being different (and being different will surely win simpathy of fellow designers) but
I wouldn’t try it on “general purpose” site.
That said some of the rules you are going to break look like worth breaking for me (the last ones).
I hope you will indead discover some better ways :)
By Rimantas on May 11, 2005 6:36 pm
I’m a fan of losing the logo altogether or moving it to a more subtle position. After all, if your logo translates well into a favicon, it’s really redundant anyway. I also wonder why more sites don’t try to implement a landscape format since that’s what the majority of web clients render. People treating a website like a conventional print piece has always perplexed me.
By mahalie on May 11, 2005 6:38 pm
Lea: Strangely enough, your website (just clicked your link and saw) was my favorite out of all the CSS Reboot entries, and here we are crossing comment paths! We should collaborate on something—feel free to drop me a line.
Superfluous glitz I’m not keen on, of course; hopefully no good designer is. The only thing wrong with the 2advanced era is that “those” websites were bloated, shiny for the sake of being shiny, and hard to use.
If designers remember lessons learned in past years of pushing for standards, acessibility, good IA and usability, then no, I’m not at all against the upswing in visually-strong websites. If Luke remembers Yoda’s words, the force will stay in balance.
By Joseph Wain on May 11, 2005 6:58 pm
I was just thinking about this the other day. It seems like everyone is so caught up in standards. Web standards are good, design standards are to a point. But when in history has innovation come from not doing something different and taking a risk? Persoanally I know I’m fuck*d because I have been molded not to be creative, I take a task, I make it work, no form just functionality…god I hate code.
If you have a unique, creative, and potenetially good idea…why not embrace it, and at least test it out? It seems like design is waiting for something big again. We have an unlimited amount of resources to use, but we are affraid of using them. When did the creative people start making descisions on what is “the norm?”
As for me, I am definetly not creative anymore. I should start smoking pot again just to see if I can get a good idea. I do however try to take what I know works and better it. Now with total disrgard to keeping my next project secret:
http://www.popcultureretard.com/layout/
Was something I created at work obviously based off many of things Paul has already done. Do not validate it, I have InterDev at work…nothing else. It was based off what I copy and pasted, and Paul’s idea. I also added something I felt was kind of needed, dual style sheets. I hate whitespace that lasts a week in high resolutions, but I don’t try to alienate 800×600 users.
Now I took something good and tried to put my own spin on it, and see if I couldn’t better it.
http://www.popcultureretard.com/layout2/
Now how much better this truly is, I have no idea. I for some reason decided I wanted to go multi-resolution and fell in love with the idea. I have a few other people who will be working on this project with me, and they seem to like it. But in the end all I did was take something that worked and tried to improve upon it. I broke none of the rules. I think in the end I will implement sIFR, because it is one of the many great tools, utilites, concepts, ideas that we have available to us, but don’t use. I getting tired of having so mcuh good and not utilizing it…fuckin* do it already.
By Ryan Latham on May 11, 2005 7:47 pm
Even as we speak (so to speak) I’ve got illustrator open and am working on a layout with the actual comments - not just the comment box - on the side. There are 3 columns, one for the article, one for the comments, and one featuring a nested tree of commentator names. Users have the option of clicking a check box on a previous comment (a la brilliant 1976design.com) when leaving their message to refer back up to it. The nested tree will be updated to show this new relationship. Users will have the ability to scroll through the list like normal, or click on the commentator’s name to jump to that particular comment.
The idea is to make the comment process more of a forum for a discussion within the context of that particular post.
By Peter Flaschner on May 11, 2005 11:17 pm
While we need sites out there on the edge, it is important to remember that the majority of sites are there to make money directly from Joe Public.
Jakob Neilsen (http://useit.com/)may be boring, but there is a strong core of truth in his mantra. There are certain elements of the page which, whether or not we think they are optimal, are now the accepted norm for placement, and Joe Public needs them there if they are going to convert on that website - otherwise they will get confused and the site will not make money.
For your personal site - go for it, break all the rules, with my applause. But when it comes down to brass tacks and coins - stick with the tried and true to make your site more accessible
By Lea, What's my IP Address? on May 12, 2005 12:06 am
Mike doesn’t try to make money off his site, and it is one of my favorite reads. He writes to write, and because he has something to say. He pushes the envelope using methods that are not “standard.” And I love it. Paul makes sites that have money making potential, his designs are often bland like mine.
The point is. Mike has a great design, which pushes technology a little bit further, while still having good content. Great content will exist no matter what, regardless of design; good or bad. If you have the skill why not push it?
By Ryan Latham on May 12, 2005 12:34 am
My site doesn’t conform to at least two of the rules. I don’t have recent entries on every page, only the blog section, and I only have one ad, and that’s for busted tees which is awesome and their image is pretty hot.
That’s about it. Sorry, I didn’t break any real rules, though I do have a site I did for a school project that uses a right aligned column for text on the about page. Other than that, I’m pretty in the norm. God I hate the norms. That’s pretty much what I call morning people for those of you not in the know.
By Joe Clay on May 12, 2005 3:00 am
I think one of the coolest things about blogs is that you can break the rules. Most designers are never allowed to really “break” the rules day to day. It’s a fine line between breaking the rules because you know them and just plain breaking them - and I think that’s where good designers always win out.
By Joachim on May 12, 2005 5:04 am
Niggle is hot… and on larger resolutions there is no doubt exactly where the logo and navigation are and therfore where I am.
Macslack is a little harder… by matching the domain name I can see that ah… macslack might be the site identification but I had to actually look for it and it disturbs my inner obsessive compulsiveness.
I think the difference is that macslack is confined to one section of the site( a local variable so to speak) where with niggle it’s obviously global.
Breaking rules is fun and if blogs continue to show that some rules work just as well being broken it will slide over into commercial work. Not even a year ago I would get dirty looks and heated arguments over experimenting with right side navigation and now it’s all over the place.
The whole basis for a lot of rules is not that they suck… it’s that they aren’t the norm so people don’t expect them and you should always give people what they expect, even if it may not be the best solution. To have any growth there has to be someplace that can train people to expect new things.
By Sunshine on May 12, 2005 9:27 am
These ‘norms’ and ‘rules’ that everyone seems so eager to break are design principles that have evolved over time. They’re not just made up, and the Web didn’t create them either. In design parlance, these visual ‘rules’ are simply called visual heirarchy. Like a newspaper, your headline (header) is dominant. Why? So it will grab you. You will also see the name of the paper you’re reading too (logo). Your bylines are subdominant and your content is subordinate. Typically a top-to-bottom, left-to-right approach (Western).
Did you ever turn in a paper in college with your name and info at the bottom of the document? Why propose this on the Web? Navigation on the bottom is possible (Blogger.com) as long as it can easily be identified is the user’s viewing window. I agree that the type of site has much to say about its design. But being different just to be different will not (as mentioned in a post above) win you much sympathy. Designing for design’s sake is one thing. But if people here are serious about design for content on the Web to be consumed by the masses (and make money), they should look at working with these ‘norms’ because as design elements, they really work to convey your message.
By Jason on May 12, 2005 9:53 am
Well I never proposed moving the headers from their proper place and I don’t think it’s fair to bring all the rules from the print world over to an online medium.
As for turning papers in while in college, I do recall simply having a title page with my name and then never seeing it again. So then technically if I was to bring that rule over from the print world, I would go back to having a splash page with my logo and disregard it completely on the rest of my pages.
I have one major site in mind that broke almost all the rules when it came to design and that company seems to be doing pretty damn well as of late. (*hint* They made Basecamp…)
By Scrivs on May 12, 2005 10:07 am
Scrivs,
I was referring to comment posts. You did not suggest removing headers. Your example of 37 Signals is a great one because it proves that conventional design methods can be tweaked to work on the web. The header area (top) contains their logo (albeit on the right). The main driving navigation to thrust you into their site is 3 graphical links (Basecamp, Backpackit, Ta-da). If you as a user still need more you can easily find supporting info put together in a beautiful two-column layout. The left is kudos and the right is faqs and links to drive you in. The footer at the bottom contains links, copyright, contact, etc. Nothing here that is bucking the ‘rules’. Instead a great usage of designing content for the Web.
By Jason on May 12, 2005 10:39 am
Ah, gotcha Jason. Sorry for the confusion.
By Scrivs on May 12, 2005 11:09 am
Joseph, I am beyond flattered! “Favourite”? That’s high honours to me. I’ll definitely hit you up on e-mail. ;-)
Meanwhile, I agree with you on the visual trends. Just as long as the choices have meaning (i.e. not random grapical vomit), I don’t have any problem with websites being more illustrative or graphically stimulating.
And on a side note, I love it when people insert geeky Star Wars quotes to further their point. :-D
By Lea on May 12, 2005 11:18 am
I think I’ve broken some of those rules. :)
On my pet project site, I have comments next to the article.
On my blog, I moved blocks a bit left or right, to remove the column look while still keeping things in order.
To really rebak things out of the box, you need to control the content very tightly. Even two degrees of freedom you left untouched can break the layout pretty easily in the hands of anyone but you.
But it’s fun to try it out, none the less.
By Aleksandar on May 12, 2005 11:56 am
Wading back into this fray:
Rules only became rules because someone at some time tried something new that worked better than what was there before.
By Peter Flaschner on May 12, 2005 1:59 pm
Interesting discussion and I love seeing the sites that break the general mold.
However, IMHO there are no rules.
By Keith on May 12, 2005 2:43 pm
Ditto.
By Martin on May 12, 2005 4:24 pm
I’m bored of vertical scrolling. Bored stiff. I’ve been wanting to build a horizontal scrolling site for about a year, but just find CSS lacking. Sure, I could build it using TABLEs for layout, but where’s the pizzaz in that?
By Bruce Boughton on May 15, 2005 6:11 pm