Tips « Captain Awesome's Weblog

24Jan/100

Tips for a successful web design

I was bored, so I thought I'd put this together for whoever may read it. Here are some quick pointers for all you other web designers out there.

Never use Flash. Reasons:
- Not everyone has it.
- Google can't index it.
- Inaccessible. Screen readers can't read it. (Meaning, blind or VI'd people can't see it)
- URLs don't change throughout. If you want to link to a subpage, tough.
- People may have a hard time navigating, because scrollbars, buttons, and such do not match the browser-provided ones.
- Most people overdo it. You have to sit through 15 seconds of animation just to change pages.
- "Loading..........."
- If you want to use Google Analytics, you really can't.
- General crappiness. It makes you look unprofessional having a bunch of Flash shit in your portfolio.
If you want to use images to replace text, do it properly. Say you want to make an image heading, put the same text in H1 tags inside the div, then add "#divname h1 { display: none; }" to your CSS. We mainly do this for accessibility (screen readers), search engines, and text-based or WAP browsers.
Know the difference between block elements, and inline elements. Never have a <div> inside an <a>, for example. Search engines have a hard time with this.
Never use <UPPERCASE> tags. It's more work to use the shift key, and it's improper. Just don't do it.
Know the difference between / and /. The former two should really be done in CSS because they have no meaning (and I believe that text and layout should be kept separate). The latter two do have meaning. Screen readers put emphasis on them, and text browsers brighten then.
Do not use any sounds whatsoever. We don't need a "click" noise every time we hover over something.....
If you're going to use experimental CSS tags such as border-radius, make sure the site doesn't look like shit without them, because IE doesn't support them at all yet.
Every image should have an alt tag that thoroughly describes it. For search engines, and screen readers.
In CSS, try to use "em" instead of "px". Since em's are relative to font size (1em = the length of an "m"), zooming in your page won't cause destruction. You can of course use decimal and negative values.
Splash pages. Don't use them.
Disable CSS styles and make sure your site still looks legible. This is usually the best way to make sure your site's accessible.
Never use frames. If you want to have a universal header or footer, use Apache's SSI, or PHP includes.
No line of text should be wider then about 600px wide. The reason we read newspapers in columns is because our eyes prefer to read that way. Would you read a book where the lines of text spanned both pages?
Don't underline text that isn't a link.

Irony:

I came across this site, ProblemWebsites. It documents websites and things wrong with them. Unfortunately, it breaks a good percentage of my rules, and is extremely ugly. Let us have a look at the first few lines of source code, shall we?

<HTML>

<HEAD>

<TITLE>Problem Websites--Whats wrong with sites & how they can do better</TITLE>

<X-CLARIS-WINDOW TOP=52 BOTTOM=886 LEFT=144 RIGHT=1361>

<X-CLARIS-REMOTESAVE SERVER="problemwebsites.com" USER=visitus DIR="problemwebsites.com/" FILE="">

<X-CLARIS-TAGVIEW MODE=minimal>

</HEAD>

<TR>

</TD>

<A HREF="/">Problem

Websites</A>!

</TD>

<HTML>



<HEAD>

<TITLE>Problem Websites--Whats wrong with sites & how they can do better</TITLE>

<META NAME=GENERATOR CONTENT="Claris Home Page 3.0">

<X-CLARIS-WINDOW TOP=52 BOTTOM=886 LEFT=144 RIGHT=1361>

<X-CLARIS-REMOTESAVE SERVER="problemwebsites.com" USER=visitus DIR="problemwebsites.com/" FILE="">

<X-CLARIS-TAGVIEW MODE=minimal>

<link rel=stylesheet type=text/css href=/parts/css.css>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<TABLE BORDER=0 BGCOLOR="#FFE6DC" CELLSPACING=0 CELLPADDING=5 WIDTH="100%" style="border-bottom:3px solid black">

<TR>

<TD ROWSPAN=2 WIDTH=150>

<A HREF="/"><IMG SRC="/parts/logo.gif" WIDTH=150 HEIGHT=110 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT BORDER=0 ALIGN=bottom></A>

</TD>

<TD ROWSPAN=2 style="font:48px Tahoma,'Arial Black','Trebuchet MS',Arial,Impact" id=static>

<A HREF="/">Problem 

Websites</A>!

What the hell is all this "X-CLARIS" bullshit? At first I thought the design of the site was parody, but this is just failure. Tables? Seriously?

Tagged as: Fail, Tips, Web Design No Comments

5Sep/090

Back up your crap

Looks like someone over at UF, with a hard drive full of priceless music and photos, decided to screw around with Gparted without backing up...

Guys, anything important to you, BACK IT UP. Years worth of files can be gone in less than a second.

Mac users may be familiar with Time Machine - A backup program included with OS X. If you have a Mac, plug in an external hard drive, and it will make copies of all your files hourly. You can then use an interface to go "back in time" with any of your folders. Here's a screenie:

Time Machine

Time Machine for Mac OS X definitely wins in terms of easy, seamless backups. But what about our Windows and Linux friends?

For Linux, there is a similar program called Time Vault with the same idea. Seamlessly back up to an external drive and "go back in time" whenever you need to. Here is TimeVault's home page on the Ubuntu Wiki. The UI may not be as cool as Apple's, but if you're the type who never backs up, or is just too damn lazy too, you should consider trying this out. Here's a screenie:

And finally, our Windows users. Seagate has a solution called Replica that works pretty much the same way, although there is a catch, you have to use their hardware - you can't use just any hard drive. Damn anti-semites.

Of course, this is just the start. Even if you have 200 enterprise-class hard drives RAIDed together for the ultimate backup solution, what happens when your house catches on fire, or you get robbed? Gone. Another thing you should do for those really important files is off-site backups. I would do one or more of the following:

Put a copy of your system on an external, then store it at a (trusted) friends house.
Register with JungleDisk (or something) and store your important files on their servers. (That wasn't an affiliate link, I swear)
Put your treasured files on a flash drive and keep it in your anus (kidding)

And remember, never EVER screw around with partitions or hard drives without first having a working backup.

Tagged as: Apple, Backups, Linux, Mac, Windows No Comments

Tips for a successful web design

Back up your crap

Categories

Dreamhost (♥ web hosting)

Tag Cloud

Recent Comments

Archives

Ad