Do's and Don'ts for Effective Web Design

For any of those individuals interesting in some basic understanding of what not to do when designing your own website.

Some things maybe common sense for most web designers, but for those who are just starting out it really gives some good tips on how to gets started in make a website that is impactful.

 

Screw design.

My number 1 tip for web developing is:

DO NOT USE DREAMWEAVER,FRONTPAGE OR ANY OTHER WYSIWYG EDITORS to build your website.

Do your design as you go, not before - you'll just run into complications, when designing, always think about how its going to be coded - 95% of design's I have coded were physically impossible to code very well...

 

Then you had a designer who did not understand topography as well as limitations (or plan annoyances) in web development. You can have a great eye catching design without have the developer pull their hair out if you know how to design with development in mind. I will agree that you should shy WYSIWYG editors, but there are a few times when they have their purpose.

 

Another good one is, design for your target audience. For example, most people on the internet today (95%+) use monitors with pixels setting at 1024, or greater. So when you design a site that should be kept in mind. I would never design a site set for 800 pixels or something less. It appears very narrow.

 

Maybe I'm just old but I don't think a page on how to design a website should be on a brownish background with black text - Hurt my old eyes

 

Brownish background? You lost me just a little, lol

 

its actually grayish... lol

anyways i checked your article... weird because i just wrote one on the same subject a couple of hours ago.... haha

 

When I look at in IE7 or FF the background of the content area looks like a brownish color (sorry don't know the exact name of the color)

 

I would add to the list, dont use flash for navigation.....

 

Very strange, because in Safari, IE6, IE7, Firefox and Opera it all appears to be a mid-gray to me.

 

It is certainly gray, could be a monitor issue, but all the same, black text on gray background would not be a first choice for me.

 

It is a high enough contrast ratio that it is perfectly legible without any squinting or possible seizure issues .

We all have our difference preferences for color. I took color theory for two years as well as psychology courses that discussed the human emotional responses to color. I am no color guru, I am always up for learning new things. I just recently did a blog article on ways to create a more effective color palette..

My latest client is dealing a lot with natural vitamins and I decided to take a more "natural" color palette.

 

Bull, I'm on a properly adjusted for print CRT and it's effectively illegible - OBVIOUSLY so. (I had to override the stylesheet using opera to actually read the page)

Why 'obviously'? Because it violates the luminus rule. 75% total luminance difference. Anything less than that will cause legibility issues. The site violates it's own first rule.

Mind you, I mean luminance and not intensity - a lot of paint programs (like photoshop) incorrectly call intensity luminance.

Calculating luminance though is open to some debate, but back in the late 80's to early 90's Apple and IBM (and by extension M$) had a joint study of usability for colors. This actually led to the VGA monochrome conversion formula, on which color combinations were created to not only be usable on monochrome and color displays, but to be legible to the largest percentage of the population. It was a very important study that has slipped through the cracks in the web age. I still use the formula (which can be found in the original IBM 8514, VGA and MCGA specifications, as well as the "programmers guide to the EGA/VGA") today and follow the '75% minimum luminance rule'.

The formula was:
L=0.3*red + 0.59*green + 0.11*blue

So for example if dealing with byte-width color componants, the 'minimum' acceptable difference in L would be 192...

Take the content area of that page - #000000 (0) on #818181 (129) is only 129 difference. That's illegible to somewhere around 20% of the population, and would cause eye strain in at least half.

The formula also does a great job of explaining why black on full red (#FF0000 - 76.5) is hard to read, while black on full green (#00FF00 - 150) isn't as difficult, though still not ideal... and blue/red mixes are a blurry mess that can cause headaches (76.5 vs. 28.05)

Also, I don't know what the hell is going on with the cursor when the page is viewed in IE, but somethings REALLY screwy there.

Of course, here's some rules you might want to pay attention to:

1) "Goofy technologies" - Do not use plugin based technologies for primary navigation as a lot of people won't even see them. Flash for anything other than videos or games on a website is a total miserable /FAIL/ (especially since I thought your layout was broken since I browse with flash disabled by default) - Technically this violates the 'A.D.D.' section. If you are going to waste the time on fat bloated crap flash for a menu, lands sake include a fallback.

2) EVEN margins and padding make the page look planned - uneven margins look like a rendering bug. (content area AND sidebar)

3) Large areas of whitespace for no reason - look like a rendering bug (see that 'blog' title area)

4) People came to the site for the content, NOT the goofy graphics, so pushing the page content almost 300 pixels down the page with a header that's mostly white-space and an oversized menu really doesn't make it all that great a layout.

That the page code has 27 validation errors, 16k of html, 28k of css in four stylesheets, and a whopping absurd 125k of scripts - all to deliver a measly 3.7k of content - is enough for most people not to take the advice all that seriously, even if it is good advice. Seriously with images it's blowing over 360k on THAT? BEFORE we even figure the garbage flash into the equation?

