Read Review
- Site: Colored Design
- Owner: Kiru
- Reviewed by: Tyler
- Date reviewed: June 3, 2007
Oh boy, a splash page? I assumed it was fairly well-known, at least within the reviewing community, that splash pages are pointless because they're very rarely used appropriately. Regardless, here is why your splash page is useless:
- To start, despite the fact you took the time to create this pretty little entrance, I have to look to the title bar to find the name of the site. That's practical.
- Additionally, your offsite links are by far easier to find than those by which you enter Colored Design. How creative! Not only are you turning visitors away because they're too busy to poke around the likes of clues to find an entrance, but you're also generous enough to provide links elsewhere for when they tire of your game. Why do the glaring impracticalities escape you?
- I realize your entrance methods aren't quite the "maze" I'm making them out to be, but on any type of page for a web site, clicking little areas of an image or a tiny text link to get anywhere, (especially when we're talking about simply getting into the site), is borderline ridiculous.
- Nobody cares about your unique visitors and referrals. Nobody cares about your fanlistings and exchanges. The most interesting part of your splash page is the little advertisement, "win a free domain." That's dandy and all, but if someone wants that free domain they're probably leaving and not coming back. I must say, it takes something to shove visitors away before they've even entered your site.
Ditch the splash page; there's nothing about Colored Design that warrants its use. A splash page might be legitimate, for instance, if the site utilizing one contains questionable or potentially offending material.
Presentation
Your layout is too small. The way I see it, nowadays especially, designs should be "maximized" to the 800x600 resolution. That way it's still accessible to the smaller resolution without being ridiculously tiny. At the very least, increase the width of your content area. It seems that graphic designers are sometimes under the impression that tiny layouts are "cute" and such. That may be for half a second, but once you try reading through what the site has to offer it's mostly just a headache.
The combination of reds, pinks, purple and green in your design give authenticity to the site's identity and create a soothing palette I actually enjoy staring at. The main image is enhanced subtly enough to provide a focal point that's not overly distracting and it blends well with the design. As far as the header is concerned, however, I have a few problems that should be addressed:
- There is no emphasis or contrasting details in the site name to make it stand apart from anything else. Sadly, looking down the page, your main text and links seem to jump from the page more than the name. Must I really go into explaining the importance of a site's identity? At the very least I'd suggest making the font size drastically larger, increasing the font weight, and perhaps even changing the color.
- I've never been a fan of designers including the names of "site versions" in their layouts, and yours is no exception. Ignoring the fact that as it is, "third color: the crown clown's color" stands out just as much as the site's name, these words, other than telling me the site is on its third version, hold no obvious significance. The crown clown? You may as well throw in some ambiguous poetry and algebra symbols for all that means to me. If you insist on keeping it, at least be sure that it's subtle enough to not detract from the design and concern yourself less with creativity, at least so I can tell outright I'm reading about a site version and not a load of jibberish.
- As previously witnessed on the splash page, you have a real knack for turning visitors away before they even catch a glimpse of what Colored Design is all about. This time, however, (assuming your visitors get through the splash page, at least), the first thing beneath the site title they're offered with are affiliate links. I'll give you credit in that they're not glaringly obvious, thus distracting from more important elements, but they are poorly positioned above anything regarding your site. It would be more appropriate to move these to your sidebar or roomy footer. And, this may only be a personal preference, but as an affiliate, I'd appreciate more than a two-letter abbreviation to represent my site. You obviously have little regard to the importance of site identity, but you shouldn't force such an inconvenience upon your friends as well.
- Composition wise, the only other issue I have with the header lies in the decorative watermarks. The topmost one on the right side of the green bar, (which happens to have more emphasis than any of the text below it, might I add), gives the impression of wings: something regal or elegant. Then below I see very swishy, swirly lines that appear more comical and personal. Find a theme and stick to it, and if that means taking more time than to slap some brushes behind an image and adjust their transparency, it would easily be in your favor.
Looking over Colored Design on the whole, you've paid a good deal of attention to emphasis. Whether or not it was on purpose, your display of content is mostly balanced. Your update boxes, for instance. The watermark and lighter background color provide the needed contrast without hindering readability or making them seem a separate entity from the design. Also, the purple color chosen for links is bold enough to make links obvious. There are still a few things you should keep in mind:
- Watch your padding in the updates boxes. Right now the top, right, and bottom of these boxes have very little padding where there's about three times as much on the left. Looking at your CSS, I see this padding was, in terms of how the code is written anyway, executed on purpose. Adjusting the padding to a single value of about
10pxwould be more appropriate. - Though I appreciate you further implementing green from the header into the design, I'm afraid your level 3 headings (
h3) don't have enough contrast. Darkening the shade of green used helps with this issue. Also, if you left theletter-spacingto its default value, the letters would be closer together which might help them stand out from the background further. - There is a lack of consistency between your
h1s andh2s, considering they appear as if they're supposed to look similar between the content and navigation sections. If you're going to align first-level headings to the center, your other headings should probably follow, though it seems more appropriate for your design to have all headings aligned to the left. You've also utilized a serif font-face forh2andh3, but a sans-serif forh1. The serif font seems more appropriate as it provides additional contrast to the remaining text. - I'm not sure changing the style of your "Terms of Use" link is necessary. I understand you want to provide emphasis, but by changing the color and adding an underline it no longer has any of the characteristics of a link you've already established. On top of that, I'd like to believe most graphics site visitors are used to reading through and abiding by any rules a site may have in place, thus the added emphasis is an extraneous effort. (Or, perhaps it's the opposite, and everyone simply skips over site rules. Either case ends in your emphasized link serving no purpose.) An alternate solution might be to move the link beneath "Blue" so it's the first thing read by visitors before any of the listed graphics. The decision is up to you, of course. If you think your terms are important enough to break the consistency of the navigation links, go right ahead.
- And, now that I've been reading through your site for a while, you might think of adjusting the intensity of the pink, main text color. It's a touch too intense for its purpose, or at least appears so on my screen. This isn't a huge problem as another pedant has told me that she thinks the color is still appropriate.
- An option you may consider would be to switch your pink and purple text and link colors. This still suits your design well and is somewhat easier on the eyes since the main text has more contrast to the background.
Content
Moving on! Let's take a look at your introductory paragraph.
[Welcome]... to Colored Design. Colored design is a graphic site that runed and owned by the only one Kiru. Colored Design served you with many graphics for all your needs. But before you are going to far away and downloading everything in this site, please read the Terms of Usage first, for your safety :3
- Kiru
This paragraph is absolutely full of syntax, grammatical, and spelling errors. You've left a word out of and rearranged the word order of the familiar phrase, "one and only," butchered the past-tense form of "run" to a word that doesn't exist, "runed," and you've switched tenses in nearly every sentence. These glaring errors destroy almost all of your credibility as a writer, which reflects negatively on Colored Design; even more so in your opening statement! This writing makes you sound like a child, not a 17-year-old. Yes, it's harsh, but reality.
And, of course, the opening paragraph isn't the end of the problem. Your entire site is full of errors just like those above. It kills me to wonder that, perhaps, these errors are simply the result of a lack of proofreading. Do you blindfold yourself, type out some content, and update without checking to see if what you've written makes sense? Please, for the sake of your visitors' sanity, (not to mention your "Internet image"), proofread every page of Colored Design and edit accordingly. Grab some friends or family to help if the task is too large of a burden. Simply realize that these errors are both everywhere and extremely difficult to look past. If you offer content in such an unrefined manner, what's to say visitors won't assume your skills in creating graphics are just as insufficient?
Looking under the welcome message, I notice you have the same links for topsite voting and the "win a free domain" button as on the splash page. Despite the fact that having these here make your splash page even more pointless, I don't like seeing them before I've had a chance to look through the rest of the site. They would be more appropriate under "Etc" in the sidebar. After all, if you want votes for Colored Design as a "topsite," wouldn't you like the votes to have some meaning behind them? I have to wonder at how many would be willing to click a voting link on impulse, especially after reading through that horrid introduction.
Navigation:
I understand the recurring theme of Colored Design is colors. I don't think that's enough to justify randomly chosen words as your navigation headers, however. If I were skimming your navigation bar for something in particular, "Loves," "Orange," "Blue," etc., do not help me in any way. Besides, if you were going to bother with naming every header in the navigation after colors, "Loves" and "Etc" are out of place. Consider names that represent the set of links beneath. The theme of your site is obvious enough without you going out of your way to be so "creative."
There is a "[number] color" link that displays the number of visitors on Colored Design, which is a fairly vague way of referring to people. Again, being creative should never hinder practicality. On another note, the buttons beneath "Etc" mean nothing simply because the header gives no clue as to what they are. Are they sites you admire? More affiliates? Random link exchanges? Specification would be nice.
"Previous":
This heading for a page title is misleading, as I first assumed it to be a "go back" link. Finding that it's actually a small chronicle of your previous layouts, however, I suggest giving the navigation link and page a more detailed name. "Previous Versions," for example.
Overall this page has little to offer. The screenshots merely capture the main image used in the previous design, and what is more, there's only one screenshot of a design you actually created. That being said, I question whether or not you should include the screenshot of your first version. This page is, for the most part, uninteresting and unneeded. "Periode" is misspelled.
"About":
For one, "Mainly" is used incorrectly as a section header. I'm assuming you meant "Main?" Regardless, the secondary navigation you've created for this page is impractical and slightly misleading. We are given links to "Color owner," Fanlisting joined," and "Awards," but introduced to the sections "Story Behind" and "Name" underneath. What is the desired content flow of this page? How do you propose visitors to navigate through your "About" information? I suggested a similar form of page navigation in my collaborative review for Fantasy Forest, and I'll offer you the same strategy:
To start, let's be consistent with the navigation and name this page "About." Now, despite the fact that you've turned this page into 5 separate sections, none of them are long enough to warrant their own page. Here's how I suggest displaying the content:
- First you should eliminate some useless information. The content under "Name" is self explanatory. If someone visiting sites within the graphics community doesn't understand the definition of color or the obvious significance it has to your site, or any visitor for that matter, we have a problem. It also makes no sense to provide the "Fanlisting[s] joined" page, as this information is better suited for a personal site; it is not relevant to Colored Design.
- Instead of separating the sections to individual pages, display the sections on the single "About" page. If you're afraid people will be lost within the thousand leagues of information, provide a list of internal anchor links at the top for visitors to click through whichever sections they desire.
- I'm also tempted to suggest removing your "Color's Owner" information. I doubt many are interested in knowing you started with Adobe Photoshop 7.0 or that you asked your father for an Internet connection. The list of personal information below all that is also somewhat irrelevant, save perhaps your networks and e-mail address, (both of which could be moved to the "Contact" page), as it seems better suited to a personal site. If you find this information necessary, however, at least give some padding to the image on the left. It's annoying to read a list of information when it's smashed up against the broadside of a block.
As mentioned before, realize that every section on this page needs to be proofread and edited. It would also be more appropriate to name "Story Behind," "Site History" or something similar. Also be careful with the links on "Awards," (or should I say "What I Get?"). The first link should include the word "Layout," the second should include "Site," etc. I'm not sure what "Guessing the Picture" quizzes are, but I highly doubt their relevance to your graphics site. Consider removing them.
"Linkages":
"Linkages" is not a word; remove the "s." Further, you say beneath "Link In":
Just remember 1 thing : not to do a direct linking, so you won't see the evil side of me :3
Ignoring the grammatical mistakes, what are you speaking of in regard to direct linking? If you're talking about the buttons/banner you display below the warning, you should at least specify as much.
Instead of making the first subcategory of "Link Out," "Resources and Links out," perhaps place all the links within the list that aren't resources under an "Etc." subcategory of its own. I also wonder at why a "Disclaimer" appears on this page of all you have to choose from. Wouldn't it be more appropriate on the "Terms of Use" page? Last time I checked, disclaimers have little to do with "linkage." No page of a web site should be used as a "dump" of information. If you're providing links, keep organization and relevance to your site in mind.
"Joined":
Joined contests, huh? The title of this page isn't specific enough. When did you join them? Why? Did anything become of joining these? Are they still occurring or simply activities of the past? Right now this page is completely useless. The slightly transparent hover filter you've applied to these images is annoying because the details of each content banner aren't visible until I place my mouse over them, not to mention this is the first time I've seen this hover method on the site. Perhaps you should display these as you have your awards, with text links in a list.
I see you've also taken the time to link Captious Pedants as a site reviewer of yours. Ignoring the fact that you have in no way "Joined" Captious, what made you think that by applying for a review you were entitled to one? Are you unfamiliar with our reviewing and selection process? "Site Reviewer" is an inaccurate heading for this section as you had not been guaranteed a review from us at the time you placed the link. We appreciate the courtesy, but if you're going to bother, at least link back correctly.
"Contact":
Well, it's apparent that you've put no thought or care into the presentation of your contact form. None of the labels remotely line up with their corresponding fields and the buttons are plain ugly: not to mention out of place when compared to the design. Where did the gray serif font come from?
Taking a closer look, I realize these inconsistencies are mostly likely because you've placed your form entities within a table. A form is not tabular data, so it's no wonder things aren't displaying correctly. You can make things a lot easier on yourself by wrapping "Name," "Email" and "Message" in <label> tags, then assigning them a left float in your stylesheet. This would allow you to ditch the table entirely and simplify the code of form elements to the following:
<label>Name:</label> <input type="text" name="Name" id="Name" size="45">... and the same with the other fields.
If you are unfamiliar with floating elements, here is a useful tutorial courtesy of Maxdesign.com, which outlines all the basics of floating elements with CSS. There are also more complicated tutorials, should you find floating a desirable means of displaying other elements on Colored Design.
It is unfair to leave you with using floats as the only solution, however, as floating elements can become tricky, especially for those not used to the method. I therefore propose a second option, which involves taking the your hidden_error messages out of paragraph tags. This is justifiable, as technically speaking, these errors aren't supposed to be paragraphs. They are singular error messages for which the span element already styles. If you do this, however, I would also suggest adding some padding to your table cells as to provide space between each form field and label. I would've suggested giving paragraphs within table cells a display: none; property, but this would also yield the visible_error to not be displayed.
Unfortunately, not understanding the backend PHP you're using to run the form and the error messages, I cannot suggest much more. This contact form tutorial from Tutorialtastic may be useful, if you would like to reconsider your methods of warning visitors to complete form fields. Using parts or all of this tutorial could help remove the display problems in your form.
"Terms of Use":
Or should I say "Terms of Usage?" The link on the index page and the title of the terms page itself are inconsistent with the navigation link. It's a minor error, but simple mistakes like these are unforgivable. They make you look rather careless, if nothing else.
If there is any page where correct grammar is critical, it's this one. You don't want visitors misinterpreting your rules, after all. For instance, the line "No copying, stealing and redistributing" could lead one to imply that any of the two aren't in violation of your rules without the third. It should read, "No copying, stealing [or] redistributing." When you start combing through your content for errors, I'd suggest starting here.
Faults in grammar aside, your rules are actually quite thoroughly laid out. I also appreciate that you provide a link that explains the meaning of "direct linking." The line "(for avatars: look below)" regarding linking back is a little pointless as the expansion you provide further down still results in avatars being linked back. It's redundant. I'm a little confused as to the difference between your "main rules" and "specific rules." How and what are the "specific rules" specific to? Also, you state "Non-commercial use only," but then contradict yourself immediately by opening up the opportunity in the next item when you say that visitors can do so if they notify you. So which is it? I don't understand what the line "No derivative works of graphics materials" is supposed to mean.
I see that you've included a "last update" notification at the bottom of the page. This is fine, assuming you notify guests on the index page whenever you amend the rules. This being said, I wouldn't ever suggest making major alterations to your terms. Someone using a layout or graphic that has looked through and followed the terms isn't likely to randomly return and see if anything more is expected of them by chance.
"Divs/Tables":
I am most impressed by this page than any other in Colored Design I've visited yet. The layout title, description and blue, dashed border beneath are appearing on this page for the first time, another blip in consistency, and I'm not sure what to think about the golden background color given to "Category," "Style," etc. But, overall, I like the way you've presented your layouts. The screenshots provide accurate previews to the corresponding designs and the background of each "preview box" is tasteful, as with the update boxes on the index page.
I don't really like the hover on the preview and download link buttons. It seems to be the opposite of what you had on the "Joined" page, with the contest banners. A color change in the button and/or font would be more appropriate. Also, putting the preview link before the download link would make a little more sense. I don't think that many visitors will download a layout after seeing just a tiny screenshot.
I've chosen what I consider your best and worst div/table design, as I will with the iFrames in a moment, and expand upon why I think each is good or bad respectively.
First, the good. Keep on Working. This design stands out to me for a few reasons:
- You provide the opportunity for the user to customize the site name. I've always been annoyed with designers coming up with nice designs and then carelessly slapping some sappy title like "Ethereal Dreamy Wonder Cupcakes" or "Thoughtfully Dancing with Spring Flowers and Mystical Magenta Breezes" on the top in huge sparkly letters. Why is that a problem? Though the title, in some cases at least, may represent the design, a site title should represent the content, not the pretty flowers in the background. It's really a simple thing, but I appreciate this gesture of convenience you've taken advantage of.
- I also like this design because it shows your ability to be flexible with color. You've incorporated the highlight red from the image into elements of the layout that should be highlighted, (links and headers), and you've created a palette that's functional and easy on the eyes. That isn't to say this is the most beautiful combination of colors I've ever seen: I'm simply admiring the fact that the colors in this design weren't grabbed from a hat and thrown in without a second thought.
Despite the fact that I chose this design as "good," I still have a few things I aught to mention on the negative side:
- I don't like the way an orange corner of the main image is left protruding obnoxiously into the navigation column. It would've looked much better if it gently blended into the green color below it.
- I'm also not very keen on where the navigation text begins. The large gap between the header image and the first navigation heading is unneeded and breaks the flow of the design quite harshly.
- Even with commentary on your color choices above, the link hovers don't look nice on the green navigation background. A darker orange, brown or green probably would've suited the hover better.
And now for the bad. My Feelings. You probably aren't surprised that I chose this as the worst, considering you already see it as "really bad" and "ugly."
- The image effects you used in the header, as you pointed out yourself, have completely obliterated the beauty of the artwork. The woman on the left now has an awkward green rash appearing on her side, and the portrait to the right is hidden under textures similar in color to mud and rotting leaves. Where was your head when you picked out this color scheme, (if you could call it one)?
- The fonts chosen for the header do not match in the slightest: one is very fancy, an elegant script, while another is very whimsical and cartoony. This is without mentioning the fact that your title to the affiliates section, (cleverly displayed as dots), has more emphasis than the design title above it. I also dislike, as I do with any design, the word "Navigation" slapped over the navigation bar. The word that comes to mind: "duh."
- Overall the composition of this design is careless and ugly. The headings in the content section have a random watermark that's awkward and seems to have come from nowhere else in the layout, the main content text doesn't stand out from the background as it should, the links are dark orange with a putrid yellow hover: both of which look extremely out of place on the bland, greyish backgrounds of both content sections, the word "contenT" above the content section, (refer to "duh"), is capitalized backwards(?), and the borders to the main content area are uneven on the left and right. It took you 2 hours to build? I'd have to assume you spent 1 hour and 59 minutes to code it, then.
It might seem a little pointless for me to be critiquing this layout since you've already labeled it as "bad," but you seem to share negative opinions of quite a few of your premades. On "Leo," for instance, you say "Hmm, actually i dont think this layout is nice enough, but yeah, i have to put it!", and on "Arc," "i'm not doing anything except to edit the picture using textures. ;_; what an uncreative way to make a layout. Ha."
Much to my surprise, your divs/tables layouts on the whole are good. They show changes in style, different color combinations, and contrasting means of content flow. Be careful with image-based navigation, though. It's always been an impractical technique, especially when you have the room for something textual, as you do on these types of designs.
"iFrames":
Update the title of this page to "iFrames." I'll now choose two designs to comment upon as I did for your divs/tables layouts.
Playing Music strikes me as your best iFrame layout. One of the main reasons I like this design lies in your use of a textual navigation. Since iFrame designs are, by nature, compact, it's often a designer's "easy way out" to throw in some random numbers, shapes, or images to use as the layout's navigation system. You've only done so in this layout for affiliates, which is secondary content to any site and thus easily justified. And, despite your use of textual navigation, the content area is still reasonably sized, as is the navigation itself.
My only complaint is the awkward break between the image and "Playing Music" title and the two content boxes. Adding something simple to that empty space would help "complete" the design, in my opinion.
My least favorite of the iFrame designs, though I have to admit it's difficult to choose--all three of your designs in this section are fairly solid--is Candy Love. There are three basic reasons I chose this as the "worst":
- The very common "One," "Two," "Three," image navigation is used. This is not altogether impractical, but sometimes annoying as it does not clearly show what page each link leads to.
- The design is fairly typical in size for an iFrame design, but I don't enjoy reading in the far, bottom-right corner of my browser. It's unnatural and awkward.
- Lastly, the main content text is a little small. Increasing the font size to just one unit larger would improve the ease of readability greatly.
Once again, I'm fairly impressed by the layouts you have to offer. The completeness of your designs overall shows not only your ability as a designer, but also your ability to offer your best works. Though, even if a layout is as strange and "ugly" as My Feelings, I would never suggest admitting to disliking the design and uploading it anyway. All that says to visitors is, "Hmm, I haven't updated for a while, so here's a half-assed attempt at something useful to keep you happy." If it's not up to your own standards, what makes you think anybody else will enjoy it? Especially when they can see you're capable of better.
"Avatars":
I can see that your avatars are designed without overdoing it. Nicely done. My only suggestion would be to watch how you resize images. On a couple of the avatars the main character's face or body is jagged due to what I'm assuming to be resizing.
"PNGs":
Extracted by the only me, some of them are my vector.
What exactly do you mean by "your vector?" When I think of "vector" I think of an artistic process by which an artist represents an image through a series of vector layers. This is not what you have done.
And, a minor technicality: there is no space between the opening paragraph and first PNG "preview box." You remedied this on previous pages by using a double line-break, (<br><br>). Since that's not what line-breaks should be used for, enclose the paragraph within the <p> and </p> tags. This uses the paragraph tag appropriately, plus it fixes your spacing problem. Refer to the coding section below for further details.
The way you've chosen to display your PNG previews is senseless, (or were you simply feeling "creative" again)? A tiny, square image of the smallest portion of the overall PNG? My only question is: why? Why would you force your visitors to click through every download link just to see the entire image? Why do you think a small window showing a shoulder or strand of hair is visually appealing as a preview? The screenshots of your layouts were practical and useful. These are not.
What is more, "Unknown" is 1.33 Mb in size. I don't know much about PNGs, but considering your other PNGs aren't nearly that large and that I can create an entire website in under 80 Kb, images and all, that seems to be vastly impractical. The biggest problem with this image being so large is that it stops loading about 1/4th of the way through, or at least that's my guess since the preview gives absolutely no indication of the complete image. (See the screenshot below.) I'd say that's because your FTP client or uploading tool choked and gave up. No, PNGs don't have to be optimized, but I question whether or not "Unknown" should be so much larger than every other you offer.
"Wallpapers":
These are nice. You've embraced their function and paid attention to simplicity, (save Libra Card, perhaps). The 1024x768 link for "Chains of Memories" leads to the thumbnail, not a full-sized wallpaper.
Coding
Now that I've commented on the presentation and picked through every last page, let's take a closer look at the inner workings of Colored Design.
I see that the header of your layout is constructed in 5 slices. It's been mentioned at Captious before but I'll repeat it again: slices do not save loading time. If anything, they make sites and images load slower. It may seem to make the page download appear faster, because one image appears, then the next, etc., but the overall page download becomes slower. Your header image is small enough to be saved, (optimized appropriately, of course), as a single image and displayed as such.
Displaying layout images as background images to divider layers has a few advantages. One, the images will not appear if there is a problem accessing the stylesheet, which makes the un-styled page much more sensible and easy to navigate. The footer, you see, should be done in this manner. And, despite the fact that you've actually done this in the header, creating 5 separate div layers is a little excessive: especially just for images, and small ones at that.
Another reason slicing can be a bad practice regards image sizes on the whole. A JPG image can be compressed to 80% or even 75% with very minimal detail loss. Even if you compress each slice, the overall size of the slices together is likely to surpass that of the entire graphic optimized correctly. The only time I might consider slicing would be in a gargantuan image, but of course, that's a mockery in itself.
That being said, I suggest you reconsider the coding of your header. It makes more sense to make a single divider layer with a set width, height, and background. This would display your header image. (No need for useless s this time around.) Within this layer, then, you might include the title of your site within an h1 with a display: none; property so that when styles are disabled, visitors still have a title to look at. Here's an example to demonstrate:
<div id="header"> <h1>Colored Design</h1> </div>With the accompanying styles:
#header { background: url(img_source); width: unit; height: unit; }
#header h1 { display: none; }
(Just a note: you may also have to apply margin: 0; or padding: 0; to the #header h1 selector to ensure your header begins at the top of the page.)
This would be a more practical way to display your header, as well as provide a site title when CSS isn't available.
Speaking of disabling styles, I see that you've applied align="center" to your navigation divider. This is pointless, as your hostess image is already centered on its own, where aligning the entire layer to the center makes the navigation extremely annoying when the stylesheet is unavailable. I suppose you may have done this to center the navigation headings, but properties can be changed within the h2 element to prevent them from being aligned to the left. Plus it's generally best to leave all styling attributes external to your markup.
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
The above attributes can be assigned in the body selector of your stylesheet. The values should have been in quotations, anyway.
Overall you seem to have a good grasp on how to structure your page and what tags are appropriate when. Be sure to utilize paragraphs appropriately. For instance, the entire welcome message on the index page should be enclosed in a <p> tag, and paragraphs can be used to avoid spacing issues that you've fixed with line breaks. Also, if you've styled your section dividers correctly you should not have to put a line break between each update entry.
Because you've decided to code in XHTML 1.0 Strict, pay closer attention to the XHTML Guidelines. More specifically, be sure to enclose all attribute values in quotations, write your tags in lowercase, and close all tags, (which includes "empty" tags like <img> and <br>). Because you have not done so, your pages do not validate correctly.
A couple, minor housekeeping things to keep in mind:
background: url('images/bg.jpg') repeat-y;. The quotations surrounding the image source should be left out as to prevent mishaps caused by such in certain browsers. A quote from Web Design 101: Backgrounds states:
There is no need to wrap quotation marks around the URL-they are optional-but using them is valid:
background-image:url("../images/example-image.gif");Single quotation marks are also allowed-however, singles trigger a bug in IE5/Mac which will hide your background images altogether.
- There is no general
alignproperty. (See line 55 in your stylesheet.) You probably meant to usetext-align. - You can add the vertically repeating background image to the
bodyselector and omit thelayoutdivider. - Your footer should be executed in a way similar to how I described displaying the header. Again, focus on keeping all styling, (and in the footer's case, layout images), apart from the structure of your page.
Wrapping it Up
Wow, done already? And it only took 15 pages to get here!
If there's anything you take away from this review, I hope it's a greater appreciation to the importance of details. Check your content for errors before uploading for the world to see, make sure you approve of your designs before offering them for download, and if you're going to bother creating a tableless layout with a specific doctype, at least follow the basic rules of such.
Despite your various inconsistencies, language errors, and occasional oddities, I do not doubt that you are able and may become one of the better graphics providers within the community.