Web Design Issues & Suggestions

So I've been running into a lot of fan sites lately, looking for raw images and the like. Here are some common issues I've noticed.

1. Unless you have the mad skillz of a professional web designer or are willing to test your site on every computer platform and browser known to humanity, don't use imbedded frames. Please. I can't tell you how many times I run across sites with frames and the scroll bars don't work for me. I kind of expect that when I'm using my old Mac at work (OS 9.2, IE 5.5), but there's no excuse for sites that don't work on Windows XP!

Here are the main browsers you should test in:
Windows: Internet Explorer, Mozilla
Mac: IE, Mozilla, Safari

This is important even when you're not using frames. I've run across sites on my Mac that show up as a blank page, yet I go over to a Windows 2000 machine and there they are. I know not everyone has access to a Mac, but if you do, please check. It's hard to believe when you're out in suburbia (I'm pretty sure the old G3 in my closet is the only Mac within a 20 mile radius), but people do use them!

If you want to be really through, get Netscape & Opera, but the percentages are pretty small on those. DO try to check in least IE on both platforms (Mac & PC) if you can.

2. Keep your text area proportional to how much text you have. If you regularly write huge essays, it's probably not a good idea to have your text area set at 200 px wide.

3. Not everyone is using the same screen resolution you are. Although 1024x768 and higher are fairly common, a lot of people are still surfing via 800x600. And even with the larger monitors, not everyone uses the full width or height of their screen. Keep that in mind when you're designing, and make sure your site is still usable at 800x600.

In my next post, I'll address something a bit more designish - fonts and color choices. In the meantime, what's your advice? What kind of design issues have bugged you while you're websurfing?

"and make sure your site is still usable at 800x600. "

Not being warned always makes me mad. I use 800 x 600 because I share a comp with my half blind mother.



Lesse...gifs always bug me, because a lot of gifs are of reeeeeeally poor quality. Either have good ones, or don't have any at all. Never settle for mediocre.


Embedded music. Never, EVER imbed music without an off button!!!!! And use frames for the musica, so that way you don't have to hear 3 seconds of 1 song from one page, then switch pages to another, etc etc.


Sites that say, "Email me anytime!" and you don't get a response (when the site was JUST updated) ore you get a nasty email back saying not to contact em. Hoo-eee.

Thank you! If only more people would heed this advice!

Great advice.

Here's What i think:

Frames.... NO!!. Framed pages can really suck. Unless you use one Iframe and the rest of the page does not scroll. Other wise it really sucks (and i know that my site is guilty of that but i will be changing it soon, i promise). However having an Iframe does make it a bit easyer as you only have to load one part of the page when you clikc on a link.

Embedded music..... NO!! i have seen several forums with embedded music. Some with out the controll thingie. These really annoy me as they can not be perminantly switched off (the start up again when you go to another page) and they are usually annoying Midi music which usually starts faaaar too lould.

Well thats all i can think of now.

How did I forget music? I hate that stuff. With a passion. You know, if you're surfing SW pages, chances are you're already pretty familiar with the Imperial March and don't need to blasting out at you. If I run into stuff like that I generally push the back button and don't come back.

Here's a quick guide to how to properly use image formats:

JPEGS - Anything with a wide variety of shades and colors, like a photograph.

GIFS - Line drawings or anti-aliased text (no/minimal shading), limited colors, or when you need transparency, graphics with lots of flat colors.

There are different layers of compression with each format, so play around.

Not being warned always makes me mad. I use 800 x 600 because I share a comp with my half blind mother.

I usually run at 1158 x 870, but my window is NEVER at the full width, because I don't like to read text (on sites like this) stretched out so far. And then I ran into a bunch of poorly designed teenybopper personal sites that were all designed on 1280 x 960... (!)

Oye oye oye.

Here are the main browsers you should test in:

In practice it's difficult to do that even in more professional settings. You also forget about two others:

Linux: Mozilla, Konqueror, Opera, lynx, links
WebTV

I've run across sites on my Mac that show up as a blank page

There are other reasons for that especially on older Macs and SGI for example in that their browsers don't support CSS for example.

Keep your text area proportional to how much text you have. If you regularly write huge essays, it's probably not a good idea to have your text area set at 200 px wide.

I prefer mopre or less free flowing text. If you have huge essays it might be better to divide it into diffrerent pages with some sort of navigation.

Keep that in mind when you're designing, and make sure your site is still usable at 800x600.

If you consider WebTV users, you would need to make it loomk reasonable at 640x480!!!

As far as running, I usually run at 1600x1200, though at time as low as 1024x768. The reason is the way Photoshop and Dreamweaver are you need al the sceen real estate you can, plus having opn Textpad, Filezilla, etc. But that doesn't mean my sites are designed for those resoloutions, I just run my computer that way and design for 800x600 or 1024x768 at the most and check later. part of my sites have adjustable widths (via coding) or are freeflowing so that they look reasonable at most sizes.

I used to make my websites in frames but now, I make the using iframes (inline frames). It's so much easier for me to make the layouts I want to.

As for images, I just make them thumbnail size so it doesn't take a page very long to load. A page that has so many images on them and isn't scaled, will take VERY LONG TIME to load. Thumbnails are good for fan art galleries. most of my fan art images are jpg. format. i used to use gif but then i found, i could use jpg and still keep the image quality i wanted.

I don't really know what text size I use since I go by headings (dreamweaver mx) but now I use standard arial narrow for all my sites. no more fancy fonts, no matter how much i love them. well, except for fan art.

bg colors are a different story.

i tried to help this girl with a layout. she actually wanted people to submit layout ideas to her but i was totally floored when she asked me how to upload it and how to put it up on her website. i couldn't understand how she didn't know how to do this if she already had the site up? it doesn't make sense to me.

so, what lesson is there here? you should know how to upload, or at least update your website. now that i think about it, maybe someone helped her and she never really learned how to do all of these things. but it is definitly important to know if you make a website.

~aeryn

~aeryn

In practice it's difficult to do that even in more professional settings.

Tell me about it... The Macs & PCs, or at least IE & Mozilla are pretty easy, though.

I was mainly being being realistic. Don't want to get everyone too confused. I wonder what's harder to find, a Mac or a Linux box?

As for WebTV... I admit to being elitist. Screw 'em. But then, I've never met a WebTV user, online or offline.

I used to make my websites in frames but now, I make the using iframes (inline frames). It's so much easier for me to make the layouts I want to.

iframes are the ones I have issues with. Regular frames, while ugly as hell, will work, usually. For one, you can pull the page out of a frame that won't scroll with a right click, something I've never been able to do on a dead iframe. They might be easier to design around... but grr. They annoy me so. Better to use a fixed-width layout. They're easy too, and don't take too much control away from the end user. I'm very big on that... there's little more annoying than a badly designed iframe site - two scroll bars? Only one of which works? And then it doesn't move the content? :: headdesk ::

And yes, FTP. Basic HTML & CSS. You'd think it goes without saying, but there's always someone who surprises you...

I need to write my font post!

"Frames.... NO!!. Framed pages can really suck."

I use frames cause they're easy to code, extremely easy. I never bothered learning tables. Plus, with frames, you have a side page, and you don't need any other links. Most people I know use IE or mozilla, and all my freinds round here use IE, which is really all I give my site out for, my buds. Now if someone else stumbles across it, sweet, but eh, not my goal

I'm going to be opinonated: Comic Sans is the devil. It's on pretty much every computer (well, Macs and PCs) but it's just a horrible, horrible font. Like comic fonts? Here's a lot of good ones for free. Delete Comic Sans. Never use it it again.

Okay, now onto the serious.

First, a quick typography lesson. For our purposes here, for on-screen text and basic reading, there are two kinds of fonts: serif and sans serif. Serif fonts have small embellishments on the ends of each stroke; sans serif are the basic letterforms.

Serifs: Georgia, Times New Roman, Garamond
Sans Serifs: Verdana, Trebuchet MS, Arial, Helvetica

Although serif fonts are preferred for print use (check any newspaper, magazine, or book) sans serif fonts are better for web & screen use because there are less pixels. to get in the way.

When choosing web fonts, keep in mind there are really a limited number of choices. The best fonts for web use - it's a short list:

Verdana
Trebuchet MS
Georgia

They will be on pretty much every computer; thanks to IE, they're practically a default. There are a few more, but in my personal opinion, you can't go wrong with any of those three.

All were designed specifically for on-screen use, and work well in large chunks of text. They've become so common throughout the web that they're practically invisible, which is what you want for your big blocks of text. You want a font that reads well, so well that someone really doesn't notice it.

And believe me, it pays to keep in mind what the fonts were designed for. Helvetica is a lovely font when you print it out, but it doesn't look all that great on screen. (Arial is actually a cheap clone of Helvetica, created because Microsoft didn't want to pay licensing fees.) And NEITHER font should be first in your style sheet, because neither was created specifically for on-screen reading: there are better choices.