... and yes, I did call what it says good advice - too bad the page it's delivered on seems to ignore all of it.

 

There is actually a fall back, the top nav is not flash but jss.

As for the bloated website you are correct, there are about 20-30 unnecessary plugins that are not being used at the moment. They came from a recent code transfer and database transfer from our old domain. However, our team has been so busy with our clients we have not had enough time to go in and clean it all up.

We just migrated over from being freelance web designers to actually acquiring an LLC and starting up our own businesses. Our team of 4 designers and developers have more then 16 years combined knowledge of web development and design.

I do appreciate your candid approach in dissecting our site design and development prowess. I will look into that issue you are having with cursor, as well as making some slight banner color changes so the white space is not so prevalent and distracting.

 

Now THAT I can understand and sympathize with - my own personal stuff is three years out of date from how I write pages... As is my big client which is consuming most of my time trying to get the rewrite done.

Hmm, that might be something to append to the do's and dont's - DO plan on a rewrite/relaunch every three years just to 'keep up' with changes in browser technologies and what the average user EXPECTS.

Though selling that idea to clients can be much akin to convincing them that 3 years in hardware is obsolete, 5 years is throw it in the dumpster.

 

Lurker, the first thing you should do is ditch those moving links you have. They are impressive - not.

 

I take it you are referring to the jss top nav?

 

Disagree, if i may

Use dreamweaver, or whathever you want AS LONG as you hand draw all your pages in a "coded mind" state:

My secret for a successful 5 years old marketing/design company:

1 - hand draw
2 - photoshop draw
3 - css coding
4 - etc
5 - etc

You have to design a solid mock up BEFORE you design it in PSD or BEFORE coding it.

If you try to "Do your design as you go", you'll find alot of issues along the way.

I've been webdeveloping (problem-solution-hand draw-psd-css) for 5 years now, so, no newbie in here.

Wanna follow this rules? Good.
Don't wanna follow this rules? No problem... you will follow them later.

 

^ I disagree : )

Whether you do a mockup first or code first is like coffee or tea, blonde or brunette, chocolate or vanilla... everyone has their preference and it doesn't matter one bit.

The advantage to coding first is that you can apply any style any setup you want later on because you're good enough to code well. Heck, I've got one site with two completely different styles at the same time, one stylesheet, one HTML page. It doesn't matter.

People who need to do a mockup first aren't bad coders, but they obviously have a different mindset than those who don't. And sometimes the boss needs to see what's going on before giving the green light. Whatever. But telling someone they have to do it your way or your way is like telling someone they can only use one kind of knot to tie their shoes. : )

Such as... ?

 

I find more issues arise working from some goofy image first than from doing code first - Actual content not fitting the page, people using whole images for text, clients bitching that the production copy text doesn't match the coded one, difference in font rendering sizes breaking the graphics, graphics not being 'sliced' properly... Not to mention the time wasted on drawing that could have been better spent actually making something useful.

But my code first approach is different from how most other people do even that - it stems from a simple realization about how the web works and the user experience. Search engines go to the page for the CONTENT no the markup. USERS go to the page for the content, not the goofy graphics and layout around it. Therin, what should be the first priority?

FIRST - mark up your content and navigation in it's natural flow order with minimalist semantic markup. PAY NO ATTENTION to how you want the page to appear at this point. Divide the 'sections' up by groups, put proper cascading headers in - everything you code be it a tag, class or ID should where possible say what something is, NOT how it appears. (seriously, this class="left justified smalltext" rubbish is total /FAIL/ at css since it defeats the POINT!)

SECOND - apply CSS to your markup to create the layout. ALL of that CSS should be coded in a separate file. This way you are laying out the content and desired navigation instead of shoe-horning content and navigation into graphically designed template. You may have to add a couple containing div's or sandbags at this point. Since we are working WITHOUT images at this point, it means that the page will work well with images disabled.

THIRD - Then and ONLY then should one start up whatever goof-assed paint program one likes and create graphics to hang on the layout. Because said graphics are all presentational (even the logo) they ALL belong in the CSS. These too may need a few sandbags if you didn't plan ahead.

FOURTH - this is the point at which if there is to be 'behaviors' you write them in your .js

As to that fat bloated steaming pile known as Dreamweaver, using it for the wysiwyg is complete utter and total fail - even using it's preview pane is complete and total /FAIL/ because it adds yet another rendering engine to the equation when changes should be checked in the browser, not some goofy adobe crap. Finally, if you aren't using those the only thing that leaves is a overpriced text editor (there's plenty of those for free or if you REALLY need the extra bull, for under $50), a next to useless FTP client (filezilla is free), or the revisioning system. The last of those is the only one I could see having any value, but frankly that too is a crutch to compensate for piss poor documentation habits and even worse inter-office communication.

As I've said before, if Dreamweaver is a professionl grade tool, I'm the next mahatma.

All that said - I'd like to hear what 'issues' the code first approach has to you because I sure as shine can't think of any.