Since this isn’t for a WPR—neither mine nor someone else’s—I don’t have to follow a set format complete with first impression, layout design, coding, content, errors, and conclusion. I can be sort of boundless and cover what I feel your site would benefit from most. This may not be what you are looking for, but I hope that this more customized framework will be a good thing. I probably will cover some of those categories in one way, shape, or form but hopefully touch on others also. Forewarning or pointless paragraph, I’ll let you decide.
I guess the first order of business is your layout, since that is what I—as the visitor—see first. Your layout consists of three colors: a bright tannish-yellow, bright light blue, and dark red. These colors work well together as they are all the primary colors, however the shades you have subtly conflict. As the focus of your layout *should* be your content, the blue should stand out most. My suggestion would be to keep it as-is. Bright colors attract attention first so the yellow attempts to draw that attention away. I would darken it a little, leaning more towards the brownish color that you have used for your drop shadow background strip. Maybe not that drastic of a change but you get the point.
The only other thing that really stands out to me is that your reds aren’t balanced in your layout with the other colors. The yellow and blue seem to pop and the red is just left in the corner. Since I don’t prefer to have a same-colored background when using a strip like you have, I would personally make the area above your drop-shadow your red color. This would balance things out more and draw attention to the reds in your layout. Possibly also counter this by making your bold/strong tags red as well as your headers (welcome, update dates, comment number, etc.) or some variation thereof. (Also, why are your update’s comment links green? Nothing else is.)
Might I add that I really like your navigation hover over. Geeky ol’ me likes things with borders on one side.
In your coding, there are only four “errors” per se. You’re missing your doctype, for one. Secondly, towards the end of the page, you have centered your affiliates using <div align=”center”> which is “outdated” code. I use it on Ealain, myself, because I don’t mess with the premade code but on Skyefairy I create a class in my CSS called .center. If you CSS it to margin: 0 auto;, it will center things like that. Then just change align=”center” to class=”center”. Makes no difference to me but the valid coding tester won’t complain that way. Third, in your affiliate links you are setting the border to zero internally. ID the div you have centering your affiliates to something like “affyboxes” and then add this to your CSS: #affyboxes img { border: 0; } Fourth, you’re “supposed to” add alt tags to all images that are not added through background in CSS. However, alt only shows as a tooltip in IE so if you want it to show as a tooltip everywhere, use both alt=”alternate text here” and title=”tooltip text here”.
Not an error or an issue, but I’d recommend using meta tags in your head section of HTML. It helps your search engine ranking because you choose some of the things that the search engine sees so that it doesn’t have to guess. If nothing else, it adds a description below your link in search engines that actually relates to your site instead of just a quote of text from some random page. And it doesn’t hurt.
Meta tags that I use are:
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<meta name=”description” content=”Frozen-Rain.net is the…”>
<meta name=”keywords” content=”frozen, rain, sakuya, kira, li, vicky, portfolio, etc”>
<meta name=”copyright” content=”Frozen-Rain.net © Vicky, All Rights Reserved”>
I see nothing wrong in your CSS.
Throughout the site you are using the b tag to bold things. I do too. However, the higher-ups have changed b to strong, i to em, and as far as I know u is still u. Not a biggie but I thought I’d mention it.
On your portfolio pages, I’m proud to see you use alt and title (I knew you knew it) but disappointed to see you internally defining the size of the images when they are used more than once. Class it something like “portfoliothumbs” and CSS it as .portfoliothumbs { width: 200px; height: 150px; border: 0; }
If I had a point system in place for reviews, you’d get some now for a) having your own coding for your portfolio previews and not relying on the popular javascript and flash induced idiocies of viewers. *shivers* And b) for having internal navigation to the different portfolio sections. Easy navigation ftw (Have you ever noticed that is wtf backwards? That’s how I remember it.).
Random Sidenote: All of the four-fingered people out there now celebrate you for finally recognizing them in your drawings.
You don’t have internal navigating throughout your resources as you did in your portfolio. *hint hint*
If you ever make a layout for profit with copyrighted images—three out of four of your commissions were—you could be sued for not giving the creators of the images their royalty. Most graphics sites get away with it since there are so many of them and they provide their services for free. However, there is a higher risk if you are gaining monetarily. I once asked a lawyer-friend of mine. He doesn’t deal in copyrights but he said that a simple disclaimer should suffice. Something to the effect of: “It is the responsibility of the customer to gain permission for any copyrighted image usage and to pay any and all royalties incurred. Customer assumes all responsibility for the use of the image(s). Permission must be granted before requesting a layout.” It’s up to you if you make them prove to you that they have permission (they probably can’t get it for celebrity or anime images), however something like this will cover your bottom if anything happens. Just add a checkbox at the bottom of your form that they have to click if they agree and then save the emails of people who you service that use copyrighted images.
Do you ever get spam through your request form or contact form? If you do, a simple PHP “type this word” like I use on Skyefairy would clear that up. It could be used on your comments as well. I should make a tutorial for this…
On your links out page: Ditto the internal border=”0”. For your affiliates, you open an unordered list but never use any list items. Don’t mind me but I’ve gotta say it: ew! Tables! You could do this with a div classed and set to width: 50%. XP
Other than the layout suggestions, small internal styling issues, and copyright suggestion, I hate to say that there’s nothing this review will probably do for you. I didn’t comment on your content because there was nothing wrong with it. It’s a bad thing for me because I feel like I didn’t fully do my job for you but a good thing for you because you’re on track. Fix up the small errors and then just keep on going. Web designing never really ends. You can always grow and expand and keep on working and learning.
Well, that does it. Hopefully Viktor isn’t too bruised now.
April 3rd, 2008 at 4:43 pm
Thank you for the review! =D I’ll go back and fix some stuff later in the week.
May 14th, 2008 at 6:00 pm
The review is great! I do agree with most of what you say here, and that Vicky’s work is certainly up to par. Just a few notes: underlines should preferably be coded with the element “ins” as opposed to “u” but that point is only hammered in the XHTML Strict Doctype; defining the width and height attributes of images considered content are important so the space reserved for the image is reserved and does not cause any other content on the page to jump around while it is loading (think cognitive disorders). Anyhow, I’m looking forward to more reviews!
May 16th, 2008 at 9:53 pm
Ramsha: Thanks
ins aesthetically does underline but in semantics and meaning it stands for insert, showing that it is something added after the first posting of something. Whereas u is used particularly for underlining for emphasis. So using ins only for the reason of displaying the line under text is inaccurate as it gives the wrong meaning (of course, its only technical semantics that get so specified).
I’ve always heard that attributing width and height in CSS works just as well for reserving the space for the image; it’s what I use and I’ve never seen it jump.
May 19th, 2008 at 12:13 am
^ Yes, but accessibility for those who visit these sites with CSS disabled will still encounter the “jumping content” and it’s just catering for those. I understand accessibility seems subjective as far as websites like portfolios go (like assuming that people won’t be visiting it with text-only browsers) but a little accessibility never hurt anyone?
As for the “ins” issue, I get the whole emphasis vs insertion thing, but the element u is deprecated in HTML 4.01 and removed entirely from XHTML. So, I suppose I was wrong there. Underlining is, as it seems, only a conventional style and should not be used for emphasis at all.
May 20th, 2008 at 11:21 am
Ramsha: Good point. I guess, then, that it is then an individual’s choice whether to include it in the CSS and be “correct” according to standards or include it in the HTML and cover all bases. Personally, I’ll probably stick with the CSS because it then covers all images in a class for clean coding and easy editing.
Underlining was used for emphasis back when typewriters were around and italics were impossible. When it comes down to it, an underlined word and a word in italics mean the same thing. That is probably why they depreciated the u tag without creating a direct replacement (like i became em) that underlines the text.