Captain Awesome's Weblog

28Jan/101

Which doctype SHOULD I use? (Or, HTML vs XHTML)

Any web designer should know what a doctype is, but the big question is, WHICH one? This is what I have heard bounced around the office (I work for idiots):

<!DOCTYPE html> isn't a real doctype
XHTML is the future and HTML is obsolete
The only difference between HTML and XHTML is the latter requires indenting

I'm not sure where that came from, but none of it is true. Allow me to correct it:

<!DOCTYPE html> is the real doctype for HTML5
HTML is not obsolete
The third one is too dumb for me to comment on

Now, on to HTML and XHTML. Right now, the difference isn't huge. XHTML is harder to validate, but it forces you to use cleaner code. However, nothing is stopping you from using said clean code in HTML. For example, HTML 4 and 5 will accept either or . The second one is a better choice, XHTML forces it.

In the future, maybe in ten years, XHTML will be the norm. The idea is to integrate HTML with XML (hence the "X"), and be able to include other markup languages such as MathML. XHTML has been around since 1999 (something like that), and it's made little progress since then, so, you decide what to think of that.

At this point, in January of 2010, I believe HTML5 is the best way to go. Why? It's moving quickly, the doctype isn't a pain in the ass to type (I still copy and paste XHTML's from W3Schools......), and it has some awesome tags. Just to make it the focal point of this blog entry:

Use this doctype: <!DOCTYPE html>

Yes, HTML5. Remember, being a newer standard, you CANNOT use old presentational tags such as , , and <center>, and, while valid, you shouldn't use tables for layout. Fun factoid: HTML was never intended to have these tags, they were added in HTML3 and this caused nightmares. They were removed again in HTML4.

If you aren't comfortable with current web standards, I recommend you use an HTML4 doctype. Here are the three to choose from:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4 Strict: Don't bother with this one, just use HTML5 (<!DOCTYPE html>).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4 Loose/Trans: Allows use of presentational elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML4 Frameset: Allows use of presentational elements, and frames (Remember, SSI > Frames)

I hope this gives you some idea of which to use.

Tagged as: HTML, Web Design, Web Development 1 Comment

27Jan/100

“Overview of the iPod’s hardware”

Whoops, I meant "iPad". In the streaming keynote on Apple's site, SJ slipped up and said "iPod" in place of "iPad" (around 00:29:35).

Come to think of it, "Slate" was a better name.

Tagged as: iPad No Comments

27Jan/100

iPad announced today

You probably already knew this, but I'm gonna say it anyway. THE APPLE TABLET IS RELEASED. Here's the video.

Apple iPad

It looks amazing (Mind you, I'm a sucker for shiny things made by Apple). From what I can tell, here's what separates it from the iPod touch:

Larger screen (Just under 10 inches)
"iBook" store, which allows you to purchase and read eBooks
Allows you to add wallpaper to the home screen
Sexier aluminum backside
More visual effects. Ie, you can reverse-pinch photo albums to "peek" under them.

Verdict: I have an iPhone, but still, DO WANT.

Boxxy: DO WANT

Tagged as: Apple, DO WANT, iPad No Comments

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

21Jan/100

<3333

Tagged as: Boxxy, Serious Business No Comments

10Jan/100

Dreamhost loves bashing people

I love Dreamhost

From the TOS:

Pursuant to this policy, the poorly-written WordPress plugin "All in One SEO Pack" is expressly prohibited on DreamHost shared hosting servers.

From the "Partner Offers" section of the panel:

...(and didn't want to turn our web panel into a veritable Dell desktop, cluttered with 3rd-party junk) we've pretty much always turned them down.

Some may call this unprofessional, but I love humor (and Dell sucks)

Tagged as: Dreamhost, lol, web hosting No Comments

5Jan/100

New search engine could move web far ahead

I came across something interesting today. Apparently a few fine fellows at Stanford University are developing a new web search engine called "Google!"

Instead of guessing site URLs and having to rely on advertising for traffic, we can now just type search terms and go! This is pretty fucking awesome.

Tagged as: Google, New, Search Engine No Comments

25Dec/090

Merry Christmas, bitches.

Blah, blah, blah, something about holiday cheer. Merry Christmas!

This was actually written a week ago. Post-dated entries for the win.

Tagged as: Bitches, Christmas, Holiday No Comments

22Dec/090

Leaving tomorrow

Going to my parents house for two weeks to see family. I may be online occasionally if I can steal neighbours Wi-Fi or go to an interwebz cafe.

If I don't get a chance to go online, I have written some post-dated entries that will appear while I'm gone.

Filed under: My life No Comments

21Dec/090

WordPress 2.9 released.

I should probably update sometime *yawn*

Tagged as: wordpress No Comments

« Newer Entries Older Entries »

Which doctype SHOULD I use? (Or, HTML vs XHTML)

“Overview of the iPod’s hardware”

iPad announced today

Tips for a successful web design

<3333

Dreamhost loves bashing people

New search engine could move web far ahead

Merry Christmas, bitches.

Leaving tomorrow

WordPress 2.9 released.

Categories

Dreamhost (♥ web hosting)

Tag Cloud

Recent Comments

Archives

Ad