Staff

Past Staff

Review for Romantic Delusions

Splash pages always throw up a red flag for me. I get worried that: a) I won’t be able to meet the requirements; b) there are requirements to visit your site at all; and c) your site doesn’t have a layout functional enough to list fanlistings and cliques without a splash page. So I’m slightly turned off by your vague, “Looks best in IE 1024 x 768.” I might meet those requirements, but after checking my own website’s tracker, I learned that only about 60% of people use Internet Explorer, and 60% use 1024×768 resolution. So you’re gypping at least 40% of your visitors of…your site at its “best.”

Information

Site: Romantic Delusions
Type: Personal
Owner: Maria
Reviewed By: Megumi
Date Received: 7/06/06
Date Completed: 7/29/06
Preview

Presentation

Splash

The first thing visitors see when they visit a site determines their first impression. Given the tricky nature of first impressions, it’s a good practice to make sure your first impression is saying what you want it to about you and your site. That said, your splash page is not making a good impression.

The information you present on your splash page is as follows:

The resolution that your site displays “best” in. (Again, what is “best”?)
The resolution the visitor has.
Requirements (I don’t understand why the IE 1024×768 resolution isn’t a “requirement.”)
Your hostess.
Pending reviews, fanlistings, and cliques.

Is any of this the first thing you want a visitor to see? The browser requirement just shows that you are unable, or unwilling, to make your site compatible with other browsers; more people know their screen resolution size than have IE and 1024×768; and You could put the links to your hostess and other external links in your navigation.

Your requirements “Open Mind,” “~~Discrimination~~” and “Ability to Comment,” are ridiculous. The very fact that you have requirements to view your site at all shows that you are not open-minded; you are not open-minded towards Firefox or 800×600 users. One could say you’re discriminated towards them, in fact. “Ability to comment” is like the icing on the ego-cake; this entire page is things the visitor has to do to view your site, when in fact it should be the other way around. It’s very possible people will get so fed up that by the time they download IE, buy a new monitor, join every minority group there is, end the struggle for women’s rights in India, and conclude the conflict in Lebanon, they will be just too tired to comment.

Basically, this page satisfies your own needs instead of the visitor’s.

Your enter image isn’t mind-boggling. Not only did you poorly extract the image of Keira Knightley, the top of her head is cut off! Orlando Bloom fares no better. Finally, if their pairing was “A Match Made in Heaven,” why aren’t the images side-by-side, as opposed to having Orlando above Keira? The juxtapositioning here lacks chi. Orlando is staring straight ahead looking dangerous; Keira is gazing vaguely at something and looking a little unsettled. So how do these two people fit together?

Layout

When you go to the supermarket, do you see people walking around in a black bubble? When you watch television, are the actors surrounded by puffy white clouds? No. So the way Keira and Orlando are sitting on a plain back background looks ridiculous. They look like they’re just floating around in space, and nothing is “anchoring” them to the page.

Coming back to the title, “A Match Made in Heaven,” when I think of Heaven I think things like “soft,” and “ethereal.” I don’t think “dark,” “missing part of your right arm,” or “badly extracted.” Sit down and take a good look at your layout. Does it seem heavenly at all to you?

The entire layout looks like it was made without thought. The title doesn’t fit; the image doesn’t fit the background; Keira’s face on the right is twice as big as Orlando’s on the left; your content and navigation don’t fit the image at all.

To expand on that last point, a layout shouldn’t come to a crashing halt when the banner ends. Your content and navigation are the whole reason you need a layout, so it doesn’t make sense to neglect them. Right now, your layout consists of Image, Navigation, Content, and there’s no continuity between them besides the lack of ethereality.

My interpretation of the layout’s “theme” is Keira/Orlando-slash-Heaven. Which is just how it appears on the layout. Not only are your content and banner completely unrelated, your themes are separate as well. When making a layout, you have to be creative; think, “How can I relate Theme One and Theme Two, and how can I carry it out throughout the entire layout?”

Finally, “A Match Made in Heaven” and “Romantic Delusions” are set in the same style, which may lead some people to wonder which one is your site’s title.