Here's what I use in my style sheets:

serif:
font-family: georgia, verdana, arial, sans-serif
(I don't like Times New Roman on screen, so Georgia is the only serif in the call.)

sans serif:
font-family: verdana, arial, sans-serif;

another sans serif:
font-family: Trebuchet MS, verdana, arial, sans-serif;

Pretty basic, yes? If none of my preferred fonts (or arial) is there, it defaults to whatever sans-serif you have set in your browser.

For font size issues with style sheets, I'm going to simply link to Size Matters, an excellent essay over at alistapart.com. Their advice is good, probably better than mine, as I like to use the actual pixels rather than 'larger' or 'smaller.'

This turned out MUCH longer than I thought it would, so I'll get into colors next time. I apologize if I'm preaching to the choir here, but it can't hurt.

Also, I need to say that I LOVE TABLES. You won't see me write anything here on CSS positioning because I don't understand it quite yet, and I build almost everything I do in tables. (I do use CSS, but the skeleton of every page is a table.) I am behind the times, yes. I know this. I'm not ready to let go yet. Screw web standards: I love tables, and I make them my bitch on a regular basis. We all have our weaknesses.

If useing a font that isn't on everyones compy, make sure you provide a link to a DL of the font.

It just makes more sense to just use fonts that everyone will have. I know that I'm not going to download a specific font or specific off-the-wall plugin just to view one website, and I know there are plenty of other people who think the same way. If I can't view your site with what I already have, I'll just click the back button and find a similar site.

It just makes more sense to just use fonts that everyone will have. I know that I'm not going to download a specific font or specific off-the-wall plugin just to view one website, and I know there are plenty of other people who think the same way. If I can't view your site with what I already have, I'll just click the back button and find a similar site.

I've run across a handful of sites that do that, but in most cases the font shouldn't be used for text, anyway.

If there's a font you really like and want on your site, use it for your masthead or graphics. I'll try to dig up some articles on choosing fonts that work together, since it's mostly instinct for me and I'm not really sure how to write it out.

I do have a few specific rants in me on the SW logo font, though. Beware!

Man, I forgot all about this thread...

Here's my rant on the Star Wars logo font - It should never used used for anything other than 'Star Wars' itself. Yes, LFL has used it for the ESB logo, but we can be fairly sure that they had a pro do it. But note that for the prequels they've been using a nice, simple serif (I think it's a version of Caslon) for the episode titles. And it works just fine.

I wince every time I see it on a site. I wince looking at the default JC banner above. For one, it's a cliche, and a very powerful one at that. And secondly... it just doesn't look very good when you type anything other than 'Star Wars' with it. The original logo was designted to be just that - a logo. Not an entire typeface. And it shows.

Don't ever be afraid to move away from the obvious. It'll serve you well.

I forgot about this thread again.

Quick rant on colors: Yellow text? Black background? One word: NO.

More on contrast... later.