Web Design Elements You Should Avoid Having on Your Site

As a web designer, you should design your websites to give your visitors the greatest ease of use, the best impression and most important of all a welcoming experience. It doesn't matter if you had the greatest product in the whole world -- if your website is poorly done you won't be able to sell even one copy of it because visitors will be driven off your website by the lousy design.

When I'm talking about a "good design", I'm not only talking about a good graphical design. A professional web design will be able to point out that there are many components which contribute to a good website design -- accessibility design, interface or layout design, user experience design and of course the most straightforward, which is graphic design.

Hence, I have highlighted some features of the worst web designs I've come across. Hopefully, you will be able to compare that against your own site as a checklist and if anything on your site fits the criteria, you should know it's high time to take serious action!

1) Background music

Unless you are running a site which promotes a band, a CD or anything related to music, I would really advise you to stay away from putting looping background music onto your site. It might sound pleasant to you at first, but imagine if you ran a big site with hundreds of pages and everytime a visitor browses to another page on your site, the background music starts playing again. If I were your visitor, I'd just turn off my speakers or leave your site. Moreover, they just add to the visitors burden when viewing your site -- users on dial up connections will have to wait longer just to view your site as it is meant to be viewed.

2) Extra large/small text size

As I said, there is more to web design than purely graphics -- user accessibility is one big part of it too! You should design the text on your site to be legible and reasonably sized to enable your visitors to read it without straining their eyes. No matter how good the content of your website or your sales copy is, if it's illegible you won't be selling anything!

3) Popup windows

Popup windows are so blatantly used to display advertisements that in my mind, 90% of popup windows are not worth my attention so I just close them on instinct everytime each one manages to pass through my popup blocker (yes, I do have one like many users out there!) and, well, pops up on my screen. Imagine if you had a very important message to convey and you put it in a popup window that gets killed most of the time it appears on a visitor's screen. Your website loses its function immediately!

In concluding this article, let me remind you that as a webmaster your job is to make sure your website does what it's meant to do effectively. Don't let some minor mistakes stop your site from functioning optimally!

 

I haven't run into a Web site with background music in some time...granted, I often surf with my speakers off. Is this still done? I know it was a big thing 8-10 years ago (along with loads of annoying animated dancing images)...

 

Avoid Using Flash if you want to highly optimize that page for SEO.
if its a new site, use Dv tag than tables.
validate your website with w3c standard xhtml and css.
Use ALT tag for all images.

 

Those are pretty obvious. Nothing new..

 

I totally agree (specially on the music....)

I would add :

Avoid full flash sites
They are a nightmare if you need to change the font size, you can't, if you want to copy a text for later reference, you can't...

Avoid good capcha
Good ones are increasingly difficult to read and use. As a customer, I don't care whether the website receives spam or not, it's not my problem. But if I have to try several times before being able to send my message, chances are high that I give up.

Splash pages without content
Apart from the SEO problem, it's also strange for the customer. Imagine a shop where they would tell you "oh, you want to enter ? Are you sure ? Could you ring on the bell to enter ?" ... the splash page is the same.

Low contrast between background and type
Or even worse, green on green, green on yellow, or any combination of green, red, yellow... heard something about colour-blind people ? 10% of the population have it to a certain level.

 

Damn straight... esp the captchas. I can't read those things to save my life. No way I'll expect my grandma can.

Fucking brilliant. One of our websites (which hopefully we'll be able to redesign and rewrite pretty soon) has one of those. I'd love to sneak in and fill it with text like that-- do you want in? Are you sure? Really sure? Wait wait, the splash page is a giant image or Flash loading... so wait about 5 minutes first, then you can come in...
Lawlz.

 

If you do it send me the link, I'd love to make a screen copy !

 

It'd be in Dutch first, and second my boss would likely kill me : ) But oh man... actually, I just checked and it looks like it's skipping the old splash page... maybe my whining worked? That was like 6 mos ago!

 

I worked a few month in the Netherlands, and I speak both German and English, so I should be able to understand it... happy you got your point.

And speaking of nice splash page, I do love your signature link !

 

heh, it's not mine, I just thought it was cool. It's Evan Goers? Some kid who works at Yahoo. He made it years ago when he discovered that Mozilla eventually supported both blink and marquee at the same time... thus was HTMLhorror born. : )

