5 things web designers should be shot for.

[ElMarko]

In no particular order.

1) Excessive font control. Just because you like sans-serif fonts doesn't mean that everyone does. Believe it or not, serifs aren't just decorative. They make it easier to scan long lines of text. This applies to size as well. If you want to use size for emphasis or de-emphasis use " * xx-small | x-small | small | medium | large | x-large | xx-large" and use them sparingly.

2) Only looking at your pages in one or two browsers. Your page should be useful in all browsers, including the ones in phones and lynx.

3) Using proprietary formats. Not everyone can play windows media or flash animations.

4) Weird colors. You don't want your users going blind reading green on purple.

5) Using raster images instead of SVGs for charts and graphs.

[Boozy]

I don't understand numbers 1 and 5. What's serif vs. sans-serif? Raster vs SVGs? If these are somewhat industry-specific terms, you might have to define them for people to understand and comment.

[Arcade Man D]

serif is a font like Times New Roman. Note the extra lines on the Is.

sans-serif is a font like Tahoma or Arial.


Raster vs. SVG: Rasters are bitmap/jpg/gif/png graphics. SVG, I believe, is Vector, which is ideal for charts and graphs that can be drawn with simple shapes.

[Pedersen]

1) Excessive font control.

This one I can agree with. The font should belong to the user. The web designer should choose a set of fonts which covers a wide range, and use the CSS files to allow the user to choose which font to use.

Furthermore, web browsers should make this easier to select.

2) Only looking at your pages in one or two browsers. Your page should be useful in all browsers, including the ones in phones and lynx.

Here, we will disagree. Allow me to explain why.

Off the top of my head, the following browsers are in existence: Opera (on Win/Mac/Linux), Konqueror (on Win/Mac/Linux), Galleon (on Linux), Epiphany (on Linux), Safari (on Win/Mac), iCab (on Mac), OmniWeb (on Mac), Camino (on Mac), K-Meleon (on Win/Mac/Linux), Flock (on Win/Mac/Linux), Mozilla Seamonkey (on Win/Mac/Linux), Firefox 3 (on Win/Mac/Linux), Firefox 2 (on Win/Mac/Linux), Internet Explorer 5 (on Win/Mac), Internet Explorer 5.5 (on Win/Mac), Internet Explorer 6 (on Win), Internet Explorer 7 (on Win), Internet Explorer 8 Beta (on Win), lynx (on Win/Mac/Linux), links (on Mac/Linux, possibly Win), elinks (on Mac/Linux, possibly Win), the web browser on PalmOS based Treo's, the web browser on Blackberries (I assume that they haven't had major functionality changes, in which case multiply by the number of major versions and models which use them), the web browser of Pocket PC v2 phones, the web browser on Pocket PC v3 phones.

Now, I did say off the top of my head, so I'll stop there. I had to start thinking if there were more.

There's a whole lot of easily identifiable sub-groups in my list that I didn't clarify. For instance, every distribution of Linux should be counted separately since each distribution of that can tweak any of their browsers. If you want to count Internet Explorer running under Wine, there's another set. If you want to account for different screen sizes and (possible) variations in the browser for Blackberries, Palm's, and PocketPC phones, you have to multiply by those variations, too.

No, I didn't include all that. And I still came up with 43 (or was it 48? Don't care, not going to count again) different browsers to test. That's right, different: Firefox 3 on Linux is different from Firefox 3 on Windows. It does things differently on occasion. It shouldn't, but welcome back to the reality of development.

Thoroughly testing your site means testing every aspect of your site in every browser. There's usually a home page, an about/contact page, at least one "content" page, (if you're an e-commerce site) a product group page, a product page, and a search results page. Each of them has to be tested and tweaked. That's six pages that have be checked over. Multiply by 43, and you get 258 load and check cycles.

The cost of making your web site just skyrocketed. Oh, and don't forget that I included IE5, IE5.5, and IE6 separately. You see, all of them have major differences in how they do page layout, so you have to test all of them (and yes, lots of people still do use IE5, and IE5.5).

Don't fault web designers for only testing for a few. At this stage of the web, all they can do is try to separate content from presentation (using CSS), and hope like hell that you browser will degrade nicely if you're not using one of the ones they do test.

3) Using proprietary formats. Not everyone can play windows media or flash animations.

Unfortunately, there's no good answer here. You want common formats so everybody can play them. This means something like MPEG, which has patents around it. You put up videos in MPEG, and you have to deal with higher costs of production. Also, since MPEG doesn't do streaming very well, you have to deal with higher bandwidth costs if people jump around in the video.

You've got RealVideo as an option (buffering). But customers generally don't (buffering) like it anymore.

Ogg Theora seems good, but the support for it is nearly non-existent.

The most common formats that are left are Flash and Windows Media. Honestly, I'd prefer Flash, since that's more easily cross-platform and more likely to be playable by the customer.

4) Weird colors. You don't want your users going blind reading green on purple.

I'll just agree with this one.

5) Using raster images instead of SVGs for charts and graphs.

Well, since SVG is not (by default) available in IE yet (though plugins do exist), what do you suggest web site designers do? Tell those users to download a plugin? Customers, as a rule, don't like being told to download something else just to view a small piece of content. They'd rather find someone else who gives it to them in a way that they can already view.

