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.

  1. 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.
  2. 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.
  3. 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.
  4. Never use <UPPERCASE> tags. It's more work to use the shift key, and it's improper. Just don't do it.
  5. Know the difference between <b>/<i> and <strong>/<em>. 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.
  6. Do not use any sounds whatsoever. We don't need a "click" noise every time we hover over something.....
  7. 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.
  8. Every image should have an alt tag that thoroughly describes it. For search engines, and screen readers.
  9. 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.
  10. Splash pages. Don't use them.
  11. Disable CSS styles and make sure your site still looks legible. This is usually the best way to make sure your site's accessible.
  12. Never use frames. If you want to have a universal header or footer, use Apache's SSI, or PHP includes.
  13. 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?
  14. 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>
<!--This file created 6/17/08 9:06 PM by Claris Home Page version 3.0-->
<HEAD>
<TITLE>Problem Websites--What&#146;s wrong with sites &amp; 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">
<P><TABLE BORDER=0 BGCOLOR="#FFE6DC" CELLSPACING=0 CELLPADDING=5 WIDTH="100%" style="border-bottom:3px solid black">
<TR>
<TD ROWSPAN=2 WIDTH=150>
<P><A HREF="/"><IMG SRC="/parts/logo.gif" WIDTH=150 HEIGHT=110 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT BORDER=0 ALIGN=bottom></A></P>
</TD>
<TD ROWSPAN=2 style="font:48px Tahoma,'Arial Black','Trebuchet MS',Arial,Impact" id=static>
<P><A HREF="/"><B>Problem<BR>
Websites</B></A><FONT COLOR="#990000"><B>!</B></FONT></P>
</TD>
<HTML>
<!--This file created 6/17/08 9:06 PM by Claris Home Page version 3.0-->
<HEAD>
<TITLE>Problem Websites--What&#146;s wrong with sites &amp; 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">
<P><TABLE BORDER=0 BGCOLOR="#FFE6DC" CELLSPACING=0 CELLPADDING=5 WIDTH="100%" style="border-bottom:3px solid black">
<TR>
<TD ROWSPAN=2 WIDTH=150>
<P><A HREF="/"><IMG SRC="/parts/logo.gif" WIDTH=150 HEIGHT=110 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT BORDER=0 ALIGN=bottom></A></P>
</TD>
<TD ROWSPAN=2 style="font:48px Tahoma,'Arial Black','Trebuchet MS',Arial,Impact" id=static>
<P><A HREF="/"><B>Problem<BR>
Websites</B></A><FONT COLOR="#990000"><B>!</B></FONT></P>

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: , , No Comments
8Oct/090

New admin of Toast

Toast.ath.cx (now toast.awesomebox.net) is now on my server. Woo!

Here's what to expect: http://toast.awesomebox.net/thread-23.html

Domain name soon. Will most likely be toastprogrammers dot org.

Tagged as: , No Comments
   

Categories

Dreamhost (♥ web hosting)

Tag Cloud

Recent Comments

Archives

Ad

Your Ad Here
This link kills spam