30 Bad Practices of Web Designers
236Every once in a while you will come across a page that just doesn’t seem ‘right’. There are three elements of a website that can be harmed by bad practice:
- The website lacks something in its design.
- The content is written badly.
- The search engines don’t like something about the site.
Considering the three points above, this article will explains the do’s and dont’s of certain design habits.
1. Using ancient markup
Websites link directly to technology, and technology is about keeping updated. In the era of XHTML, we need to keep updated with the standards to have solid websites. So instead of using that <br> tag, give the <br /> a spin. Know where to self close a tag or place the doctype. For a good resource for those beginning markup, HTMLDog has good tutorials to learn how it all works.
Bad:
- Using deprecated markup
- Choosing not to use a doctype
- Using table based layouts
- Self-closing tags that shouldn’t be self-closed
Good:
- Using the latest and greatest markup that is fully-supported
- Always using Doctypes
- Using <div> tags for positioning
- Using a CSS Stylesheet
- Validating your markup with the W3C Validator
2. Choosing invasive or distracting backgrounds
When the internet started, people were so amazed that they were able to publish stuff publicly that they didn’t think about readability and presentation. Choose a background that is appealing but doesn’t distract the reader.
Bad:
- Using a bright red background without a very good reason to
- Having tiled images that aren’t seamless
- Using repeating animated GIF backgrounds
- Using an image that is more eye-catching than the main content
Good:
- Have an appealing background that does not distract the reader
3. Using “defaulty” fonts
Technology can ruin the glory in a lot of slick typesets, not that Comic Sans was ever glorious. Times New Roman, Times, Comic Sans, Courier, and Courier New are some of the fonts that have been seen frequently and often look unprofessional.
Bad:
- Using fonts that look untouched and unstyled
Good:
- Use fully supported typefaces
- Using the CSS font-family property to so the desired font can fall back on another if it isn’t installed
- Using fonts that most computers have (such as Garamond) and falling back on fully supported fonts
4. Having similar text & background colors
Text on a webpage is made for the viewer to read the page clearly and easily. Nearly all websites are built for the user to absorb information. By having the text color the same as the background color, it won’t be as easy to read and Google will penalize you for it. This goes for any text as well. If you have white text on a dark grey background, but there is a background-color somewhere else in the document that is also white, it also isn’t good for SEO.
Bad:
- Giving little contrast between the text and background
Good:
- Have a good contrast between text and background colors without making it white text on a black background.
5. Tables
Tables are an infamous method of content placement used back in the day that fills up your markup with a lot of extra code using <table>, <td>, <th> and <tr> tags. Tables are an excellent and easy to modify way to show tabular data, but when using heavily nested tables instead of DIVs, good luck with editing it. Use <div> tags! See an example of a proper use of tables.
Bad:
- Using tables for layouts
- Using tables for anything other than tabular data
Good:
- Using tables to display charts and other ways of displaying tabular data
6. Bolding too much text
It is good to put emphasis on important text, but by bolding too much text, it dilutes the purpose of making the text bold and just makes it plain hard to read. When used in short sentences that explain a key factor of the paragraph or article, it serves it’s purpose very well.
Bad:
- Bolding entire paragraphs or pages
Good:
- Bolding small fragments of important text
- Bolding text to emphasize form labels
7. Writing for Google, not your viewers
You may have seen websites with content that is tailored to try and make the search engines happy. Some people thinks it helps to stuff many keywords in their paragraphs so search engines will like them more. You can notice the difference of how people use “keyword-stuffing” to butcher their website, and Google can understand this even more, and will punish you for it. For example, if Problogdesign.com was to be summarized in a paragraph:
Good description of Pro Blog Design:
Pro Blog Design is a resource for web designers that provides information about creating and maintaining an effective blog with stimulating tutorials and inspiration.
Bad description:
Web Design Blog, Pro Blog Design, is a resource and tool for web designers & website developers that provides tutorials and information for website designers & bloggers about creating effective blogs, maintaining blogs, web design inspiration, blogging tutorials, and more.
You can notice the redundancy in the second description. Search engines generally don’t take this kindly, so please write for humans.
8. Not taking advantage of CSS shorthand
CSS Shorthand is used to turn many CSS properties into one to make the file size smaller and a cleaner document. It is often used for borders, padding, margins, and backgrounds. Use it as oft as possible to optimize your page load time.
Bad:
.class {
padding-left: 3px;
margin-right: 6px;
padding-top: 10px;
padding-right: 9px;
margin-left: 6px;
background-image: url('images/happy.jpg');
background-position: bottom;
background-repeat: repeat-x;
background-color: #E2CCCC;
}
Good:
.class {
padding: 10px 9px 0 3px;
margin: 0 6px;
background: url('images/happy.jpg') repeat-x #E2CCCC bottom;
}
9. Having redundant CSS
Keep an eye out for having redeclared CSS properties. Let’s assume a <div> has another <div> inside it. The parent <div> has a CSS property to change the text color to purple. There isn’t any point of having the same CSS property telling the inner DIV to have purple text because it inherits them from the parenting <div>.
Another example of redundant CSS would be declarations that aren’t in use. Many people don’t use CSS Frameworks because there may be many unused declarations.
10. The absence of a CMS
Today practically all websites are built with a Content Management System. The more you add and edit content, the more the search engines will index you. What harm can it do?
Five great content management systems:
11. Using default photoshop effects
You must have seen this somewhere on the internet. People sometimes use thick (especially red) text strokes or harsh uses of “emboss” or “twirl” that’s been seen so many times that it just looks terrible.
Bad:
- Using effects too much
- Using the default effect settings
Good:
- Don’t rely on Photoshop effects for your work to look good. Use your natural talent
- You can lower the opacity of the effects so they don’t look so harsh
- Try to keep away from the default effect settings
12. Not validating
It’s so easy to validate your markup by using the W3C Markup Validator. Always remember that clean code means a better cross-browser, cross-platform result that will have support for many many years.
Validators:
13. Having cluttered content
Compare MSN‘s website to the Dropbox website. The information on MSN doesn’t deliver as effectively as Dropbox, because Dropbox has one button to focus on and MSN has 30 places to focus on.
Bad:
- Making content closely packed and cluttered
- Delivering too much information on the homepage
Good:
- Using line-spacing and padding to spread out your content
- Having a smaller amount of information on the homepage
- Using sub-pages to not over-deliver the information
14. Using flash intros
Flash introductions are known as “Google Blockers”. These intros are usually on the root URL of sites, the most important page through an SEO perspective. Most people want to get right to your content instead of watching the video, so it provides as another barrier for getting the information they’re looking for.
15. Using lots of text inside images
Since search spiders can’t read through pixels, it’s best to keep content and images separate. It also takes longer to load the page if the text is inside an image. If you want to take advantage of different fonts that aren’t web-supported, you can always use text-replacement methods that won’t obstruct the SEO (Problogdesign will have a post on this soon, so stay tuned!).
16. Unaligned content
Ensure that images, paragraphs, and DIV’s have proper padding and margins so your page cleanly lines up.
17. The <marquee> tag
Although a really simple, easy effect that has a “wow” factor in the starting weeks of coding, the marquee takes away from everything else in the page, is distracting, and is difficult to read. I’ve actually seen a news site that used an impressive stylish marquee a few weeks ago, although it was the first nice one that I’ve seen in my 10 years of internet browsing.
18. Inconsistent navigation
Try to unify your navigation into a clean, presentable list with a common look and feel. If each navigation item has a different size, shape, color, and position, people will ‘miss’ it as being the navigation.
19. Link building too fast
Building fast links in general has the potential of penalizing or de-indexing your website. If someone makes 100 links in a day when they usually get one or two new incoming links a week, search engines will be suspicious. If you would like to build links, you can be on Google’s good side and use the dofollow search engine and post a few comments every day on blog articles.
20. (Bad) use of animated GIFs
Generally speaking, animated GIFs are bad news that detract people from what they should be looking at: the content. Take a look at the Aiseikai Hospital website. Even with a small amount of information on the page, the flashing GIF images and marquee text make the page present horribly.
21. Images not optimized for web
When saving images as web graphics, it’s best to use Photoshop’s “Save for Web”, which will allow you to optimize it to have a good balance between quality and loading time.
22. No website hierarchy
The most important elements of a web page should be the most prominent. The name, logo, and what you do is usually more important than the headers, and the headers are more important than the body text. Balance out the content on your page so everything is in it’s respective sizes and let the headers describe the copy, so people can skim over it and read the paragraph if it interests them.
23. Having over 100 links on a page
Remember when it was common to come across spam pages that were nothing but links? These are known as link farms. Google penalizes websites that have a large number of links on it, especially when there’s no content.
On your blog, try to keep the blogroll short, especially if it displays on all your pages so you ensure you don’t have too many links. Blogrolls also take a lot of space on your page, so you can make it non-intrusive by using a snazzy dropdown.
24. Irrelevant Content
This one should go without saying, keep the content relevant to what the site is about so it keeps people interested in the site. Irrelevant content can penalize you in the search engines too if the <title> tag doesn’t match the content.
25. Typos
Use Spell Chek! You should also keep your eyes peeled for keeping a consistent pattern for how you write words. For example:
Grey or Gray
Web Site or Website
Ex: or Eg: or Example:
26. 404 // Under Construction errors
Make your 404 page look nice and have links to direct the user somewhere to go. 404 pages are a dead end, and dead ends often mean bounces. By styling the 404 page and providing links, people don’t feel like it’s an end and they can continue where they left off.
27. Use of advertisements
Informational sites like blogs often seek a little bit of compensation through sponsors. Try to fit the advertisements in with the page design instead of dropping them in anywhere. The latest trend is to use buysellads.com (especially for the tech / design industries) and make the advertisements square and grid-aligned, which presents beautifully to the readers.
Bad:
- Using too many advertisements
- Having advertisements that don’t “fit” in well with the subject of the blog
- Having misleading or offensive ads
- Scattering ads out randomly
Good:
- Using a moderate number of ads
- Organizing the advertisements to look nice on your page
- Selling ad space to pages with similar content to attract targeted visitors
28. USING UPPERCASE TOO MUCH
Most people will see uppercase as yelling and anger. Many internet marketers use uppercase and red text in their online sales pitches which present horribly and end up making them look desperate. Uppercase can look great if it’s in small dosages like headers or navigation text.
29. Midi Music
In most circumstances MIDI music sounds tacky and unprofessional, and unless it’s a site for a MIDI composer, it serves little purpose and distracts the viewer.
30. Getting too ahead of the times
It’s great to be original and create an avant-garde website that delivers efficiently, but relying on experimental markup isn’t the best idea. Especially with CSS3 and HTML5 being released, you have to be sure that the markup is degradable for people using older browsers. For example, if you want to test the new <header> or <nav> tags out, make sure you register them as elements so the older browsers understand. Oh, and looking for a MIME? HTML5 doesn’t need them!
<script>
document.createElement('header');
document.createElement('nav');
</script>
Do you occasionally slip into one of these bad habits? What other bad practices do you think should be avoided?
Enjoy this post? You should follow me on Twitter!
Excellent article, thanks for sharing
Superb!!! Grateful that you shared it .
Thanks for Sharing.
Thanks for some great tips! I’m an intern here at Gogo Dropship and learning a ton about seo and social media. But, honestly your blog is the most well designed and visually pleasing blog I’ve ever seen. Thanks for the great tips and thanks for passing traffic on to my personal blog. I don’t know how you found it, but thanks! (neverenoughfood.wordpress.com)
I would expand 29 “MidiMusic” to include any music unless there is some reason I should expect music when I enter your website (there isn’t). I can’t think of anything that will make me close a site faster than auto playing music.
Seriously. That’s the first thing that makes me close a browser tab too.
Another thing is the floating script. Ad or navigation that follows me around as I scroll down the page.
I agree about the music. After getting a new laptop it never occurred to me that the sound wasn’t turned on until I wanted to hear something on a YouTube video. So, I got the sound on and almost wished I hadn’t! I had no idea how many blogs and sites have noise on them.
Ah yes, that is what I was getting at but I used too few words. I can honestly say that it’s rare to find appealing music outside of sites about the music themselves (Last.fm, myspace bands, music streaming), video sites (when the video is playing!), and flash sites.
Thanks for reading!
Good point. Unfortunately people think their visitors like listening to the crappy midi files they have on their site. The biggest problem is when it’s 3-4 in the morning and your speakers are at maximum volume. You scare the crap out of your dog :)
Great Article. Thanks for sharing.
Thank you for an excellent article. It is also very timely for me, since I am about to do some major upgrades to my website, and also to a friend’s website.
Not only is this a great article for web designers but for SEO programmers too. I will
retweet it.
Nice work Robin!
Great article—thanks for the refresher!
“Use Spell Chek! You should also keep your eyes peeled for keeping a consistent pattern for how you write words.”
I love the humor! Great post! :)
Wow… 30 mistakes.
I would take a look at my own sites and count how many errors, but that might be a little bit depressing.
Number 10 is interesting “The absence of CMS”, I’ve just started to create my first WordPress website using a premium theme and the effect is stunning.
Not only does it save you all the design time, but you can access the site any time you want.
Thanks for the comment Keith. That was one of the ones I contemplated not putting in, as once in a blue moon you find a site that really doesn’t need a CMS. It is starting to become a standard to use one, and whether a site needs one or not, a CMS still improves the control and access over the website for you or the client.
What premium theme are you using? I like the ones that have plugins built into the functions.php file, you can really do a lot with them and you can get them tailored to your niche.
While I do agree on this list, I have to admit also that I have been guilty of some of the offenses here. ^_^;
I once had a layout for my blog that is totally red. The background color is bloody red and the font colors are just shades lighter than the BG color. I thought it looks great. But my readers thought otherwise.
Ha, this happens all the time to me too. I think something looks great, and everyone else thinks contrary. I try to find a good balance of presenting original ideas and discarding the design elements that are too controversial in others eyes. There are a lot of nifty online tools to get opinions from designers, I use http://www.conceptfeedback.com.
Thanks for share this important info in your post.
It will really helpful to me to improve the web design of my site.
Thanks again.
You know what I feel? I feel every designer should print this out and keep it like a ready-reckoner in clear view in front of his or her desk. Nice work, Robin. Even though I’m no expert at web design, I know a piece of good advice when I see it. Thanks for the post. It is probably important to keep us reminding of these Golden Rules of web designing from time to time.
Thanks a lot for the comment Ashley. It’s always good to read lists of good and bad practices before publishing a design, whether it’s web or not. I like those design checklists that they have around the internet to make sure you’re not making any design sins!
This is amazing, I have bookmarked here to come back :)
Hi Robin,
Very Nice article. Bookmarked.
I’m now becoming a regular reader…hahaa
Thank you for sharing such a good tips…
Regards
Synergy Informatics
Synergy Informatics
Good Article, i like it.
Some good points there, but I have to say I disagree on point 8.
While shorthand will save you some a few characters, that’s really not an issue, since your CSS will be cached.
What you gain by not using shorthand, is greater control overriding inherited values instead. Say, e.g. you want to change just the background image of an element (with inherited values for all other background attributes)? With shorthand, you’ll have repeat and then override all the backround attributes, when you could just specify the image.
Which is not to say you should never use shorthand.
Check out Natalie Downe’s slides on CSS systems, there’re good points on this and lot’s of other good CSS design points as well.
…And I guess I should use spel chek for my comments. :-)
A bit outside topic but those small shadows under the .entry h3 tags are just annoying to the eye by getting the font a bit dirty.
Ps with chrome 3 the side bar is being cut. I see 2 slidder and half of the twitter one. But it seems to be working though cos i have the “get paid…” and “get in touch…” title texts on roll-overs.
Really insightful and interesting article… Thumbs up!!!
Good article, Robin.
Some of them I’m not too sure about, though.
For instance, although I agree with the point on keyword stuffing in the descriptions (titles too), two minutes of research will show just how effective it is. Would you rather have some slightly awkward looking text on page one, or human friendly text on page three?
Also, I’m still unsure about this propagation of getting too many inbound links too fast. Sure, it can sound alarms and in the short term you might see your site sandboxed or whatever. But, if there are all legitimate links, the search engines will quickly realise this, and then the links can only have a positive impact.
Anyway, like I said, it was a good article. I just wanted to share these thoughts.
I really enjoyed #9 which talked about avoiding redundant css. I will concentrate on that one. Great advice!
I may have broken a couple of the other rules for an upcoming hair salon website. The client has asked for background music. I tried to explain that a lot of people hate that. She still wanted it. At least I added a “stop music” button. But then she wanted the tan background to be darker. I darkened it a couple of shades. She couldn’t see any difference and asked to have it darkened some more. I explained that people over 40 would struggle reading it if she went any darker. She agreed to keep it the same. It is not always easy to do what seems right in web design. It is sometimes a conflict between doing that and doing something that keeps the client happy.
Wow! What a great article. I’m very appreciative of this information and I’m glad to have found it. I do agree with your assessment of Photoshop filters being used WAY too much – esp the default settings. To expand, on drop shadows for an object, instead of using the “Drop Shadow” filter I make a point to select the layer that is to cast the shadow, create a new layer underneath, fill it with black, and apply a Gaussian blur to that fill until it looks right. Finally, I lower the opacity to no more than 20%. I’ve found that with Photoshop, subtlety works wonders. Great stuff, Robin, and I do appreciate it!
Awesome article. In fact, it helped me to better understand what’ll be good in my next website.
Hi, thanks for this great list. I use flash in my header. Is it bad? take a look http://www.ioacjci.org
Now I make websites as a hobby & got out of it for about 5 years. When I came back, I found out that , & were ALL WRONG!
Now it’s , & .
Now, to me, that just seems silly. Let’s make it longer to type when you’re hand coding it. Or even half hand code half WYSIWYG design.
I’m sure google could tell me, but why the change for something that worked fine in the first place & still DOES work fine?
Oh, html was enabled. Well, that sucks. If you want to decipher that comment, go for it. I don’t feel like fixing it.
Simply put Tristan, Italics and Bold text are concepts from printwork.
We need to stop thinking of websites as an electronic version of paper, strong and em are more flexible and still provide the ability to emulate old media if you need it.
I guess you’re talking about the B and I tags (bold and italics) and their apparent equivalent the STRONG and EM tags, respectively.
From my understanding, this is to be consistent with the separation of content and layout. When you’re using STRONG and EM, you’re stressing text but you’re not saying how, you’re saying why. In most browsers STRONG will be bold and EM will be italics but it doesn’t have to be that way.
A more telling example could be the CITE tag: you’re saying this text is a citation and leave it up to the browser to use the proper text attributes for a citation, which will happen to be italics for most browsers, but could very well be something else in another context.
I almost would call this “30 Bad Practices of Web Developers.” Any designer worth his salt would never do most of these.
Good article, though. Definitely worth a read for anybody starting out in design/development.
I agree completely, the title is sort of misleading. Good read for the newbies though.
I’m sorry to say but creating over 100 backlinks a day does NOT penalize your site or get it deindexed.
Sure, you will get sandboxed for a few days but you definitely will not be deindexed, I do it all the time and I have many highly ranked sites.
Nevertheless, nice blog I like it!
I think the point was going from 0 to 100 in a day shows some sort of artificial boosting going on and for that you WILL get penalized.
While I usually dislike Flash-y websites, I really think it depends on the purpose of the website. For instance, Samsung websites (like the one I linked to in the name) are mostly made of Flash; however I also believe that they can’t showcase their sleek products with due justice by simply using images.
I agree and LOVE this post, except number 19. Yes, link building too fast CAN hurt you in Google, but there a zillion factors involved with that statement. If you’re link building efforts reap a ton of links to a specific piece of content (say, a news article or blog post you publish), this may not hurt you at all, but may actually benefit you BIG TIME. Link building is far more of an exercise then just dropping comments in blogs.
Bad practice 29 -A – starting to auto-play music on page load without explicit user interaction.
For point #12 – TotalValidator.com allows you to do all validation checks in one place.
Hmm, a bit of a shaky list but in general I agree. And the point about midi music made me laugh – I think even as a novice 10 years ago I thought that was naff!
Good article indeed, made me remember some of the errors that I haven’t thought of for some time now and made me realize some errors that I didn’t cared enough.
Excellent article! I’d like to add a few things I’ve come across.
12. Validation
Growing number of projects for public organizations and government have required passing of accessibility validation. It usually boiled down into adding labels for input fields and alt-tags for some layout images. Fairly easy to work them into your routines.
W3 : http://www.w3.org/WAI/
one validating service : http://www.cynthiasays.com/
14. Flash
I usually browse with flash turned off and only enable it for specific sites.
Site in Kent Tupas’ post http://www.ioacjci.org/ provides an excellent example of adding a bit extra with flash and it’s totally optional.
But making parts of content/navigation dependent on 3rd party plug-in (or even Javascript) and not providing user a plug-in free option automatically nor a hint that something is amiss is terrible.
I would argue with #1
There is nothing wrong with using instead of it only needs to be self closing if you are using XHTML. But as most people will be serving their XHTML as text/html rather than XML then it is already broken, so why not use HTML?
That is why I like HTML5. It allows you to work in the way you feel comfortable (pave the cowpaths) while remaining valid. Want to write it as , or even you can, the validator won’t care. Which makes sense as browsers never cared anyways.
Personally I prefer the XHTML ‘style’. I close all my tags, which are all in lowercase and I quote my attributes. But that does not mean I think the other, perfectly valid, methods of writing HTML are ‘bad practices’.
(Comment form ate my HTML – admin feel free to remove duplicate)
I would argue with #1
There is nothing wrong with using <br> instead of <br /> it only needs to be self closing if you are using XHTML. But as most people will be serving their XHTML as text/html rather than XML then it is already broken, so why not use HTML?
That is why I like HTML5. It allows you to work in the way you feel comfortable (pave the cowpaths) while remaining valid. Want to write it as <br>, <br /> or even <BR> you can, the validator won’t care. Which makes sense as browsers never cared anyways.
Personally I prefer the XHTML ’style’. I close all my tags, which are all in lowercase and I quote my attributes. But that does not mean I think the other, perfectly valid, methods of writing HTML are ‘bad practices’.
Great! Great! Great! Post !!! Very detailed and user-friendly.
Nice article :) I’ll send it onto our web designers at work as I’ve spotted a couple of things that they do which I keep telling them not to do.
I would like to point out that Point 19, is not necessarily true as I’ve had over 100 links a day come in from viral/social media optimization and it’s done nothing but boost the sites I’ve had. I think it’s more to do with the fact that if you generate 100 links suddenly and google spots a known paid link hoster or directory amongst them, then you get google slapped. Plus if all the links are coming from completely irrelevant sites then you’re going to get a slap….
But yeah, enjoyed the article! :)
Few more things which bug me..
1. Repeating page title across the whole site and not having a unique one per page.
2. Improper use of H1 tags or not using them at all.
3. Home button goes to http://www.domain.com/home.aspx and not http://www.domain.com
4. Not using proper image alt tags
5. Naming images – Bathroom.jpg and not File001.jpg
6. URL names
Above comments I guess are SEO orientated but the sooner designers start implementing these things from the start the better!
Correction: Home button goes to http://www.domain.com/home.aspx and not http://www.domain.com is wrong. Should be just http://www.domain.com.
Does this make a difference with SEO or is it just good practice to have the home button go to the domain name and not include the home page name? Any other benefits?
Hey Em,
It’s good practice and makes a difference SEO wise, sorry for late reply! When Google scrapes your home page, you really want Home to be one place and not two different places (http://www.site.com/home.aspx & http://www.site.com).
Very compact. Finally a link which I can also give every newbie. Thank you.
Very nice list, and I have indeed fallen into some of those traps, but usually due to “browser compatibility” issues, such as using tables for layout if only to support that idiotic browser called “Internet Explorer 6”.
What is missing from this list, though, is “Planning before Coding”. I can’t believe how many sites I’ve been hired to fix because someone just dove right in, creating an impossible page to update.
#11 is my favorite, if only to garner a chuckle at people who pass themselves off as experts in web image design. Ugh.
#27 should be avoided at all costs, even if it’s a self-owned website. While it’s nice to garner a few dollars here and there from its use, it’s insulting to visitors as most people will intentionally place these within the content.
If you’re selling a product, #27 isn’t necessary for more money. Make the revenue up through your product. If you’re not selling a product, you will be with #27, which is taking away from your site!
Ads have no place being on the internet.
These are, or at least should be, no brainers.
Add: Changing the browser size or/and position. Or generally changing the default browser behavior with JavaScript ;-D
Regarding #13 : Err… I would say MSN and Dropbox are slightly different services :)
I agree that MSN is cluttered, but which ‘web portal’ have you been to that isn’t?
Thanks for reading Dan. They’re gigantically different services. Whether labeling MSN as a portal service or not, it still remains as a cluttered website. I really could have used any site! MSN just seemed appropriate because it’s a service that nearly everyone knows, and doesn’t deliver too well.
It’s a mistake to use Flash irresponsibly or for no good reason.
Great Article!
#25 – Typos
Gray is not a typo. It’s the british spelling variation for the americanised (yes that’s an S too…) “Grey”.
Look it up.
You’re right, it isn’t. I am Canadian and use gray myself. What I was meaning in that point was to keep the writing style consistent. If you write using British / Canadian spelling, don’t revert to American spelling at any point. Use one and not both.
Genial!!!
Creo que tendré que imprimir en poster este listado, para tenerlos encuenta a la hora de hacer un diseño web.
Gracias Robin por compartir :D
Nice article… have been resisting CSS for too long and I think reading this is the final straw. :-) THANK YOU!!! (in all caps – such a rebel, eh?)
I especially liked the animated gif hospital example. Wow! Keep up the good work!
#14 is also an issue for iPhone users. As far as I’m aware, the iPhone still can’t render Flash objects, so a Flash-based splash page will effectively be a dead end.
This was a great article with lots of good advice. I am guilty of quite a few of the bad practices listed. But from this point on I will try to keep this list in mind when designing a web page.
Thanks,
Gwen
I really love this post. I also hate when the site maximizes the web browser window.
cool dude..
thx 4 the tips =D
“Use Spell Chek!” Good advice… that you too should follow: it’s = it is.
Good article. It’s so easy to sometimes forget stuff like the 404 pages.
Holy cow on that hospital site! I feel like I need to see an eye doctor after visiting. Thanks for the article, good stuff.
A lot of these layout issues are well documented in Colin Wheildon’s excellent book Type & Layout http://bit.ly/5rnXv. There’s a lot of compelling research there about comprehension and other supporting details – for those who want to dig deeper.
Interesting article. I agree with another commenter that a lot of these should be common sense to anyone who has been doing this for a while, but that’s probably not who this post is aimed at.
I do take exception to the “Using tags for positioning” bullet in the first point. You shouldn’t be using markup for positioning at all. Let’s leave that to the CSS. I think that bullet should read “Use CSS for positioning”. Also, I think there is an extreme misuse of the DIV tag for positioning of elements on a page. Keep it simple and only use extra markup to position an element (or a group of elements) when you absolutely need to.
Before #11 there needs to be a section on “Calling yourself a Web ‘Designer'”. There needs to be a clear distinction between the people who “design” sites and the people who write the code. There is a real problem out there where everyone thinks they are a web “designer” now. Just because you can sew a button on a jacket doesn’t make you a fashion designer. Both types of people are equally important, but the skills required for each are completely different. I think this list could be pretty evenly split for web developers and web designers.
#25… Please tell me you spelled “spell chek” wrong on purpose :)
white text on black background is not bad at all, unless you are using a serif font or a very small font size.
I disagree. White text on black tends to cause some users to have migraines after just a few minutes. For dark websites, extra planning is required for the text. Too much contrast is painful, while too little makes the text unreadable. A dark website can be beautiful without having to cause massive eye strain.
I don’t really mean to necro-post, but something had to be said.
Very complete list! I also agree that a professionel developer / designer should know about most of these issues. But for anyone who doens’t know all of this it’s a great guide!
@ C!: most users prefer black text on a white (bright) background above white text on a black background. I do believe white on black is pretty bad.
Good, but many of them are well known already.
thanx for that great overview “how not to do”. Still many customers like to have flash intros for their websites. Its allways a problem to make clear that the website is done for the visitors, the visitors and for the visitors!
I had no idea MIME types weren’t necessary in HTML5. Very cool. I also did not know you could use the new page elements by registering them as named objects in the DOM. I wonder if there is a jQuery plugin yet that does the necessary conversion work for you?
I would add to this list “Trying to Reinvent the User Interface” where a “clever” designer tries to “push the envelope”. Look – if it ain’t broke don’t fix it! Left nav or top nav! Not circle nav or crazy Flash widget nav!
I would like to add what I think of as a good practice and that is using the target=”blank” tag when linking to a site other than your own. This way, when someone clicks on the link, a new window will open while your website remains open in the background. You don’t want to take the chance of users browsing away from or forgetting about your website.
I agree with Heather, this whole strict movement of not allowing _blank needs to be tossed out the window. I believe that a link should open in a separate window if it is a site other than you are currently interacting with. Otherwise you are allowing your visitors to navigate away from your content (probably for good seeing that the back button has seen better days) therefore creating a “Out of site, out of mind” situation in reference to your content.
I disagree completely. I generally find using the _blank tag is a sign of an amateur site. You need to have the content to make people want to stay on your site not force an extra window to pop up when they click a link! If I want to stay on a page and open a separate window I use the “Open Link in New Tab” feature available in most browsers. I certainly do not want the site to make that decision for me!
Most users know how to use the back button – don’t risk irritating them by not letting them leave your site!
Links opening a new window has been consider a bad practice for well over a decade. http://www.useit.com/alertbox/990530.html
I read many articles over the years saying most users don’t care for this.
The rational for doing this always seem to come from people marketing the site and not the people actually using the site asking for it. I’ve never understood the logic that people won’t be able to get back to a site if they go a new one since I’ve never heard a user saying they didn’t understand how the “Back” button worked. I think it is quite condescending to imply that once they leave your site they can’t get back without your help. The concept of rewinding was around log before the web. People who are web savvy know how to open a link in a new window if they wish. Even the most novice web user will likely know how to use the back button. It’s probably the thing they learn right after typing in a URL and clicking a link.
Great list of best design practices!
thanks for the post! gives me more knowledge ’bout design world
Fantastic list! This line actually made me shudder: “Using repeating animated GIF backgrounds”. And I don’t even want to mention how many clients I have had to talk out of using a flash intro!
Thanks!
that is great info :)
yes, clear css is very important.
What a great list.
I found the CMS very interesting. I personally use Cushy CMS as it is very easy to implement. Do others see this as a copout from using CMS such as Joomla an Drupal that require a bit more work to set up?
Also point 7, Content Is King – always write for the reader and never the search engine. I completely agree with that!
Sound advice, I would also add – Avoid boxy template looking site design.
Still guilty of 1 :) using tables to make things fit together better in forms…
/hides in a corner
Yeah, I totally agree with you that we write for Google not for viewers. I do SEO service for many websites and I saw that they are using many flash and effects but don’t pay attention in meta title and description.
Great tips . thank you so much
… ehm…, points for trying, but I stopped reading after no. 12 Not Validating.
Could not help myself and validated this page for you, but guess what? That’s right, does not validate, html: 16 errors/13 warnings, css: 13 errors.
No. 11 does not hold any water either.
tb forgot to add “in my opinion” to the end of his comment and also failed to give us the url’s to his portfolio of non-compliant sites loaded full of 3 px black strokes and 5 px black drop shadows, to validate his opinions.
Come on tb…. this is a post that we can all enjoy and learn from.
It’s well written and entertaining… I chuckled a few times when I saw so many of my own mistakes… lighten up a bit.
Probably 90% of these are in play on potential clients’ current websites. This could be a great white paper making the case for site redesign opportunities.
I would add some other poor design practices:
Too much content on one page.
Too many paragraphs.
Both makes web pages difficult to read.
Depends on the page. I pretty happily go to Project Gutenberg and download a whole book as a single page and read it, generally in courier. :)
There’s a tricky balance. Too much info on most pages and you’ll overwhelm people, but people hate the load time of clicking through to new pages, so the key is to be concise.
Awesome information I really appreciate your knowledge on web designs thanks for tips.
I do not completely agree with that. This form is correct for xHTML but not for HTML. You can use both in HTML5 though. And it looks horrific, because of white-space before slash.
Excellent list – I agree with all of those.
Although I would state Courier can look professional on the right site – but as for Times New Roman… yuck!
Practical experiences that I should avoid for my next project. Thanks for the roundup.
Why not TYPO3 as CMS?
What harm can a CMS do?
Oh, I dunno, maybe require an ongoing and irregularly scheduled stream of upgrades until the day its programmers are all gone or you can no longer find a site maintainer who knows the system and you have to do a total site rewrite? Do you really think any of the tools you mention will work in twelve years with the code you write this year?
I run and use websites that are that nearly that old, and if they hadn’t been written with just html and css, their content would no longer be available to the thousands of people that use them. I’ve seen wikis used by tens of thousands of people go offline, losing thousands of hours of volunteer work or requiring lots of porting effort, because the wiki software authors wandered off and bugs came to bite.
A CMS is a crucial tool if you need it, and many sites do, but (as with AJAX) it’s bad practice to incur the downsides if you don’t require the functionality.
I think your bias towards them probably comes from a commercial design orientation. A huge number of sites can be very simple things; for a restaurant posting its hours and menu, or an elementary school listing their staff and a few basic facts or a snow day announcement, for antique hounds showing off a small collection, for me having a site hosting my resume and a few craigslist pictures, CMS’ just aren’t necessary. And numerically, I think there may well be many more small sites than large ones.
@akb427… some good points.
At the moment I’m backing up a database and source code for a WordPress 2.8.4 site before I upgrade it to 2.8.5 because of security risks and I’m cursing under my breath.
As you say, the process is never ending!
However, truth to tell, many clients ask for a site where they can add their own content… hence CMS. Not sure how many clients actually do add their own content or would even know how to optimise and cut to size a graphic to add to the site, so perhaps we are kidding ourselves that WordPress is a great CMS for clients.
I’m using WordPress for websites because I can save days / weeks not having to do the xhtml and css (complete with I.E. 6 hacks!) for sites. Why should I? There are lots of great free or cheap themes out there.
Thank you for sharing! I have heard good things about Loop 11.
I love this post. But really? Is anyone still using animated gifs?
You may be interested in reading this article from Website Magazine by Bryan Eisenberg that reviews usability tools http://bit.ly/32mqlQ
I am affiliated with http://www.usertesting.com but the article covers many tools.
Amanda
Thank you for the tips, very informative. I find the tips very useful especially to beginners and seo.
Great article Robin. I have to admit that there are some things that I am guilty of here, but none of the real bad things. Thanks for providing this content in a checklist like style. Real easy to read and follow.
yeah, flash is large.
Great article!
List well and emphasize well. Thank you
“The content is written badly.”
i could not write a good article.
A log time ago Google did suggest no more than 100 links on a page, but they would never penalize for it, and this is nothing to do with link farms.
The link number was more to do with the amount of content on a page they could parse.
These days they can handle much larger pages
This will be comment 112 so is Google going to penalize this page for having possibly 200+ links? No
Link farms are generally poor quality sites created for the sole purpose of ranking other sites.
That’s true Andy, their approach would be more complex than simply counting the number of links.
But I think the point still has some merit. E.g. What if they only parse the first 100 or so links, and then ignore the rest? That would have an impact on how you lay out your source code (e.g. A site which has links to pages for every state in the US mightn’t want to have 50 links to those pages being its most prominent links? Or a blog’s comment links might be read before sidebar links?)
Or I suppose they could also base it on the format? Your example of the comments here is a great point, but maybe Google will see the text next to each link and give us some leeway for that? Wheras if it saw 112 links in a single list, it might be less pleased?
Either way though, I think I have to agree with you. What I’ve said there may be ideas for how they might extend the 100 links on different sites, but what you said about not penalizing is probably true. At the very least, it won’t be a strict limit they’ve set.
I think you are probably still reading too much into old limitations.
It was never a limit on links but data, and Google can now read a lot more of a page – I have nudged Matt Cutts in the past to try to specify exactly how much, but never seen an exact response (pretty normal)
I think you can pretty safely assume for HTML sitemaps 500 links work well, that is what ehow.com are using on 3rd tier (2nd tier of sitemap) though on the 2nd tier (1st tier of sitemap) they already have 3000 links to 3rd tier sitemap pages.
I don’t know whether they have tools measuring indexation but I would hope so.
testing indexation isn’t necessarily easy – on a friends site we tried monitoring the spidering of 4M pages using a popular spider tracker but it quadrupled server load.
We designed his pages to have typically 500+ links per page as well
Great Article. Thanks for sharing, I’ll certainly not be making any of those mistakes again :)
Good tips, as far as spelling goes, Grey or Gray you can check wikipedia and it will tell you both ways are correct. With “A” in USA with “E” in England.
Great Article you almost cover every thing in this post. Really helpful and useful article. Thanks for the really beautiful informative website.
Really usefull article! I found some of theese tipical mistaces on my website, will try to fix them.
I also liked that sample text written for Google (in number 7), looks like a funny thing :).
And about redundant CSS, I want to share my experience. I found out that often when you want the same page to look similar in different browsers (IE, Mozilla, Opera), it is necessary to set properties for both inner and outer tags.
I really appreciate your hard work and thoughtful writes. Its really helpful post. I am not good designer I know practice make me perfect. But wrong theory and bad concepts also make your work bad. Anyway helpful and useful tips. thanks for sharing.
Nowadays, I am mostly a hobbyist web designer. But many of the bad practices that you mentioned within your article are golden rules that have been around for quite some time. A finely written article. I could not agree more on how important web content is. Readability for site visitors is highly important, too many people keyword stuff.
Very great Info !!!
“Having similar text & background colors” that’s really funny, but it is reallity and that’s strange enough!
Some items were real discovery for me. Thanks for post!
Thank you. I got good input in order to make a cleaner Webdesign. I hope it works :-)
Brief overview, clearly structured and a pleasure to read!
Nice new input for work :) By the way: I like your way to display pros and cons. Good writing!
#
Good tips, as far as spelling goes, Grey or Gray you can check wikipedia and it will tell you both ways are correct. With “A” in USA with “E” in England.
Reply
Sometimes when I encounter sites or pages that doesn’t look good I contact the webmaster or leave a comment on the page to get the attention of the webmaster about the error I can see. It is good that we give some care to our fellow webmasters.
You almost cover every thing in this post. I appreciate your thoughtful and helpful writes. Thanks for the really informative and clear writes about designers bad practices.
Awesome article. Helped a lot
Great check list of things to be aware of when developing a website, I agree that although it’s good practice, to practice using new CSS3 and HTML5 in our websites we need to remember that it isn’t supported by older browsers, so avoiding using moz-kit and web-kit styles in your main websites is recommended unless you develop sites only for these two browsers.
“not that Comic Sans was ever glorious”
Can I just comment on how offensive this is? Some people actually happen to LIKE Comic Sans. That comment you put in there, it just wasn’t needed. Not to mention on how incredibly rude it was.
I like easy to validate your markup by using the W3C Markup Validator.. thanks :D
Absolutely. That’s interesting.I will keep visiting this blog very often.May i leave behind the link?
Keep on the good job! Awesome article. Helped a lot
Excellent Article, Added to favs, keep up the good work.
I appreciate the work that your are doing,
The writing for google thing is getting worse as time goes on.
I was doing research on a company thats in the same sector as a client andi’m working for (remaining nameless) and they pretty much had:
“word word word keyword and the keyword of the keywork word word”
This is what all the SEO companies tell them to do this like “keyword rich text” and “keyword to content ratio” “keyword desity” no matter how hard you fight to explain that the people that do read the content don’t want to read that. Marketing as always will latch onto this Cr*p…. getting a bit sick of it…
Very compact. Finally a link which I can also give every newbie. Thank you.
I usually do go through the spam filter, so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
As per your marquee statement: Remy sharp created a jQuery plugin that, in lack of other words, ‘beautifies’ the marquee xHTML tag. Give it a try, it might be what that news site was using!
Ah yeah, point number 6. Bolding too much text. That’s what happens when the clients usually can’t get enough of all the TinyMCE buttons and decides to make everything bold. Bad choice. Sometimes you have to disable these buttons for effect’s sake.
Great article, very helpful. thanks a lot!
Thanks for the link to HTMLdog. I did not know about the existence of it before.
I think my first site violated about 15/30 of these without getting some help from other creative designers. Number 11 and 14 would probably be my biggest offenses on my first printing site. Onto a much better path now with CMS and all.
Just wanted to provide a helpful link for people trying to find the typo’s on their sites. http://spellr.us/ checks your entire site it’s amazing the small little typo’s you can find.
Nice post.
The problem with bad habits is that they die hard and once someone has got into a bad way of constructing a website its hard to correct them to make them change there ways, Alot of people just do what is needed to get the job done and try to take the quickest path, which is where bad habits start and its easy to get into them for web design and above is a nice list of them.
Its good that you are pointing them out so if anyone see’s there habit then they can change it.
Awesome post :) All 30 points are worth knowing :)
Can I just comment on how offensive this is? Some people actually happen to LIKE Comic Sans. That comment you put in there, it just wasn’t needed. Not to mention on how incredibly rude it was.
wowhh nice post
Very informative article. I’ve found your blog via Bing and I’m really happy about the information you provide in your articles. Btw your blogs layout is really messed up on the Kmelon browser. Would be cool if you could fix that. Anyhow keep up the good work!
Thanks for the tips and tricks, I think I can do better now with my designs. Great help!
Great informative post, getting both nofollow and dofollow links makes your link profile looks natural, and both is great for human traffic.
Awesome read. I wish ever designer/developer would stick to these rules. Great work
This is really good, thank you very much for sharing.
This was a really great read. Some of the points are quite funny when you think about them as well.
a very usefull post !!
Good post and great starting point for every serious developer. Wide variety of aspects which a webdesiger has to be aware of!
Usefull as always, thx.
Thanks for sharing this great post!
Excellent article, keep up the good work! Nowadays, a bad practice to add would be “a slow site”. Visitors and search engines like Google prefer a fast loading website of course and there are a lot of tricks to accomplish this: minify all Javascript, compress with gZip, turn off eTags etc. Definitely recommended!
Hey thanks for this article. May have to change my front page content a little bit now!
Designers love to see variety in styles from one website to the next. Although large images, extravagant backgrounds, video, and other elements have become much more common as the average user’s connection speed has increased, many designers are still doing an excellent job of keeping things simple.
thanks for sharing, I can learn from this post to create a better design for my blog. sorry for my English…
This is a great read for both novice/advanced designer.
Hate when a new designer claims to know html/css using divs and ends up using old markup html and css, then copy/paste DIVS that someone has already done.
ie. border prior to content
”
Hello World</p
“
thanks for sharing, I can learn from this post to create a better design for my blog. This is a great read for both novice/advanced designer.sorry for my English…
nice article, with little care developer can avoid these bad practices… and improve the quality level of offering to the client and visitors..
dun make website like this:
http://downloadmore.tk
This is a good, common sense article. Very helpful to one who is just finding the resources about this part. It will certainly help educate me.
Good article indeed, made me remember some of the errors that I haven’t thought of for some time now and made me realize some errors that I didn’t cared enough.
yes, I didnt care enough about some errors on my blog. Now this tutorial made me realize.
Hello, very informative and interesting. Looks like you put a lot of effort and research into it. Thanks for all of your hard work!
In my opinion, ANY music that auto-plays as soon as you hit a web page is a bad thing. I know it annoys the heck out of me, as I usually already have my own music playing while I surf unless I’m watching videos.
I don’t know why it annoys me so much either. it could even be a song i like but still i find myself searching for the off button.
Great article by the way!
I use css myself when i can but I wonder is it so bad using tables? They still work in all browsers don’t they?
I am glad we are on the right track! thanks for this checklist. Perhaps you can add clean urls and using cufon for unique looking headings and menus
This is real live!
Very informative article, i bookmarked, sure will follow these.
There is alot I have learned from your tutorials, I have book marked this, thanks a ton.
Post is well written and it contains many good things for me. I am glad to find your inspiring way of writing the post.
Thank you so much for this article! I am working on a computer assignment about the do’s and dont’s of making a website. This helped so much! Thank you
-Emma Rose
uyarıcıdır.romatizma Yatıştırııcı and effective. Scent vucutta force and gives you the feeling.
Thanks for share this post. I am very please to read this.
I would prefer to thank you for that efforts you might have produced in writing this article. I am hoping the exact same best do the job from you within the long term too. In reality your inventive writing abilities has inspired me to start my very own BlogEngine weblog now.
Exam Notes
I will use this great tips for my blog and test it. Thank for informations
Thanks for the great advices! I bookmarked this post;)
I agree with 29 points except for validating a website; it is always difficult to do so, CMS in particular when you have a lot of content.
nice nice nice post thanks for sharing this
Thanks for the great advices!
thank you admin Ilike NİCE web site
a very interesting article. thanks from germany
List well and emphasize well
Thanks for sharing a awesome useful information for web designers
I have to admit that I’ve used some heavy backgrounds in the past. One of the greatest aesthetic gifts of web 2.0 was the utter simplicity. Function over form. I remember thinking twitter was ugly – ha ha…what a laugh.
Thanks for the great article and reminding me of all the stuff to keep in mind.
hanks for the post! gives me more knowledge ’bout design world
Very helpful blog, thanks for sharing!
NB: I hate flash :)
Thanks for sharing a awesome useful information for web designers
I agree that MSN is cluttered, but which ‘web portal’ have you been to that isn’t?
bảo vệ
Thank you for sharing! I have heard good things about Loop 11. I really love this post. But really? Is anyone still using animated gifs?
noithathoaphat
That is what I am looking for. Thanks for your undertanding aobut this.
I have to admit that I’ve used some heavy backgrounds in the past. One of the greatest aesthetic gifts of web 2.0 was the utter simplicity
I think this is a really good blog, and for me as a web designer quite funny. I have seen quite a few examples of a number of these points and they do make me cringe! In fact there are some that still have websites out there that still look like this. A good read and valuable advice!
This blog is very informative and their is so many things to learn about. I thoroughly enjoyed the reading.
I look forward to much more information on this page. Best wishes and much success.
me cringe! In fact there are some that still have websites out there that still look like this. A good read and valuable advice!
You have definitely elaborated almost all points that one can think of in the designing process, and the do’s and don’ts of each point.
Great additions, I will add them to my website petra jordan
I just love it ….. well i don’t have any doubt about your articles… your articles are awesome… Honestly you are simply the best.Thanks for sharing this with us. Buy Stomectol Online
This increased workload often forces the best of us to push our organizational skills out the window.
informative post useful for everyone
nice and informative blog
Wowww! thanks for delivering us such a nice information this is very practical and useful you can also learn about nutrition here http://www.ahealth-care.com/category/nutrition
All the points are well taken. Specially, not writing for Google as after the Panda update, Google is seeing web pages like a human I hear.
amazing pyschic reading here
Simply, admirable what you have done here. It is pleasing to look you express from the heart and your clarity on this significant content can be easily looked. Remarkable post and will look forward to your future update.
The group passed a resolution that called for the examination of the activities of the agency and its social impacts.
I agree with that, some are even more stupid than that you described in the article :)
Not only your WordPress articles rock, ur CSS and Design articles are also amazing :). Great Article as always , found your site through StumbleUpon :)
Wow, awesome, Thanks for sharing!!
Nice and informative blog, thanks!!!
I wanted to thank for this great read!I really enjoyed reading. One of the more impressive blogs Ive seen. Thanks so much
I had a great time reading your article and I found it interesting. This is such a beautiful topic that me and my friends are talking about. Thanks for this blog, we are enlightened.
My coder is trying to convince me to move to .net from
PHP. I have always disliked the idea because of the expenses.
But he’s tryiong none the less. I’ve been using WordPress on a
number of websites for about a year and am concerned about switching to another platform.
I have heard fantastic things about blogengine.net. Is there a way I can
transfer all my wordpress content into it? Any kind of help
would be really appreciated!
i think it’s more suitable for web developers rather than web design ers :)
I enjoyed reading it. I’m supposed to be somewhere else in a minute but I stuck to reading the story. I like the quality of your blog: D
That was an interesting piece of information on handwriting analysis. Please post more about this interesting topic. Thank you!
Nice expose! I’m pleased to know about the “30 Bad Practices of Web Designers” from your post. I was looking forward for such kind of information at all. I think such kind of info will definitively help the wed designers. Thanks for this nice allotment and keep it up!!
Thanks for sharing these wonderful comic videos with us. They are really funny. Will look after for some more updates.
Truly no matter if someone doesn’t be aware of then its up to other visitors that they will assist, so here it takes place.
I accede that autography can say a abundant accord about a person. I anticipate that men whose autography in incomprehensible affliction alone about themselves and do not amount others’ opinions.
Brilliant blog posting. I begin your column actual interesting; I anticipate you are a ablaze writer. I added your blog to my bookmarks and will acknowledgment in the future.
I’m still seeing “new” sites with Flash intros… when will people start listening!
Andy :-)