Being a month from my birthday, it’s a little weird for me to be thinking this, but the great “bad layout” bash must start here. Just to be fair, I didn’t look very far for what I term “bad sites”. I will only mention errors I found to avoid being mean to some of my commenters. Now, I have to warn you — this isn’t a “XHTML IS THE ONLY ANSWER” thing. This is just a general glance at layouts that seem to follow a bad path of assimilation. Also, I get to discuss the evil of MySpace with quotes!

Introducing margins and paddings

It doesn’t take much effort at all. Just a little “padding: 10px; margin: 10px;” in your stylesheet does wonders. One thing you’ll want to look out for is the Internet Explorer Double-Margin-bug. However, you have to make sure you’re designing for a broad number of browsers. I won’t sleep well at night (figuratively) if I know my site doesn’t look decent in more than one browser — I’d be limiting a lot of people from seeing my site the way I want them to. Because of things like that, I found errors like this overlapping text (I blurred it and changed the colors to protect privacy — the image quality screwed up on its own).

There aren’t many errors with the layout I found this at, but this is most prominent in Firefox. The line-height and padding is set awkwardly so the text tends to overlap. Why? Because the site is designed for small text. The header text, being bigger than the norm, is forced to overlap to fit into the tiny space it’s allotted.

Enter, amoeba

It seems to me like people these days follow a very set layout pattern. Let’s term these “amoeba layouts” (I’ll explain my logic fairly crappily this way: amoebas assimilate and absorb and digest and conquer. Amoebas are tiny. Believe it or not, like sasquatches, amoebas are everywhere). Is your site an amoeba? Check it here:

• Uses a variety of brushes to make an intricate and tall header image. Often includes stock photos, pixel fonts, characters, and an unusual site name.
• Uses a font size of 10 or less for major text.
• Usually has two columns, navigation can be on either side.
• Said columns are usually chockful of “affies”, “layouts”, “brushes”, “tutorials”, “goodies”. Navigation usually consists of: Home, [author], You, Site, Exits and sometimes other links.¹
• In addition to other textual elements, CSS is abused. Everything from the scrollbar to bold text has a dotted border, bright colors, and cursor icons change from link to link.CSS in moderation" id="note2">²
• This doesn’t go for most amoebas but bad spelling, bad typing, spelling errors — we all make them, but do we really need illegible typing like this wonder? The answer’s no. If you say anything but no, you fail.
• Abuse of PHP or Javascipt. Now, this can be termed rather lightly with most amoebas. The chief use of these is for counters, logging IP addresses, playing music that doesn’t shut off, irritating little popups and useless no-right-click scripts. Please don’t. Just please.
• In-site navigation in which you describe your name, list several thousand memes, give every detail about your life, and require several different pages to do all this. No, we don’t need to know all that. If you’re going to be writing about yourself, write about yourself. This is the only occasion where people get to hear you talking about you, not the rest of whatever you write about.

Some good sites

• http://www.faerial.net/ — The layout is neat, readable, and moreover, the page loads fast and extraneous content is away from the main content.
• http://www.for-desperation.net/ — The layout is very neat, content is first, the text and background contrast very well, and while there are a few amoeba elements about the links, they are rather well organized and they all pertain to the page.
• http://www.sewwy.com — Lovely colors, good organization, only necessary content. I also have to thank this site for referring me to Despair.nu
• http://www.eruanna.net — The colors here are very pretty as well. There are definite amoeba qualities but they’re toned down by their connection to the page. It’s not random content — it’s extra but somewhat necessary content. More of this please.
• http://www.romancekills.org — For one, the colors are great. Extraneous links are normally avoided. Extraneous data is also avoided.

It’s your responsibility

Governments pass accessibility acts for a reason. I’m not going to sit here and preach on how your site has to be whatever. It can be as pretty as you want it to be. But please, don’t pull an amoeba. For future reference, they keep going and going and going.

The great MySpace caper

I was listening to some podcasts yesterday (I’m a geek, okay), and I came across the co-founder of MovableType, Mena Trott, talking to some random guy or another. She mentioned this about MySpace, at which moment I shot my fist out in the air in joy and bought all the champagne I’m legally allowed to celebrate with:

That’s more of a social network than a space where you want to communicate [when asked about the difference between MySpace and Livejournal].

Mena Trott (Listen to this interview)

For those of you who like to “blog” on MySpace, why? Why would you do that? Why would you take a social network and convert it to something it isn’t — a site where you can write about yourself? You can compare MySpace to say, Livejournal or Xanga or whatever, but would you really want to? Is it absolutely necessary?

And for those of you who actually want a social network, free from the terrible organization and overwhelming retardation of MySpace, pop over to Facebook.com — sure, it requires invites, but it’s so much cleaner.

I’m going to stop being a zealot one of these days. You guys keep counting those tallies.