Design Tips

Donutey

I see many websites that make simple design mistakes, that are extremely painful to fix after they've been made. Therefore, this is the non-comprehensive list of suggestions compiled so far (subject to update).

--Feel free to suggest new ideas and edit/correct existing ones.--

Denote font size in em or %, at least 1em or 100% for body text.
This makes it so the font size automatically scales with the resolution, and is easily readable.
Use CSS for all your formatting needs, don't format inline unless it is for a specific instance.
Don't use frames if you can avoid it, everything they can do can be done with PHP (includes) and CSS.
In general don't set a fixed page width, set the width of the website in % of the entire screen. Make sure to set a minwidth and maxwidth though, so the website doesn't become a mess at high/low resolutions and with widescreen monitors. If designing for a fixed width (it does give you more design options) 800x600 still should be the goal, definitely designing for less than 1024x768.
Use JPEG images for any photographs/complex images, GIF for any animation, and PNG for everything else.
Try to avoid putting text as an image, this reduces page size drastically.
Format your page in UTF-8, it opens up a whole world of new text characters you never knew existed.
Test your page's rendering in at least IE6, IE7, and Firefox. Safari, Opera, and Konquerer if you feel like it. Test often and early, it will save a lot of time later on.
In general stick with white on black or black on white body text to keep page readability.
No matter what you design your site in, validate it with W3C online validation. Your site doesn't have to be perfectly valid, but it's much easier to track down rendering bugs when you know it isn't because you forgot to close a tag.

loryl

It took me 90% of the post before I noticed the name of the OP. It then took me another minute before I realized that I've seen the name somewhere before. I donno. I associated it with someone cool/who codes and stuff but I couldn't figure out whom. Did a random Google search. Jaw dropped. -_-

So yeah. LIEK WHOOOOA I LIVE IN THE SAME AREA AS YOU and attend the same school as you do. So weird.

Anyways:

-Declare a doctype.

-Set a background color if you set a foreground/text color.

-If you want publicity, make your site search engine friendly. No iframes, image links, and such.

-Include alt tags with images.

-No random .midi/.wav/.mp3 files unless you want your website to be "unique". If you put them on there, make sure they're not too low quality and viewers have some way of stopping the music.

-Know your audience. If your viewers are 100% mac viewers, make sure your site works on every common mac browser (ie: IE, safari, etc).

-When you're designing a site, it's better to test on a browser that is more stringent on web standards. Use Firefox or Opera instead of IE. This way you can catch your errors when you make them, not when you're completely done with the site and are double checking to make sure everything is working right.

-target="_blank" sucks when you're dealing with external links. It deprives your user of control. Normal links will do.

-No blinking text unless you want your viewer to rip their eyes out. Marquees should be limited, if not outright prohibited.

-Assume that if your page doesn't load in 5 seconds, your viewer will close the browser window. Therefore, make sure your page doesn't have big files that take forever to load. It also kills your bandwidth.

-Thumbnails are not just miniatures of original files with length and width redefined. They're actually different files with smaller file sizes. Don't be lazy.

I'm a bio major, not a CS major. I make computers crash, I don't fix them. Wink

Now I remember. You're the first frihost/frih.com website I've seen when I was looking up potential hosts.

GB

I agree with a lot of what you said except for one tiny nitpick. I'd check your site in mac browsers anyway, as you never know who might be coming. Also, IE is sufficiently deprecated to the point that many big sites are even stopping support for it. I use a mac and every other mac user I know doesn't use IE anymore.

The good news about mac browsers like Safari is that it is standards compliant too! So if it works in Firefox on a PC, it will probably work in Safari or Firefox on a Mac!

------

Now for the tips section of this post:

Keep learning! Read books, take classes if you can, read industry publications, talk with other professionals in your area, and observe websites and other design media around you. Soak it in so that when you come to design your site you'll have a ton of ideas floating around in your head.