A Single Article
Read it, comment, and share it with your friendsTop 10 Ways to Uglify Your Blog
Take this as a list of things not to do, unless ugly (un)design is your intention. These are the 10 worst elements I’ve seen around the blogosphere. You have probably noticed them too. I won’t link any of the examples here out of courtesy to the blogs I found them on. Here are the elements in order of increasing uglification:
- 10. Orange XML/RSS Buttons
- It doesn’t get much worse than plain white text on a rectangular orange button. Do these match with any layout at all? How many orange blogs exist? Did you know orange makes people hungry? I’m hungry. Unless your blog is about food, that is not a good effect.
- 9. Neutral Submit Buttons
- If you modify the CSS styling on your <input>s, and you are using <input>s for your submit buttons, this is what Firefox users will see. Plain, ugly buttons. The best way to prevent this is to use <button>s for your submit buttons; they do the job just fine and keep your styling separate.
- 8. Long Blogrolls
- Long blogrolls say, “Look here, this is a list of 100 other blogs you could read, just the titles because there is no need to make a convincing case for any of them.” Who has time to check 100 different links? Do you think your readers are that bored? Nevermind that this many links is a huge usability problem, or that the relevance of these links is usually nill when they are repeated on every page of your blog. I say have 100 links in your blogroll, but please, show 10 at a time.
- 7. Tag Clouds
- These are hideous. For all the structured and well organized text on your page, here lies this blob of often unrelated tags, with random sizes, that sort of vomit at your users and say, “Look at us! We are ugly and proud!”
- 6. Social Bookmarking Buttons
- Let me tell you something about users of social bookmarking sites; they have already integrated their services into their internet use. They don’t need your buttons on your site any more than they need them on every other webpage they visit. All these buttons do is create clutter. They also look amazingly stupid at the bottom of every blog entry.
- 5. XHTML/CSS Buttons
- Do any of your readers care about what doctype your site uses or how it is styled? These buttons are nothing more than pretentious, if not totally useless. Keep what is under the hood hidden.
- 4. 80×15 Buttons
- More irrelevant clutter for your blog. These were never cool looking, and like most everything else on this list, they never fit with any blog design. And nobody cares about your support for Wikipedia or Greenpeace.
- 3. Feedreader Buttons
- These buttons are not equal sizes, nor one bit similar in their style, and to top it all off, a couple look like they were designed by small brainless children. Monkey children. Much like the rest of Web 2.0.
- 2. Ads, ads, ads
Come to think of it, I could use some sort of credit alternative. Nevermind everyone, this ad is totally useful, and form follows function. I’m going to sign up for this offer right now.
In all honesty, here are the worst offenders in blog ads: Google/Yahoo/etc. Javascript ads, Blogads, any sort of Flash or popup ads, and any ad that sits in the body of a post. If you want to advertise on your blog without killing the look, go with something clean like simple images or Text Link Ads.
- 1. Your Picture
- Remember when people used to say “you have a face for radio?” Well, you have a face for blogging. Wear it proud.
I’m sure I missed a few things (I’ve been working on this entry long enough), so feel free to share your blog design pet peeves in the comments. Now go forth and redesign your blogs!
Get a Trackback link
27 Trackbacks/Pingbacks
Other blogs referencing this article61 Comments
Responses to my articleI agree with all of these. Tag clouds are a particular favourite hate of mine - fine in their place, but their place isn’t on a blog. It’s somewhere buried deep in the bowels of del.icio.us.
Frappr, “xth-most-visited link” tooltips, and pretty much anything on JoeMyGod, the ugliest blog not hosted on MySpace.
I have to disagree on the XML buttons. They were pretty much the standard icon for representing XML, so it was just natural to use them. True enough, you could modify it to fit better but a) not everyone knows how and b) they wouldn’t be a “standard”, universally recognised representation then.
The same applies for the new, updated one. That’s still orange. Why’s that any different?
I kind of disagree with your last point, too. Putting a picture up is just a way of personalising your blog. Nothing wrong with that.
Good points on everything else, though. And I second Joe on the “xth-most-visited link” tooltips.
JoeMyGod wins the award for ugliest favicon, and he definitely scores in the self-picture department. Good example there.
Rich: The difference with the new icon is they are very customizable; users are encouraged to play with the colors to make them fit the design. In my opinion, they are a huge improvement.
But those RSS buttons are last on the list for a reason; they aren’t nearly as bad as the rest of the items.
And I think personal pictures should be on the about page, not on every single page of the blog. If people want to see your face, then they’ll click your about link. Otherwise, they just want to read.
Are you saying Scoble isn’t an attractive guy?
Not as attractive as you, Paul.
Didn’t know this was state the obvious day, but it works for me.
Wow, good points. The thought that these items were ugly was always there subconsciously, but I’ve never heard it articulated.
Bueno… en la mayor parte si que estoy de acuerdo contigo Christian, pero algunas cosas son demasiado tremendas, y en cierto tipo de blogs o webs no quedan mal, vamos, si le gusta al autor pues estupendo. En mi caso, me encanta poner los sellos de XHTML y CSS, es mi opinión
Cada uno tiene sus opiniones; eso es la belleza del Internet.
Blogging:
Latest Photos
Blogroll
Myflickr
My webawards
Archives
Elsewhere
Sorry, I closed comments.
My Ipod
My Last.FM tracklist
A musical baton
Subscribe to my playlist: RSS
Life blogging the birth of my son
The britpack logo
And above all 9Rules (the bump sticker to blog paradise)
Johan, you are hilarious. Thanks for the laugh.
Can’t disagree with too many but the the XML button, for reasons already mentioned.
My biggest annoyanges are huge blogrolls, especially when the blogrolls are 80×15 buttons
You forgot sIFR.
I disagree with the one about the W3C buttons. They’re not so big a deal now that W3C compliance has become common, but in the bad old days before supporting Firefox became a necessity, I really liked seeing them. It was reassuring. They’re also convenient for the webmaster because they give you a quick way of checking that you didn’t accidentally break your HTML after making a change.
Uh dude, no offense, but your blog is kind of ugly …
Daniel: Firefox Web Developer extension makes that very easy
dude: Get over it.
Heh. You’re right with all points with one exclusion - some of the things could be redrawed =)
Mike: Good point, and redrawing them is something designers should do.
Shii is right about sIFR. And to further expound that subject, Flash as a whole.
Yes, all excellent points. Another thing I hate is having absolutely no style at all (scoble, dave winer). At least change the font. Blogrolls can be hideous. That’s why we put ours in the footer, along with the other information people don’t really care about. That’s what footers are good for. I hate RSS feeds that are shortened.
Luckily for us Blogging is a great equalizer, and we no longer have to be pretty to be popular. No good reason to hide your face!
Can’t stand those Social Bookmarking icons though…
Like always, you help me to better my designs.
Thanks for helping to give me a good reason to rid my site of so many things. Hmmm. Maybe you used my site to put together that list?
I got rid of the HUGE tag cloud - what a waste of space! People can go straight to my del.icio.us/slh list if they feel compelled.
Still more changes to go thanks to your list. Might even do a complete redesign. Wouldn’t be the first time…
Aww. But I like 80×15 buttons.
Good points, but still. Those ads still work in bringing in the earnings. The top earning ads are even those large rectangles. Sure cluttler should be removed from blogs but the points you’ve made are not universal, unless all of us think like the way that you do.
Still this was a great read and I did picked up a thing or two.
More than anything else, this post is an excellent demonstration of contrarian blogging.
Well done!
The absolute WORST by FAR is the addition of videos–especially those that begin playing immediately. If I want to listen to music, I’ll turn on my radio, thank you! Second-worst are buttons that move: scroll, flash, etc. They are distracting, and they give me a headache. I have to be very motivated to read any sites with either of these things.
You make a reference to web 2.0 on point number 3, implying that it was designed by brainless monkey children (funny by the way), but your own design is very 2.0 IMHO. A bit contradictory, yes?
Otherwise, all good points except perhaps the use of ads. The key is moderation… less is more. It’s when people use ads so extensively that it dilutes their content to the point where it’s not worth the time to sift through and see if they have anything useful or interesting to say.
You forgot animated gifs? I really hate those and anything clientside. But I love Opera because I can turn off the Css and the pictures if I want to.
And …I am already working on my re-design - who isn’t?
I love it, excellent article. Everything you wrote about I agree with, I admit I have done some of these things in the past but have since realized, dang that’s ugly. LOL
Haha, I was going to add the Social Bookmarking sites plugin because I don’t use them, I though they were useful. To hell with them.
Great post, but I also think that trackbacks and pingbacks are the most ugly and stupid things ever.
I very much enjoyed your post. As a confirmed TechnoDolt™, I can’t do most of the stuff you decry, so it’s no sign of conscious good design that it doesn’t appear on my blog.
I must confess that I am guilty of one of the “10 deadly sins,” however: my picture appears on each page of my blog.
Oh, well.
Best,
Joe
http://www.bookofjoe.com
‘World’s most popular blogging anesthesiologist’
I think, I succeeded…
I’m not sure! LOL
probably I have a bit long blogroll, but not 100 of course!
omar
Ough, well, you can customize those ugly buttons with some skills in photoshop, so it fits your layout, especially the 80X15 buttons.
Haha Scoble. Man, do I miss GFY sometimes.
You forgot the stupid userbars. Though mainly used on forums, I’ve seen people include them in their blog footers.
Makes me want to cry.
Scrotalizer: I miss GFY too.
Those userbars are like crap on a stick… well, without the stick.
ROFL … I’m so guilty of a couple of these!
YES!!! 0 out of 10.
Do I get a prize?
Paul: Of course! Your prize is peace of mind
XHTML/CSS Buttons when the page doesnt validate.
White text on black. The only time this happens in the “real world” is at school on blackboards. It was difficult to read then, why try to imitate it on the web?
Liberta: You should read this post: Roger, we have a problem. It’s about the various opinions over white-on-black and variations of that.
I must disagree with you regarding the XML/RSS Buttons: they sure are ugly and mean nothing to a lot of people. But the meaning of those is to encourage people to use valid XML and RSS on their websites. The people who know the meaning of valid XML and CSS realise the importance of accessibility. Accessibility becomes a trend (and this is a good thing)!
Tudor: You can’t encourage anyone but the geekiest of geeks to use XML/RSS/CSS because all that stuff means nothing to the average user. As for the geekiest of geeks, there’s no point in preaching to the choir. In the end, you have a very noble blog that is a poster for accessibility… and ugly.
Thanks for the advice dude! Lots of love from the true north strong and free!
All this “accessibility” hype is crap - it’s like that mysterious group of people that decided you can’t wear white after labour day. I’ve been working in this industry for close to 10 years now and I will Never put one of those dumb ass W3C / CSS / XML buttons on my site, those badges are for the accessibility cultists, so they can pat each other on the back. Personally I don’t want to spend days staring blankly at the code of my site trying to find out how to float that comment div and not piss off any validaters, or have my site break in dumb ass IE. I really do have better things to do with my time… like stare out the window at that piece of plastic bag stuck on my tree… squirrel nailing a pine cone… I also don’t enjoy the migraine I get when I’m stuck staring at a white monitor all day with giant plain text in my face, for goodness sakes people, eat some carrots! Lets face it, most blogs are by noobs who are just having fun, they don’t care what any of us say about design or structure, it’s their online diary / big comfy couch / pj sleep over party, and if they want to link to every person they know to boost their self esteem, they’re going to. If they really really like the colour pink with bright green text and are some how are able to read it through the glare of their monitors, then ya know they are going to do it.
Sorry for the long comment - and I’m really not an angry person! Peeve - I loath gansta talk in blog entries - just what the heck is that all about?!
Take a breather there, Dawn. I mean… jigga, chill. Keep it on da lo’.
yup, breathing -
As, much as I hate to say it - and please forgive me -
but WHITE text on a BLACK background is something that I think should be avoided.
Yep…. good thing this text is not white and this background is not black
Yeah, tell him Christian!
Close but no cigar, hey?
I think that super mario mushroom down in the bottom right corner more than makes up for any design flaws.
How can ya not like him?
He’s my favorite.
For the record, the upcoming redesign of this site will be much easier on your eyes.
I agree with all of them. And Google Adsense (and Yahoo) generates some heinous ugly (and non-validating) code. But! They pay so well….
While I’m still working on my blog’s prettiness I don’t mind going to other blogs and seeing the validation and reader buttons (too many can be very ugly). What I hate is seeing the buttons with cutesy flashing dots and words around and in them. They bother my eyes and I will leave a blog as a result.
True true, anything flashy or animated will usually turn visitors off. I wish more website owners would realize this.
It’s a good list.
One thing I don’t agree with, though: the picture. I don’t have one on mine, but I think people want to know who is writing what they’re reading. Maybe you don’t look like Robert Redford — hey, Robert Redford doesn’t look like Robert Redford these days. Take the best snap you can and smile.
It’s part of the writer/reader connection. Of course, the best part is solid content.
I’ll throw in a per peeve I mentioned on my site today: visitor counters. Nobody believes them, and they have no reader benefit. What an eyesore.
c
kit: Like I said, the picture is fine on the About page (that’s what I do), but after a while seeing it on every page can be dull, especially if the writer has, God forbid, a face for radio
As for the hit counters, you are totally right, and I can’t believe some sites still have those.
Hear hear! Jeez, it really gets to me when something like this happens.
I agree with some of what you said, but the one I cant is the use of your picture. Often times I read a blog and I find it interesting and would like to see the author of the blog. It adds an amount of personalization. If the person looked like Bradd Pitt or Angelina i highly doubt it would be too much of an issue
Hello guys, i’m italian, sorry if my english sounds funny (i hope not).
When i read this post i thought: great! those are good points… but immediately after… well no, wait a moment… i don’t agree about all.
First thing i disagree the web 2.0 part, i think your idea is not correct.
In my opinion web 2.0 is not meant to make websites as a “brainless mix up of things”, but it is the very opposite. It is to simplify things with clean layouts, standard code for compatibility in all browsers, good buttons and menus, readable boxes of text, nice constrast of colors, and super comprehensive icons, and also multimedia like flv videos, maybe some ajax etcetera…
Some messy blogs have nothing to share with this scenario, isn’t it? They are just bad designed, with distracting animated things, advertising that piss off everybody, not user-friendly, so why they should make the web 2.0?
Second thing you are wrong when you consider absolute bad to use some universal recognized icons (xml, rss, w3c) or other stuffs (tag cloud, list of links, google advertising).
It depends on the situation, the clients and the users you have. I am a web developer and designer, w3c icon is important in my site.
The orange for xml-rss is well visible, and you are sure they are recognized. Perhaps if you redesign them a dumb user could not see them. I fight everyday with dumb users who could not understand some very easy universal concepts…ah, they don’t know about orange xml icons for sure.
Google ads? blog readers already know them, so they just skip them, or they read quickly for curiosity. The guy who put ads in his blog knows that is not beautiful, it is to gain money. He isn’t a designer and he just accept to be used by Google.
But a google ads is not suitable in an company website, some users could be misleaded, they could find weird contents or the offer of competitors, definitely it has chances to drag away users from the website… my client would kill me.
Another example is the tag cloud: it is weird in a business website, or a blog with few contents, who cares how much a keyword is searched? right. But in a community, a portal or a torrent search engine maybe it has some sense, that kind of users recognize it and it is a graphical way to show the most researched keywords… to avoid? not sure… maybe someone finds it useful.
Finally talking about blogs… i think you can make whatever you want since a blog is a personal diary, if you like to do this diary for some utility then you avoid photoes, and too personal things, and you write good content, instead if you want simply fill it up of your photoes, if you are an hyper active child, i think this is not ugly, simply it is your way to make your blog. Who cares people who read it?
I think you struggle too much to go against some behaviours of the web community. I think the best way is to focus on our target and make all things according that.
How much to be creative or to follow standards? In some projects the design has great value, in some others it hasn’t, it is better to make things easy and standard.
A blog is different from a company website. A chuch have for sure different users than an heavy metal band. Grannies hate websites with font size 10. Children want colorfull things and are bored with static websites, businessmen gets angry with wasting time blinking websites…. and so on…
Cya
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.