SVG is a great idea. And can be useful in the right situations. Mass use by the general web browsing public is not one of those situations right now.

I don't understand numbers 1 and 5. What's serif vs. sans-serif?

Serif vs Sans-Serif: Please check this wikipedia article. They have a graphic at the top of the page that shows it very well (not reproduced here because it's actually 3 pictures with surrounding text, not just one).

Raster vs SVGs?

Raster images are pictures. For instance, use a digital camera, and snap a pic of your house. That's a raster image. Now, make that picture 100 times it's normal size, and note how blocky the image is. Very jagged edges, any imperfections in the image very visible, etc.

SVG stands for "Scalable Vector Graphics". The difference is that SVG, more or less, contains a description of the house. For instance (in layman's terms), it might say "The house has a wall that is 20 feet tall. The roof is an angled roof with a 30 degree angle. (etc)". Now, an SVG viewer will be able to scale that picture to any size, and preserve the cleanliness of the image. The roof line, for instance, will look just as smooth on a 200 foot picture as a 4in by 5in picture, because the picture is being redrawn using those instructions.

SVG is a great concept, but not yet ready for general use.

[tropicsgoddess]

Flash only websites. Not everybody has Flash on their computer and truth be told it's a little annoying to have to roll over your mouse to get to the list of whatever menu is on your site. Music on the website without the option to turn it on or off. Not all of us want to hear some techno or any other stuff you think is cool but is lame to somebody else.

[protege]

How about this? What's the deal with people who, instead of simply declaring a solid-color background...they'll create a 1x1-pixel graphic, and tile that? Annoying as hell on my older machines, simply because I have to wait for that crap to load. Also, some photo galleries seem to be set up to annoy me. How? Well, it's good that they use thumbnails. What's not, is that they're sometimes resized (not low-res or even .gifs) versions of the files they link to. Again, way to slow down my crappy machines, people!

[DesignFox]

Oh boy. Having gone to school for graphic design and taken courses in web design I could go on forever about things that piss me off that some so called web designers do...

First of all, backgrounds. They should be simple and clean. Nothing flashing. No eye-burningly bright colors.

Secondly, the font should not clash with the background. If you have to struggle to make out the letters, it's a bad color combination.

Thirdly, flash everything. Not everyone has a high-speed system, and some of us hate loading 16 thousand graphics and animations. If it takes more than 2 seconds to load on my machine, you're bust.

Fourthly, whoever mentioned music- I agree. It has no place on a website. I'm not expecting the noise and it startles me, then if I can't turn it off, I really get irritated. Music should only be included if it's something you can turn on yourself- like on a band's website or something like that.

Huge graphics that are re-sized by the browser, rather than actual small images...If I see the screen bouncing around while my browser catches up, it's just sloppy and annoying. If you have thumbnails, the actual image should be THAT size. It shouldn't be a humongous image being re-sized by the browser.

I'm sure I could go on. I HATE sloppy web design. I HATE flashing lights and music on web pages.

Oh and the other thing I DESPISE is poor navigation set up. If I can't find what I want immediately, I'm done with your site. I had best be able to navigate without having to resort to my back and forward buttons, without going through six links before I find the page I want with the link to the other page I want, etc.

Oh yea, poor web design frosts my cookies big time.

[Pedersen]

Here's a site for you all to vent on:
http://www.geekchichq.com/

Go ahead, check it out. Copy/paste some text.

And then read the source of the page, paying attention to the title of the page. I'm sure you'll all enjoy it.

[ElMarko]

Here's a site for you all to vent on:
http://www.geekchichq.com/

Go ahead, check it out. Copy/paste some text.

And then read the source of the page, paying attention to the title of the page. I'm sure you'll all enjoy it.

It looks like someone used a wysiwyg editor.

[Pedersen]

It looks like someone used a wysiwyg editor.

I don't think so. See, what's not totally obvious about that page? The entire page (except for their navigation bar) is one big graphic file.

And then they copied the entire text of the page into the title attribute. Definitely don't know of a wysiwyg web editor that does anything similar.

[PepperElf]

4) Weird colors. You don't want your users going blind reading green on purple.

so i guess my fondness for pink on grey is right out?
actually i'm guilty of worse than that... like this or this, but usually I prefer just pink for a baseline, and yes i really did use those colors on my myspace and ... well my livejournal is pink on grey like it is here, mostly

[SimplyAnother]

I realize I'm replying to a months old post. But I thought I'd throw in a for what it's worth.

While the default for this forum is the light colored text on the dark background...some of us can't see the default--so we have a different skin. And that renders pink posts almost invisible.


(And holy crap do I agree with everything about crappy webpages. Blinky shit makes my eyes bleed. )

[Boozy]

I'm using the "Default" instead of the black. I prefer the skin layout.

Sometimes I can't see the words when someone changes the colour, but I usually just highlight the text with my mouse.

[lordlundar]

[color=pink]so i guess my fondness for pink on grey is right out?

No, that's fine. I think what he means is non neutral colors, like purple on a bright green background for example.

[Bloodsoul]

I actually recall reading a GamePro article that had blue text against a red background.