Are you blind yet?

 

No but I closed it quickly !

 

Do not use frames... it's so 1991.

 

Full flash sites with no Seo are one to stay away from

 

I agree with this" also if your doing replication use the no follow tag

 

Most important Hint if you are new or having limited knowledge on SEO. If you are using Java script, please include them in .js files, do not put them directly on page in header tag area. this can be a junk feed to the crawler of any search engine and that can avoid your page being crawled regularly.

Also there are certain API or tools those who want you to put their script on your page, be cautious on such scripts, sometimes they can create problems for crawlers.

 

If you sanitize it properly, like:

<script type="text/javascript">
<!--
//Javascript
-->
</script>

Code (markup):

That won't mess with the SE's at all. However, I still say put all your JS and CSS into external files, looks neater, easier to edit, and smaller initial HTML files, so users with JS or CSS disabled don't have to pass through 100 lines of JS they'll never see.

I fully agree with you there, though I'd go one step ahead: Don't use Flash for content. Flash for banners is annoying. Flash for sites takes too long to load, SEO isn't an overally big deal, there are plenty of ways to work around it.

Use Flash for games and videos only.

I kinda disagree. While I prefer divs, and styling them with CSS. Sometime its just quicker and cleaner to do tables over divs, such as 100% height columns . Or for tabular data. It'd be stupid to output a MySQL table into div tags. Tables vs divs make no difference to search engines.

I agree. There may be the odd time when you need to use them, but I can't think of an example. I have no idea how many people browse with frames disabled, so I avoid using them for accessibility.

I'll change that a bit. Validate with a strict doctype. Whether it be xHTML 1.0 or HTML 4.01, I'd keep it strict and style with CSS.

As for using ALT tags, you have to if you want to validate xHTML I'd also opt for using background images over <img> tages for non content images.

My Tips:

1. Validate Strict.
2. Test on Opera, Firefox, IE6, IE7 and Safari 3 simultaneously. Don't design for one browser, and hack for the rest.
3. For classes, ids and nameas use the ECMAscript specification, by making the first word lowercase, and all following in uppercase. (I do this for PHP and JS functions too, thanks to Deathshadow). Just make things look neater.
4. For God's sake, clean your code. Indenting is always good, but don't cram things onto one line etc.

 

*sigh* No tables for layout! Tables are for tabular data only!

I would recommend looking into CSS tables as well. At the moment, they are not supported by IE, but IE8 passed the Acid2 test, so they should work there.

As long as you are consistent with both your naming system and your indentation scheme, that is the most important thing. Personally, I use CamelCase for my naming schemes (well, except for constant variables, which are all caps).

I would add: Document your code! This isn't AS big of a deal with X/HTML, but it's still a good idea anyway (and it's vital that you do so in JS, PHP, or any other programming language you use).

 

Except when CSS needs extra bloat to do the same work. Vertical centering and as BP said 3-column 100% height models are less code with a table wrapper. I've seen Paul's CSS versions of these... always twice as many containers and a pile of extra CSS to get around the limitations. Now normally, who cares, let's just do it the right way, but if your page needs to be downloaded via Satellite by anthropologists traipsing through the Ugandan jungle and can't wait 15 minutes for a simple 3-column 100% height page to load at 2bps, a table wrapping the whole page is just smaller.

Though I've never had to write such a page and don't expect to : )

 

What exactly do you mean? If you mean styling tables with CSS, this is deployable back to IE5.5 or befor as far as I know.

Stomme said all that was needed.

I concur.