Coding

You are using iFrames*. Usually one uses iFrames when a) they need to keep their content limited to a small area (by using the scrolling properties of iFrames) or b) do not want to edit all of their pages to change layouts. Since you don’t fit the description of Option A I’m assuming you want to avoid the layout-changing issue. However, the way you’re using them, the content and navigation cannot be read without a lot of scrolling (It is possible to make a non-scrolling iFrame, however). Plus, if the visitor wanted to bookmark a page, the closest they would be able to get is your main page. So iFrames are not the best things in the world for showing off your content (why anyone would like to show off a small scrolling box, though, is beyond me).

The simplest way to fix this is to use PHP. These days you can hardly turn a corner without running into a PHP Includes tutorial, and I suggest using that method. If you can’t find a tutorial, a good one is right here¹.

* You told us that they were Frames on your splash page, though, which is a dangerous mistake, because many browsers have difficulty interpreting Frames.

In the place of iFrames, the logical choice would be to use CSS. You are already using it for basic styling (links, etc.) but you can use it to position elements of your layout, also, sans scrolling. This article² explains all of the ways to use CSS to position. (I recommend absolute positioning to start out with.)

Other Errors

In your title tag, you are using a lot of spaces (& nbsp). However, if a visitor decided to bookmark your website, all those extra spaces would be a part of the text displayed in their favorites menu. So, considering the limited width of the favorites menu, they might only get partway through. (Plus they’d assume that your layout is perpetually in Version: A Match Made in Heaven.) Also, you use spaces after the last word, “Heaven,” which makes no sense at all. If you want to seperate elements of your title effectively, you can use commas, colons, or even astericks, but using so much space is a waste.
Sometimes you capitalize coding, sometimes you don’t. Sometimes you add quotation marks, sometimes you don’t. For example, your link tag inside your tag has the properties (rel, href, type) in all capitals, and the value of rel (stylesheet) not enclosed in quotation marks. With such a messy style of coding, you’re more likely to experience discrepancies between different browsers.
You give the div layers surrounding your iFrames IDs. Do you know what IDs are used for? They are used like classes in CSS, the difference being that you can only use them once. (So using id="Layer1" twice is incorrect.) This makes your inline styling redundant—you can stick it in the ID selector in your CSS! It would look like this: #Layer1 { property: value; }.
You put your main image, which should be the first thing on the page, after your content and navigation iFrames, using absolute positioning to jack it up the the top (and the content and navigation to the bottom). However. If you add margin: 0; padding: 0; to your body selector in your CSS, you can just put the image at the beginning of the body tag, no absolute positioning required! The same would go for the content and navigation; they would fall just below the image.
At the top of your stylesheet, you have an HTML tag that supposedly “defines” it as a stylesheet. It doesn’t. HTML doesn’t belong in a CSS document, so it needs to skedaddle. (This can also cause differences between browsers.)
More about inline styling: it’s when you include div style="" in your HTML document. This is bad. If you’re using iFrames to ease layout changing, this certainly isn’t helping. Instead of having to change both the HTML and CSS documents to change the styling, just put all of your CSS in your stylesheet, and your HTML in your .html files. Right now, I wouldn’t be surprised if they started having puppies.
Your headers are killing me, deep inside. For each one you include a font tag to define its properties. The font you specify is “CAC Champagne”, too, which Not Many People have, such as me. So, in Internet Explorer your headers are in Verdana font, and in Firefox they are in Times New Roman. So ditch the strange font, ditch the font tag, and use h1 instead. (In your CSS, you would put your styling in: h1 { property: value; }. (I don’t know what your .header selector in CSS is doing, by the way.)
A word about fonts… instead of just naming one (Verdana…and oh, CAC Champagne) and running the risk of the viewer not having the font, you can add a generic font family, the most common of which are serif (Georgia, Garamond etc.) and sans-serif (Arial, Tahoma, Verdana etc.). So, after saying something like: font-family: Arial; you can add a generic font family, seperated by a comma: font-family: Arial, sans-serif.
Shorthand is something you can use in your CSS. For example, instead of border-style: solid; border-color: white; border-width: 1px you can have border: 1px solid white. See this article³ for more information.
In your navigation, your email addresses are too wide; they cause the navigation iframe to side-scroll. You could put a space before and after “{at}”, or you could create a link that said something like “Email Me!”

Content

Navigation

Unh. I don’t…get your navigation. Firstly, the headers. You have:

1. Navigation

Links

Links

Links

2. Centre Stage
Information about you. (with a link to your more-detailed about page)

3. Fan Speak
How to contact you.

4. Coming Attractions
Important dates for you.

5. View of the Stage
A description of your layout.

6. Hugs
A smiley-face banner, a link to “dramaqueen69,” and a link to “get hugs of your own.” [?]

7. A Haloscan advertisement

Now. Normally a navigation holds links and maybe a short blurb about you or your site. Basically, it lets you navigate around the page. Your navigation looks like it’s just a holding space for information you didn’t have room for elsewhere.

So what do you really need in your navigation? I think that it should look something like this:

1. Navigation

Links

Links

Links

2. About Me

Name: Maria

Gender: Female

Birthday: 3/23/90

Likes: blah, blah

Email: november_rain2303 [at] hotmail.com

AIM, MSN etc.

3. Friends (I’m presuming this is what you meant by “Hugs”?)

dramaqueen69

Become a friend?

4. Haloscan banner

“Coming Attractions” sounds like something that is more important to you than to the visitor. If you want to keep it, you could have an extra feature in each blog entry that said something like, “Coming up this month: blah (date), blah (date).”

“View of the Stage” is also a piece that doesn’t need to be on every page. It can rest in the “Past [and current] Layouts” page, right?

The names you give your navigational items don’t really aid navigation. If you need to have title tags to make sure the visitor understands the text, that’s a sign that they’re too confusing. Maybe you’re trying to keep “in theme,” but a matching background for the headers would sate me just as well.

Finally, some of your text is hard to process. In “Centre Stage,” for example, you could bold things like your name, “Loves:”, “Year 12.” Anything to help me understand your transitions from your name to your age to your likes to your random facts. (The colons aren’t so helpful, either. For example, “Honest: more [link]” looks like the link is related to honesty.) Your “About Me” section should look like this:

Maria. Female, 16, March 23 1990, New Zealand, Single.
Loves acting, music, reading, writing, hangliding, paragliding, and movies.
Random Facts Year 12 at Geraldine High School, Johnny Depp obsessed, Peter Jackson megafan, Dragon collector, Stubborn, Honest. More about me?

I have no idea what’s going on in “Hugs.” Please, please clarify this.

Pages

Main Page

Sit back. Take a look at your content page and pretend it wasn’t yours. What would your reaction be? You have the following items:

Curtain Call [?]

1. Three random external links.
2. The date. (Underlined and looking exactly like a link.)
3. A few lines about what you are doing, listening, watching, thinking, and wishing.
4. A quote.
5. Your blog entry.
6. The enigmatic, “Oscar® Speech - the Thankyous[sic]”
7. A few more random external links.

This is a personal-cum-blog site. Since you have your “personal” content displayed as links in the navigation, you’re blogging on the main page. So, logically, I should be seeing something like this:

Welcome to Romantic Delusions

1. A short introduction, explaining your site’s purpose.

Blog Entries

2. Some way of telling one blog entry apart from another. (A line break, a border.)
3. The title of the entry.
5. Pertinent information about the entry, like the date, and maybe a comments link.
6. If you really must have it, the quote. (But only if it somehow relates to your entry. Otherwise, it’s useless.)
7. The actual entry.

Notice that I didn’t include things like what you were doing, thinking or wishing when you typed up the entry. People usually blog about something they did, or how they are feeling about something, and what they were watching/doing/thinking while typing is either something significant that should be explained in the actual entry, or something entirely irrevelant. Either way, they don’t belong.

Website Guideline #257: if you need some way of seperating all the ephemera from the actual entry, you’re in trouble.

Reading your entry is somewhat disconcerting. You abuse exclamation marks, use the dreaded “LOL,” and your general tone is very casual and slangy. There’s a difference between sounding relaxed and sounding crass. For example, how well do you think this expresses what you’re feeling?

My computer has been fucking up BIG time and it wouldn’t let me update shit and GAH!!!!! It was pissing me off so much!!!!

That’s what I thought, punk.

Centre Stage

Just a warning, especially for the “Quizzes I’ve Taken” page: Try not to be offended at the content, okay? Coz some of it’s a little… yeah. Well, it is me.

Permission to shoot myself.

If your content is offensive, how well do you think your little witticism there is going to prevent the visitor from being offended? Do you honestly believe that a visitor would read that blurb and think to themselves, “I find the language used crass and inappropriate, yet, because I’ve been warned beforehand, that’s okay”? You undermine your argument with words like “try,” “okay?”, “…”, and “yeah.”

Furthermore, assuming that this is the first time a visitor has entered your site, how would they know what “well, it’s me” even meant? Isn’t that the reason they visited this section, anyway?

All About Me: With personal sites, it sometimes gets tricky determining what a visitor wants to know about you, what they should know about you and, ultimately, whether they care about knowing you. Right now, I’m reading a lot of facts about you. Unfortunately, nothing makes me care all that much. When you’re reading a good book, you don’t want to put it down, right? Pretend that this page is a book, and you’re trying to keep me, the reader, interested.
A difference, though, is that in a book, the author may strategically withhold information. Not so with websites. You tell me that you’re “taken by Jordan,” for example. For all I know, Jordan is your pet ferret. Or your grandpa. Think about that.I don’t know if this was meant to be a quick-reference sort of page, or an in-depth page, but don’t leave me hanging on a tidbit of information. You could make separate pages for each item in your list, maybe.

Finally, you’ve got a lot of hobbies. It would be nice if you could distinguish “when I’m feeling bored and have copious amounts of free time” hobbies from “my life, my strength, my passion!” hobbies.
Crushing and Wishing: Giving me a list of names (by the way, the “~” tilde separator isn’t working for me; neither are the headers “***Header***”) is somewhat indicative of your personality (more so than “all about me,” anyway), but including the why wouldn’t be amiss, either. For example, you could say, “I like Johnny Depp because he has very defined pecs.” Or, in the “Beautiful Girls I Wish I Looked Like” section, you could say, “I like Keira Knightley’s eyes, and Tara Reid’s hair.” This is because some of these people look very different and your standards for hotties aren’t clear.
My Birthday: is a broken link.
My DVD/Video Collection: This page is quite specific, which I don’t think is appropriate. Your list shows something of your personality, but a general “Movies and TV” page would be more appropriate, with favorite movies, least favorites, descriptions, favorite actors, etc. This list is rounded out, to say the least, so again, it’s hard to determine your movie criteria.
My Name: Right now, this page is useless. It’s someone else’s (by the way, there is no longer a name meaning feature at Chocolate-Mango.net) description of what your name says about you, and when you leave me with just that, who knows if the description is accurate? Like the previous page, it would be fun to expand this with names of celebrities/actresses who share your name, why you were named Maria, etc.
Quizzes I’ve Taken: The organization here, well, sucks. I recommend categorizing these results into sections like People/Characters, Social Life, Romance, Miscellaneous.
Stalk Me: Since you already have your contact information in the navigation, it makes no sense to have an extra page here. (And the title “Stalk Me,” despite its humorous intent, is somewhat misleading.) I cannot, for the life of me, discern why you list your website as Romantic Delusions. Assuming that a) this is the about me section of said website, and b) the average visitor can scrape together a few brain cells, it’s just… obvious.
Writing: I’m not qualified to critique your poetry, but I think that you could organize your writing into general sections: Love, Friendship, Life, etc.

