7 Habits of Highly Annoying Web Designers
1. “Real World” Interfaces.
Yeah, the menu should totally be on a banner pulled behind an airplane. Get it? It’s a “fly out.”
Leave the real world to the real world. To borrow from Clement Greenburg, “screen is screen, pixels are pixels.” You’ve got a million colors and several million pixels to play with, unlimited fonts, and the only thing you can think of is a coffee table? But the telephone links to “contact us.” Get it? Apple pioneered this interface in 1995, and your idea is neither new nor interesting. Try again.
2. No more popups. Seriously.
And do NOT expand the browser window with javascript to fill my entire screen. Likewise, do not shake it, wiggle it, or otherwise manipulate it beyond changing the content within the browser window. It is my browser, and I have it just how I want it. I am graciously giving you my attention for a few seconds, and if you so much as twitch the screen, I will leave because you have broached my personal space.
3. Buck Conventions.
Like it or not, some web design conventions have emerged over the years, and your mom is just starting to get the hang of it. Search boxes go up at the top right. Navigation on either the left or across the top. And it does not move from page to page, or when your mouse gets close to it. Text links are underlined. Unless you are prepared to retrain my mom, your mom, his mom, her mom, and the millions of other web users who have learned to follow these established conventions, do not break the rules, unless you have a very, very good reason. And no, that reason can’t be “it looks better.” Or “it won’t fit over there.” Make it work.
4. The Filter is the Message.
Just knock it off. Lens flare does not a design make. People who design realtor’s web sites seem especially prone to this. TIP: For an *instant* realty web site, open your realtor’s portrait or house photograph in Photoshop. Play the default action called “Quadrant Colors.” WOW!
5. The Helvetica Goes Up to 11.
Helvetica is an awesome font. Used for your headlines, body text, logo, tagline, bylines, fishing lines, captions, pull quotes, it is boring. It has been used to death by the Web 2.0 crowd, and if I see another all-Helvetica site I will probably look up your house on whois.sc and Google Maps and sign you up for lots of spam and laugh at how tiny your hard drive looks from 100,000 feet.
6. Idiot Quotes.
As opposed to ’smart quotes.’ Even Microsoft Word knows better than to use vertical quotes in setting text. I will forgive you not doing this in HTML text, but when you are using an image for a headline, it’s inexcusable.
On a Mac, get a curly quote with:
option + shift + ]
On a PC, visit Apple.com and order yourself a Mac. On a Linux box, get a real job.
7. Comic Sans.
Greater minds than mine have addressed this serious issue, but with the frequency I seem to encounter it, I think it bears repeating.
hahaahah
“Unless you are prepared to retrain my mom, your mom, his mom, her mom, and the millions of other web users who have learned to follow these established conventions, do not break the rules.”
That’s my favorite part.
Comment by Scott Vandehey — January 23, 2007 @ 2:30 pm
Here’s some more annoying things for your list:
8. Sites that look like they were bought from template monster
9. Menu links that go to an unfinished page with the same menu link word repeated on them
10. Using terrible quotations from real people when one of your own would do if you really felt it necessary
11. Calling yourself a Webmaster or Creative Director and using friends and made-up names as employees
12. Drop down menus from 1995 - in relation to the aforementioned firm in point no. 12, ‘http://www.popart.com’
13. Making lists about something you obviously know little about
Comment by josimar — January 23, 2007 @ 3:15 pm
How about this one…
Don’t use Flash for menu’s in an HTML site just to make the fonts pretty and add an interesting hover state. Take away my right click on a link and I’ll Alt-F4 your ass!
Comment by Anony Mouse — January 23, 2007 @ 3:41 pm
“On a PC, visit Apple.com and order yourself a Mac. On a Linux box, get a real job.”
I don’t understand people’s obsession with the Macs. I’ve been designing/developing websites for about 7 years on both a Mac and a PC and I have yet to find one thing that the Mac does better than a PC other than Font Management. (PC is getting better at this though, and I find PC’s are faster at activating/deactivating fonts). The Mac I use at work is 3x faster on paper than my PC (cost 3x as much too), but in reality my PC runs every graphic application at least 3x faster. If you are designing/developing websites on a Mac, how do you know what it will look like on Internet Explorer, which 90% of your audience uses? What about file management on a Mac and its inability to cut/paste files?
Comment by Mika — January 23, 2007 @ 3:45 pm
I am sorry, but I feel that you have to consider your audience before jumping to conclusions. Sure mystery meat navigation should be abolished, but as far as saying every link has to be underlined… that throws out a large blanket. If you are designing a technology or design portfolio site, then underlining is not something you need to do. A perfect example is efxgroup.com, none of the main navigation links are underlined on either of the menus (top or left). Yes, I created that site, and no I haven’t received any complaints. I will write up a counter to this I think later on and do a trackback.
Comment by Matt Sandy — January 23, 2007 @ 3:52 pm
For the most part I agree here. A lot of this is either overused or considered creative, when clearly it is not. Mocking other sites or basic Photoshop quick tips are not creative, however 90% of the audience probably thinks it is, since they do not know any better like your mom, my mom and all their friends to boot, so I ask you, is creativity in the eye of the beholder?
Comment by Matthew — January 23, 2007 @ 7:03 pm
8. Do not design your Website using blog software like this Website! Every Website that I visit these days looks exactly like this Website/template all of them sharing the same: CSS, fonts, colors, layout, structure, etc…
9. Break “the rules” never let a pencil geek with no creative or design skills tell you what you should or should not do, leave that to the government or the Bush administration for that.
10. If you are a designer “never design” your personal Website with editors like “Blogger or Word Press”.
Comment by Dick Cheney — January 23, 2007 @ 7:43 pm
“11. Calling yourself a Webmaster or Creative Director and using friends and made-up names as employees”
Rats. Josimar is on to me. Actually, Dave, Ben, Ryan, Thom, Stephen, and Christina are all various sides of my personality. I was going to throw in Frank, but he isn’t fully developed yet, more of a work in progress. Stay tuned!
Does “Thom” sound too made up?
Comment by justin.garrity — January 23, 2007 @ 9:52 pm
Has anyone seen the authors of “7 Habits of Highly Annoying Web Designers” offical website POPART.COM, they use clip art and web templates from “MONSTER TEMPLATE” by no means should they be giving advice to the design community
on what it or is not appropriate design. They have the gawl of mentioning HELVETICA
as being over used when they are solely using ARIAL”the bastardized version of Helvetica” exclusively throught their own Website. They should first learn to practice what they preach. They must be Bush backin’ Republicans, running Microsoft to develop their Wesbites!
Comment by Robert M. — January 23, 2007 @ 10:18 pm
I find it rather amusing that you drone about conventions, then proceed to place your search box at the bottom right, and use flaming pink sans underlines for you links. Worse, the gratuitous use of javascript precludes one from regaining focus within the comment box, in Firefox, if your text is especially close to the right side, unless you click toward the middle. You dweebs.
Comment by Ryan — January 23, 2007 @ 11:22 pm
At Josimar who made a list above:
#11 Posting a bunch of agreements and laughing at everyone who does all the above annoying things… then to find out your site does them all: http://www.josimar.com/
Priceless!
Comment by Bill — January 23, 2007 @ 11:22 pm
LOL, dude.
(a) Your top nav header breaks in IE6 (yes, on a PC).
and
(b) “9. Menu links that go to an unfinished page with the same menu link word repeated on them” ..lol
Comment by Chris — January 23, 2007 @ 11:24 pm
Or better yet, don’t use an editor! Really. Learn HTML. Learn to script. Learn to type. It’s not that hard, and there’s nothing more frustrating than trying to fix something in weird, awkward code that wasn’t even written by a person. And stop, by all means, using the word “blog.” It’s a gross, phoenetically ugly utterance that sounds like something you’d pick from your nose.
Comment by Luke Knipe — January 23, 2007 @ 11:28 pm
12. Find work.
13. Don’t throw stones in a glass house. Meaning: I checked out ‘your’ job, PopArt.com.
14. meh.
Comment by A_Real_Designer — January 23, 2007 @ 11:28 pm
How about…
“Resize your images properly, rather than using HTML width and height attributes”
I wonder where i’ve seen that done before!
And now that i have to switch to IE just to post this, how about making your submit button work in Firefox eh?
Comment by Andrew — January 23, 2007 @ 11:30 pm
#8…thinking ANYONE cares about your diary.
#9. Being anything other than a 12 year old girl and WRITING a diary.
#10. Posting your diary online.
Time to do a whois on this site, and hit all the SPAM sites.
Comment by JKFan — January 23, 2007 @ 11:33 pm
#8 Begging people to submit your site to various social bookmarking sites. (Just reeks of desperation, knowing that your content is not good enough to make people want to do it on their own.)
Comment by LAKLK — January 23, 2007 @ 11:41 pm
Remember that what ever you do as a web designer the client can still modify it in anyway they wish so there is no reason to make it more difficult.
I like my backgrounds black and my text white.
Comment by Jesse — January 24, 2007 @ 1:06 am
How about not using a fixed width site layout? (like yours)
Or if you are using a fixed width site, resize you images in Photoshop instead of having the browser do it on the fly. Your images look like crap as a result.
Comment by common sense — January 24, 2007 @ 1:13 am
How about do not use a black background.
Comment by Gizmodo — January 24, 2007 @ 1:37 am
“Text links are underlined.”
I’m laughing while i see all the links on this page being rose/red and NOT underlined….
Talk about hypocrisy.
Oh, and this sentence made me laugh too : “On a PC, visit Apple.com and order yourself a Mac. On a Linux box, get a real job.” I would actually reverse it like : “On a mac, visit dell.com and order yourself a PC. On a windows box, install linux.”
Otherwise, many smart advices up here. Thanks for them. Thought of it as funny though.
Comment by Zukero — January 24, 2007 @ 1:41 am
the designers republic did this look to death in the early nineties so that you don’t have to
Comment by weall — January 24, 2007 @ 2:46 am
“On a PC, visit Apple.com and order yourself a Mac. On a Linux box, get a real job.”
Oh boy, you really are full of it.
I write code for embedded control systems, like the systems that control how your car brakes. I do it on Linux.
I would say to people using Macs to wrtie HTML, get a real job.
Writing scripts can be done by anybody, writing code is for people with skill.
Comment by JohnnyWashNGo — January 24, 2007 @ 3:45 am
#43 If you are a web designer, you don’t use Wordpress for your website.
#59 If you make a website and include a DOCTYPE then make sure it validates, look here: http://validator.w3.org/check?uri=http://www.72dpiintheshade.com/2007/01/23/7-habits-of-highly-annoying-web-designers/
Comment by urho — January 24, 2007 @ 5:30 am
In case you are blind as well as stupid, I was referring directly to THIS site with ALL my points (8 thru 13)
Comment by josimar — January 24, 2007 @ 6:06 am
LOL… damned i HATE comic sans… other things should be dont use the default values in ANYTHING!
Comment by mark rushworth — January 24, 2007 @ 9:06 am
“It has been used to death by the Web 2.0 crowd”
oh piss off how dare you disgrace the heavenly modernism of Helvetica with that web 2.0 vomit.
Most of them use Arial anyway.
Rest of the comments might have been interesting like in 98 when those design devices actually became tired.
Comment by better designer than you — January 24, 2007 @ 9:38 am
What a load of gash.
Comment by Words are Pictures — January 24, 2007 @ 9:40 am
How about adding “Sites that either don’t resize (in Photoshop or the GIMP) their graphics or adjust the HTML to display them”? As in THIS SITE. Notice your two example graphics. Both images have a width of 640 pixels, yet your template insists on squashing them to something less than that - looks amateurish. You don’t have any width or height attributes, so I don’t know if you could fix them in that manner. Regardless, a short trip to an image editor would certainly address this issue.
Comment by Greg — January 24, 2007 @ 1:03 pm
Oh, so you decided to remove my comment about biased Mac bullshit. Very nice.
Comment by Johan — January 24, 2007 @ 2:45 pm
Will whoever keeps turning off the coffee pot please get up and make me a fresh pot about 10 minutes before I want some coffee?
Comment by Andrew — January 24, 2007 @ 4:30 pm
Screenshot of navigation bar problem for what it’s worth:
http://mytsoftware.com/misc/steve.png
Stephen’s link wraps around and disappears for a significant (perhaps majority) number of users.
Comment by David — January 24, 2007 @ 4:47 pm
People, just a tiny note: ARIAL == HELVETICA
Its like 3 pixels different so it doesn’t violate copyright. This was done so Microsoft wouldn’t have to pay up royalties.
So, saying Arial looks better, or that more sites use Arial is ehm, silly.
Macs are great computers. The majority of the windows-users would be more satisfied if they would use a Mac. A web-developer however is expected to be more technically skilled. If such a person is most productive on a Mac it speaks about their technical skills. You would expect them to use Linux. You would not expect Windows to be as popular as it is, but I suppose its the compromise, the middle-ground between the two extremes that make it as middle-of-the-road-popular-as-it-is..
Reasons why professional web-developpers use linux:
- because its the only platform where its possible to use all render-engines out there. (Internet Explorer 5, 5.5, 6 and 7 side-by-side through wine, Konqueror which uses the same renderengine as Safari, Gecko using Firefox/Mozilla, Opera’s render-engine and ELinks (What does your website look like for a webcrawler, blind-person, etc.)
- Because your servers’ SSH folders integrate directly within the file-managers as if its a local folder. You can setup your test-environment directly on the server and edit the files directly on the remote environment.
- Because you can connect to the console straight within the terminal, without using crappy Putty.
- Because you can use RSycn on a cronjob to backup your site and if you want, all of your servers’ configuration.
- Because you can have a local test environment which is identical to your webserver. Same platform, same servers, same versions of everything.
- Because you can setup, checkout and update a local CSV repository. Which is always a good idea with a complex website including specialized server-side backends or when working with several people on the same project.
- Because you can automate and script several verification programs that validate the structure of the database and the standard-compliance of the html and css.
- Because you can automate the upload of all pages to the server-cluster your professional website is off course using.
Thirdly, I would expect any professional web-developer to work directly with HTML code, or even better, even if its a static page, to work with your own XML syntax and translate that into the HTML code you want. I prefer to use Haskell for this, but specialized webbased languages are also fine choices (think Ruby, or some XML-transformation language).
Not all design-decisions are made using CSS. CSS skins, but not decides whether you use tabs, menu’s, dhtml-menu’s, etc. Changes like that require a complete rewrite if the html-code is done by hand or, which is much worse, using wysywyg tool. Often you want a higher, more semantic definition of the content. This way if the customer changes their mind about how the layout should work, you can edit it at _one_ place and regenerate the static parts.
Fourthly, any descent website nowadays has dynamic content. There are few cases best served with static content. This not only requires that you write the html-code by hand. This requires that you write server-side software that actually generates html-code. Good server-side software isn’t always recognizable by the end-user. The difference between good and bad code is often something that has to do with maintainability. Have you abstracted away all the layout components and all the database models?
Good luck in your self-education. I hope someday you will know what you are talking about. Unless you want to be a web-designer all your life. And trust me, that profession is just a relict from the printing-industry.
Comment by Meneer R — January 24, 2007 @ 5:45 pm
[…] 7 Habits of Highly Annoying Web Designers Hmm. Valid. […]
Pingback by 1983 » 2007-01-25 Daily Catch — January 24, 2007 @ 8:59 pm
Life’s too short to be this bitter, people.
Especially you, Dave.
Comment by Thom — January 24, 2007 @ 9:28 pm
@ Meener
“Reasons why professional web-developpers use linux:”
That list is totally off base.
-Browsers. OS X can run all of said browsers. (Konqueror == Safari)
-You got me here, but I thought your later point said “You can set up your test environment locally”. Contradictory.
-Putty isn’t that crappy and OS X has multiple terminal apps.
-Rsync can be done under OS X and windows with cygwin. Not linux-only.
-This is assuming your remote server is linux. A lot of large systems that I seem to remember consulting on were… Windows! You forget about the enterpirse RDBMS that is MSSQL?
-What does CVS/SVN have to do with linux? Tortoise is a fantastic SVN client for windows. SVNX is just ok.
-Not sure why you are unit testing CSS, but there are very powerful unit/regression testing applications for windows.
-Again, how is this linux-only?
Spend a little more time on some other platforms before you spread that kind of (mis)information.
-Mac user
PS. Up until today this site was actually run on a theme called Unsleepable by Ben Gray
http://openswitch.org/unsleepable
Comment by Nate — January 24, 2007 @ 10:16 pm
don’t forget background music without a sound off button!
Comment by sven — January 25, 2007 @ 4:00 am
@ Nate
You are quite right, that it is possible to do the most of this on Windows or on OSX.
Although I think using Cygwin is as much as cheating as it is to run linux on a virtual-machine (which is also an option to do some of this stuff).
What I was hinting at was that you get all of this integrated, ready to go. Im even pretty sure there are even programs like RSync for windows and OSX. Including nice graphical click-away interfaces.
You are also right about Putty not being that crappy. Although it is inherently silly that someone that knows their way around the linux-terminal uses a windows desktop.
You can even with some hacks run all the different versions of Internet Explorer next to each other on Windows. (just as you can under linux).
So YOU ARE RIGHT. If you hack around long enough, you will end up with a bunch of non-integrated tools, that force you to click through every one of your daily tasks. Now this simple question: which environment (including all the software you need to be productive) is easier to setup?
I already claimed that OSX is the superior desktop. But for terminal-love, scripting your daily tasks, etc. you are really better off with Linux. You will be more productive. Give a kid a fake castle and it’ll play for a while. Give it Lego, and it will play forever.
Just one quote:
“You got me here, but I thought your later point said “You can set up your test environment locally”. Contradictory.”
Contradictory? Doesn’t it depend on the situation whether you are better off testing locally or remotely? Is it a solo-project or a team-effort? That’s a good question to start with. Having the choice to easily run both local server environments and to mount remote server environments seems like an important choice to have.
“A lot of large systems that I seem to remember consulting on were… Windows! You forget about the enterpirse RDBMS that is MSSQL?”
It was still this century that even the Microsoft website wasn’t run on Windows. Just because some university-dropouts stick to what they do know doesn’t mean it even was or ever will be the best tool for the job. apt-get install blue-screen-of-death. There do not exist experts that both know linux and windows and would ever use the latter for server purposes. Although MSSQL is the least of the problems is that setup. Their database server is fine, but their OS is just not suited for remote administration, scripting, clustering, etc. I am not saying, it can’t be done, its just not as easy as it could and should be.
CVS/SVN is most powerfull when used from within the terminal. You are joking, right? Mentioning a GUI application as superior? If i’m not mistaking most professionals are using merely their keyboards when they are programming. Off course I don’t count people using Visual Basic as professionals, so that might just skew my assumptions here a little.
Off course all of these arguments are less strongly about OSX. And being based on BSD, you would expect it to contain good SSH support anyway. I still do feel that the GNU tools are more at home on Linux than they are on OSX.
Don’t get me wrong, I like OSX. I would recommend it to my grandmother. I wouldn’t recommend it to a professional technician though. OSX like Windows are cars of which you can’t open the hood. You can’t pimp them, tweak them or fix them yourselves. Your grandmother wouldn’t do any of those things, but I would.
But even besides that point. It doesn’t take more than an hour for the average 16-year-old-script-kiddie’s to turn a linux installation into an OSX clone. Considering the price differences I should assume a skilled person would just use Linux and make it as much as OSX as they like. If you can turn a Fiat into a Ferrari, and you have fun doing so, why would you buy a Ferrari?
Comment by Meneer R — January 25, 2007 @ 10:02 am
It is impossible to lick your own elbow.
Comment by christina — January 25, 2007 @ 7:39 pm
Nice post, but what a lot of negative comments! Didn’t anyone else notice that it was pretty tongue-in-cheek. Let’s hope you don’t get Dugg or you’re really going to get slammed. Hope you’ve got thick skin…
Comment by Christian Watson — January 26, 2007 @ 2:09 pm
I’ve used a Mac before and prefer Windows - got that WINDOWS. .Much easier to use, easier to fix and without that crappy advertising that Apple seems to resort to. I guess if you’re used to one, the other will seem extremely difficult, but then again Apple is made that way…
Comment by Kathy Pearlman — January 30, 2007 @ 8:42 am
I agree with most of this, but good god you yourself are really annoying.
Comment by Bill — May 4, 2007 @ 1:09 pm
‘On a Mac, get a curly quote with:
option + shift + ]
On a PC, visit Apple.com and order yourself a Mac. On a Linux box, get a real job.’
Why would I want to get a computer that only a small amount of anal retentives want to use….oh yeah, they look nice, I must have missed the point there.
‘On a Linux box, get a real job.’ oh dear oh dear oh dear, what do you think the latest version of Apples OS is built on? and while your contemplating, what is the OS of the server this site is built on?
Comment by A pc user — December 12, 2007 @ 8:30 am