Kelly of Desiredsuperstar’s review.

Presentation:
The first glaring problem with your site is your site’s title in my browser. I don’t need to know what version I’m looking at, I’m sure I can figure it out from your Site section (hopefully with a bit more background information than just “V11//Pastel Dreams”). Having weird site titles messes with the way search engines find your site, try to keep it concise: desiredsuperstar.com. I didn’t know sites like this existed anymore: the miniscule “trendy” font meant to blind your visitor, the different colored and sized bold and italic links (because using the proper <strong> and <em> tags isn’t “cool”), and the matching bright pink … EVERYWHERE. The cross-hair-on-hover links are not only unattractive, but distracting. It makes your links a bit harder to see. Further, your italicized text is in a hot pink that makes it entirely illegible. You shouldn’t italicize almost every word to make your page look colorful. Rather, you should italicize words you want to emphasize. Your sidebar seems like a section where you pimp out all of your friends, why are you trying to get rid of me before I even browse your site? It’s okay to have a few sites linked in your blogroll, five or six to the maximum. But twenty plus sites is a bit absurd.

Your hostee “Jono”s website doesn’t even load and leads me to a 404 error. This also applies to “Andrei.” Why do you have a “Do not enter” section in your side bar for everyone to see? This is clearly asking for someone to mess with your site — try to bookmark everything so that no one is given the exact location of all of your log-ins. As for your physical layout, why does my browser window show a good 200px of horizontal scroll space that consists of your background print? You should try to center your layout properly so that there is no horizontal scroll in any browser — and I’m using a hefty 1680×1050 browser window. Your color scheme doesn’t sit well with me at all; I like green but I’m not partial to blindingly light layouts. Your background print is nearly impossible to see because you lightened it so much!

Content:
I noticed at the bottom of your page you have back and forward links. Don’t. Having Javscript links is bad for multiple reasons. One, some people have Javascript disabled in their browser. Two, some people may have stumbled upon a particular page in your site from another. Clicking the back link would just bring them back to the site that referred them to yours and you may lose a potential visitor. Third, what’s the point? All browsers have back and forward links, no need to have a redundant function.

Let’s split this up into sections.

Kelly: I am first attacked by a weird introduction to this section:

Well you want to know a bit more about this girl known as Kelly? Well you have certainly come to the right place. So where to start…best right at the beginning…

It’s unnecessary. It’s not funny, it’s not witty, and it doesn’t shed light on who you are as a person. The whole section would sound way better without it. Also, because you copied and pasted this from Microsoft Word (or some other text editor) you have question marks instead of apostrophes: make sure to add only web-safe characters in your content. In your “Basics,” page, you list your exam results. Why? It’s alright to be proud of how utterly brilliant you are, but when it comes down to it: who really gives a shit about your actual grades? Plastering them all over the internet isn’t classy, and I’m sure you can come off as intelligent in ways other than impressing us with your grades. In your egregiously small header, you said “The cleaver bit.” Cleaver, as defined by the dictionary, is a type of kitchen knife used for cutting meat. Did you perhaps mean “clever”? If so, that’s a pretty hilarious typo. The “What does this girl like?” page is pretty small and should probably be “merged” into your “Basics,” page… I think it fits there better anyways.

In your “Photobooth” section, all of your apostrophes are again question marks. Not nice. It would also be nice to have quality photos of you, not just absurdly blurred images. As for the page entirely dedicated to your iPod that (for all of my readers, NO JOKE!) begins with:

OMG, im in love with my iPod lol.

Please remove the entire page. For one, it doesn’t fit in with your third-person narrative. You switch into first person and it’s a bit disconcerting. Second, who the hell cares what ten songs you got when putting your iPod on shuffle? Listing a couple of your favorite bands is one thing, but showing how good you are at keeping current with trends isn’t interesting to the visitor. Also, you might want to tone down the “web-speak.” By “web-speak,” I mean OMG, lol, and lack of proper punctuation and capitalization. It makes me want to vomit.

Site: I like how you kept this section concise. I hate it when web owners ramble on for pages and pages about how they got to where they are. I think the “Beginning” and “middle,” and “end,” headers are completely unnecessary, however. The information on the current layout seems to be a bit outdated. Also, in your “Credits,” page, you only have text “thanking” people for their help in creating your site. Nowhere do I see a URL linking to these websites which I find kind of appalling. Why bother “link” them at all if you don’t plan on assisting them in getting traffic?

Goodies: I’ve always hated sections like these. Let’s see if you can change my mind. Your “backgrounds” page is mediocre at best: a lot of your stripey backgrounds are way too bright to be actually used in any layout. Your “extended” backgrounds seem to make use of patterns that YOU didn’t make, presumably without the maker’s permission. I kind of found it laughable that you claim:

All backgrounds on this page were made by me

…but you fail to give a URL of the sites that created those beautiful prints. Also, all of the images open in a new window. This is annoying and can be remedied by adding an image management script to your site like Lightbox2. It’s a really fantastic script that streamlines all images so your site will seem a lot more professional and streamlined.

Your buttons all use stolen imagery. In your “Vexels” bases, you properly credit Vexels.net (but naturally, you don’t actually link them–you just write vexels.net). Good job. Except I happen to be a member there and the FAQ says, and I quote:

Can we use the vexels for layouts and graphics?
Absolutely not. You may contact the artist and ask them first, if they say yes, and only if they say yes, you can use their vexel in a layout.

I have a really strong feeling you contacted NONE of the designers about your use of their graphics. This is appalling for many reasons. For one, vectors/vexels take a lot of time to make. Artists pour their hearts and souls into creating some gorgeous art, and you stole it from them without their permission. Second, on the site, it expressly tells you not to use their vexels without the individual artist’s permission. One of the rules for people using “your” buttons is:

You obviously can add your site name on them. However you must not claim that you made the base.

Well honestly, slapping a border around someone else’s artwork doesn’t mean you made the base either. So if someone didn’t credit you in using these stolen images, I would only feel pity for the artist, not you. I can’t even be sure that you designed the pixels in your “button sets” but I have to say that the zigzag stair effect created by having four different sizes on the same line is unappealing. Try separating them by size and presenting them that way so there is no discrepancy in height.

Your one free layout available for download is pretty. At least the header image is, anyways. I don’t like how there’s a billion pixels of empty scroll space, that really annoys me. Further, the way you coded the CSS is a bit monochromatic: why all that hot pink? There is no contrasting color, you didn’t bother to implement any contrasting greens or browns… I’m not into one-color layouts. Your “100×100″ icons all use stolen imagery. Unless you happen to be the creator of Winnie the Pooh and a major stockholder in Disney, you don’t have license to redistribute them on your site. Your textures have no actual thumbnails. Instead, you just resized the original image as “faux thumbnails.” The reason this is bad is because everyone’s browser has to load the entire 800×600 image and then the browser resizes it causing for a longer load time than a small, 100×100 icon. Further, it distorts the image. Again, all of the images pop up. I hope you decide to implement the image management script. I have to say that I probably wouldn’t use any of your textures just because they seem like rush jobs without any actual thought as to how practical they are. The second blue and pink texture is especially appalling: would you use that?

Your non-scribbly brushes available for use are images taken from Google. I don’t really know that I would use any of these brushes since I tend to like either textured or swirly brushes, but I’m sure some of your visitors would appreciate someone else’s rendering of a butterfly in brush-form. Your smilies available for download are awfully reminiscent of Beccary’s speech bubble smilies, but who am I to judge? Your page also has:

If you are unaware on how to download read THIS tutorial

The THIS in all caps doesn’t actually link to anything… it’s just text. As for your “Articles,” in the main link in your “Goodies,” page you spell it “Articals,” but correct yourself later. In your “Is Flying Such a Big Deal?” I find a lot of commentary without much analysis or answer of the actual prompt. You ramble from topic to topic, first talking about demolishing towns to build another runway and then to talking about air travel’s impact on global warming. You begin with a grammatically incorrect introduction:

It what stopped isolating every country from the others. It�s what made us be able to expand out horizons and look at different people cultures.

First, you want to change the first “it” to “it’s.” Second, change the “out” to “our.” Third, what about sea travel, the telegraph, or the trans-Atlantic cable? Yes, they had significant impacts on the environment as well, but they were all predecessors to air travel¹. It’s kind of absurd to claim that cultures didn’t intermix before the 1920s. Then you said the following which prompted an “Um, what?” response from me.

And OK we are making it worse but how we live out modern day lives, but at the end of the day, Earth is going to blow up soon. [Don't worry not too soon, just in like 300 billion years or something]

First off, I’m pretty sure the first sentence isn’t English–it’s a pretty egregious run-on sentence. Try rewriting it as:

We are making it worse but how are we supposed to live out our modern day lives? At the end of the day the Earth is going to blow up soon anyways.

Second, your 300 billion years figure is a bit… uninformed². Your “The Street Aren’t Safe No More,” title should be renamed to “The Streets Aren’t Safe Anymore.”

Over the pass year

Change “pass” to “past.”

And while no one was actually injured. It shows what life is like these days.

Ack–sentence fragments; change the sentences to:

While no one was actually injured, it shows what life is like these days.

Last, you say:

he was killed by a pathetic teenage

Replace “teenage” with “teenager.”

Overall, I think the argument is very one sided. You talk about Britain as if it’s a bastion for gang violence and you give one personal anecdote instead of an informative article. Personally, as someone who comes from a country with practically no gun-control and over five thousand gun-related deaths a year³, I can say that Britain is comparatively extremely safe.

Your article on patriotism is more of a compare/contrast with America. I doubt that it’s illegal to hang a British flag outside your home, it just doesn’t make sense. Regardless, what exactly is the point of this article? Are you trying to say that in order to be patriotic of one’s country, one must love the government in charge and one must be able to recite the national anthem?? I always thought that a patriot was defined (by the dictionary) as:

A person who vigorously supports their country and is prepared to defend it against enemies or detractors.

So, yes. The definition can be subjective. Which is why I think you should define patriotism in your article before you even make generalizations about your country. Forgive me if I’m wrong, but after the London bombings, the whole country was up in arms and everyone sort of banded together like America did after September 11th. I think that’s a greater display of patriotism than memorizing meaningless words.

Tutorials: I am going to be overly critical in this section, so I’ll preface it with this: I hate most all tutorial sections. They usually are uninformative, step-by-step instructions on how to do something simple in Photoshop. The HTML tutorials are even worse and often incorrect. Moral of the story is, don’t teach unless you know what you’re talking about. That said, let’s look at your tutorials. I am annoyed by the fact that all of your tutorials are ended by: “Hope this helped!” as a sort of nudge for validation. Remove it, if it helped or didn’t help, your visitor read the page anyways.

Your first tutorial on how to add borders to PNGs is a mess. The images are way too large, try creating thumbnails that open up into a new window so that your visitors can easily find your instructions. Secondly:

This is where you can edit what you want it to look like around your PNG. You can choose how thick the line will be, what colour, what blend style it will be etc… Once you have customized it to your taste press “Ok”

I think you should explain what exactly a “stroke” is and not gloss over it. Try to teach your visitors the functions of Photoshop, not just a shortcut! Define “blend style,” and tell your visitors how they can customize the image. Be as specific as possible so people can learn from you.

In your blending tutorial, you didn’t explain the characteristics of the eraser tool at all. You need to explain the importance of having a few pixels of feathering so that the erasing isn’t so harsh. Also, you should try to let your visitors know what “effects” they can add to their blend. Lastly, try not to use stolen images of celebrities in tutorials, unless you have express permission from the photographer it’s off limits. Also, you should try to come up with a more original tutorial than a blend tutorial; many other sites offer the same exact steps. What makes yours different? Your “Creating Two Color Text” is just a variation of adding a border to a picture — but for text. Most people could figure that out themselves, but if they can’t just include it as a “variation” in your existing border tutorial. Why create two separate pages for the same exact steps?

Your “installing brushes” tutorial doesn’t involve installing brushes at all; what do I do when I download a .abr set from a brush site?? How do I install it? Rather, it’s a tutorial on how to create a brush. Is the image in your tutorial made by you or someone else? You should credit them. Also, it might be nice if you address brush sets and how to save them to make them available for others. This also goes for your “Installing a Pattern,” tutorial. In your “Smoothing” tutorial, you don’t explain what noise is and you don’t go over the functions of the blur tool; what settings should your visitors have to achieve the same effect as you?

You have to be careful using this tool as you do not want to distort the face.

Elaborate. How would I distort the face? Try including the fact that going over shadowed areas can make it look cartoonish, like what you did on her neck-shadow. In your “Using Patterns,” and “Using Gradients,” tutorials you didn’t go over the layers or what blend functions achieve what effect. Try being as specific as possible when teaching others a program.

And that�s it, you have added a gradient to your picture!! Here is how mine turned out :< br>

First, replace the ? with an apostrophe. Second, remove the <br>. You should be using the <p> tag to define paragraphs anyways. Your “Radio.Blog.Club,” tutorial is a bit superfluous; I’m sure most people could figure out how to sign up at a website. Besides, the code you offer isn’t correct HTML. It should be:

Put this in your CSS file:

#radioblog_player_1{
width : 226px;
height : 150px;
bg-color : #000000;
}

And this is the HTML:

<embed id="radioblog_player_1" src="http://stat.radioblogclub.com/radio.blog//skins/default/player.swf" type="application/x-shockwave-flash" FlashVars="id=1&playlistPath=http://www.radioblogclub.com/juke.blog.3.0/sounds/playlist.php?id=1687703&colors=body:#5C3B82;border:#903A7B;button:#903A7B;player_text:#D4C576;playlist_text:#D4C576;new_tracks:#ffffff;" allowScriptAccess="always"></embed>

You should also tell your visitors how to achieve different color effects instead of just giving them a code. How the hell are they supposed to figure it out themselves if you don’t tell them why the script works and how to customize it more? Saying the following doesn’t make up a good explanation:

When you have done that, you will need to edit the code a little so it looks good.

If you think people aren’t smart enough to figure out how to sign up for a new account at a website, how are they supposed to be smart enough to deconstruct convoluted, poorly written code? Your “Color Palettes” belong in the goodies section because you don’t explain how to use them and they’re not a tutorial. Also:

If your stuck on colour for a layout you are making. These will help you decide on a great combination of colours.

Should be rewritten as:

If you’re stuck on colour for a layout you’re making, these will help you decide on some colour combinations.

Again, for your “Animating Buttons,” tutorial I felt that you could have gone a little more into depth about what certain functions of Jasc animation shop do, especially in regards to frame speed. You should also teach your viewers how to do other kinds of animation, not just a simple two-frame one.

For your entire “Advanced Picture,” section, I’m really at a loss. First, the filenames aren’t at all indicative as to what the picture effect is. For the first one, for example, you could say “Add a blue, cool color lense to your image.” Also, try to explain what each step does in creating the final outcome. It’s a lot more interesting to learn about the different blend modes than reading off a list of arbitrary opacity values for an effect that is only vaguely described to begin with! Why not give your readers a chance to learn from you instead of copy your exact instructions? In addition, I find the effect in picture three and four to be so similar that they shouldn’t have their own pages–just add a “variation” section to number three.

In conclusion, while your tutorials were better than I expected (they are really image-rich allowing your visitors to be able to follow along quite well), I still think you shirked all explanation of the functions of any of the programs you were “teaching.” In the future, try to explain what you’re doing instead of just telling what you’re doing.

Coding:
From viewing your source, I can tell that you have a doctype for XHTML which is a really good start. The point of XHTML is to separate style from content; that is, to try to remove all of the stylistic elements from your HTML coding and put it in an external stylesheet. That means that any HTML tag that includes style=”" or any width or height requirements is not separating style from content. Your main div layer, for example, has stylistic elements straight in the HTML code:

<div style="position:absolute; left:265px; top:125px; width:180px; background-color:#ffffff;">

The problem with this is that: 1. your layouts are much harder to update; instead of just having to update your CSS, you also have to re-edit your index page, 2. it makes your coding needlessly messy. I really recommend placing all of this code into your CSS as an id:

#maindiv{
position : absolute;
left : 265px;
top : 125px;
width : 180px;
background-color : #fff;}

And your new div layer would just look like this:

<div id="maindiv">

See how much that cleaned up your code? I also noticed that you don’t have much of your coding actually XHTML validated. Some tags in HTML do not have a closing element. By “closing element” I mean a </close> tag. The link code has it:

<a href=""></a>

But the line breaks, image tags, link elements, etc. do not have a closing tag. Therefore, you need to add a “self-closing” tag to these. So <br> becomes <br /> and <img src=""> becomes <img src="" />.

An important resource to creating a valid CSS and XHTML markup is W3C. I really suggest you look there a while or browse Jem’s fantastic tutorials on XHTML and CSS markup. No surprise here, but you got 7 errors in the validator for your CSS and 36 errors for your XHTML. You should address all of these errors and try to implement proper XHTML markup so your site is compatible in all browsers.

Rating:
Well, here’s your rating. I think that you need a lot of improvement in all three key areas (presentation, content, and coding). My biggest pet peeves regarding your site are: 1. the color of your underlined/italic text, it’s unreadable, 2. the rampant spelling errors that could have been caught with a simple spellcheck, 3. the question marks peppered throughout your site in place of a proper apostrophe, 4. your lackluster reviews, and 5. your improper coding markup. I do give you credit for at least having a doctype and showing that you want to have a valid coding markup and truly do wish you all the best.

1. And not nearly as horrible to the environment [↩]
2. The universe itself is only about twelve billion years old, the Earth around six and the Sun around six–it’s in its half-life; it’s more likely that within your lifetime, the Earth’s climate will re-balance itself at the expense of the human population. We won’t be missed [↩]
3. America [↩]

This entry was posted on Tuesday, November 20th, 2007 at 5:17 pm and is filed under Reviews Brianna. 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.