The Audience

Inspiration: Don’t you think this page is a little clunky? Visitors submit articles for you to post on your personal site. It’s looks forced; besides, since this is a personal site, doesn’t belong. It’s off-topic. (If you meant to just keep visitors “entertained”—ask yourself why. Didn’t they come to this site to learn about you? Shouldn’t that keep them there?)
Quizzes: This page is more “on-topic,” since you provided your results, but the formatting is killing me. Keep seperate quizzes on seperate pages; bold category headings (for example, in the “quiz,” bold things like “full name,” “birthdate” etc.). The obscene amount of scrolling one has to do should be incentive enough to switch to divs.
Abortion: I like this, since you’re pretty confident in your opinion, but as in any persuasive essay, you should address both sides with counter-arguments. Otherwise, that visitor with a conflicting opinion would assume you were skipping over a part of the debate because you didn’t have a rebuttal. For example, you could address the “Does the baby feel anything?” argument, and the “Ruining the teenager’s life” one.
Guess the…: The me that thinks that personal sites should be about the person is waving frantically. The me that likes hokey games is smirking. I’m going with the first me.

The Theatre

The organization of this page is generally weak. You have the mean header, “Site,” and below that, in normal text, “Site Stuff.” Then, in no particular order (can I suggest alphabetical?) you have your links. One of which is titled, “Link Innocent Delusions“. Where did “innocent” come from?
How it All Began:

I wanted somewhere to talk, and to express my opinions free from a theme.

Online, no one really “talks,” per sé. So I think that saying just “…somewhere to express my opinions…” works. Also, “free from a theme” barely makes sense. I’m assuming that you wanted a forum to express your thoughts without an implicit or recurrent idea¹¹, but how do I know you didn’t want a site with no generalizations about humanity?.
Awards/Gifts: Again, organization. This time, thumbnails. The page looks messy as is, cluttered with unevenly sized images, so use try using smaller, uniform thumbnails. Also you should link to: the site you received the award from; the date you received it; and any comments that came with the awards (some of them are hard to read from the images).
Reviews: What will you do if you get more than one review? You can’t keep all your reviews on one page. I suggest making this page into a portal to all of the reviews you’ve received. A popular, yet valid, option is to offer commentary on the review, which will convert itself into a better understanding of your personality.
Past Layouts: Like the “Awards/Gifts” page, your thumbnails should be uniform, as well as aligned to the left (align="left"), so the text can wrap around it. I’d also like a detailed explanation of the layouts, as the thumbnails are pretty small (”I accidentally deleted my screenshot of this layout, but it was pretty cool”), and more of your opinion on them. For example: have you improved? Was it your favorite?
Link Innocent Delusions: 1) Please explain what direct-linking is. Not everyone knows. 2) If someone links you, why should you link them? Are they deserving simply because they’re linking you? You should link out to sites you respect and admire, not sites that link you back (unless they’re affiliates, but hopefully you respect and admire them too). 3) Providing a text-box-code to link you by isn’t necessary. If a person really doesn’t know HTML, they won’t understand what you’re giving them, and probably won’t have a website besides. 4) Traditionally link buttons are 88×31 pixels; your first one isn’t.

Beloved

All of your pages, not just this one, could benefit from using lists. That way, your links won’t look like choppy paragraphs and will be more individually distinguishable.
Psst, check your links. Over half are broken or have moved.

Final Statement

Theme or no, I don’t understand where you’re going with this site. All of pages are weak and don’t tell me anything about your personality—they only give me superficial information. This being a personal site, I expect you to dig deeper and really show the visitor what you’re about. Right now, nothing about Romantic Delusions, or even Innocent Delusions, makes me care, or helps me relate, to you. Good luck.

¹ “Easy Layout Changing With Include + PHP Intro.” DayDreamGraphics. 2006. <http://www.daydreamgraphics.com>

² “Absolute Positioning.” “Lists.” YourHTMLSource. 2006. <http://www.yourhtmlsource.com>

³ “CSS Shorthand Properties.” Webcredible. 2006. <http://www.webcredible.co.uk>

¹¹”Theme.” Dictionary.com. 2006. <http://dictionary.reference.com/>.

This entry was posted on Friday, September 1st, 2006 at 10:08 pm and is filed under Personal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.