Captious Pedants

A little about my site: My site, Broken Dreams (yes, even the webmistress is too lazy to type out the full name) is a rather new site to the community, hence the low quantity of designs it offers.

It seems that the surest way to provoke us to write a review nowadays is to write something that will annoy us in the message section of the review request. Yes, I must agree with you, The Café of Broken Dreams is horridly long to write out in full all the time. My inner urge to mock you for choosing such a long name notwithstanding, I believe that when you deliberately choose to shorten your site name for the sake of laziness, you must not point it out all the time. Laziness is really nothing to be proud of, you know. As for the quantity, it needs neither explanation nor justification. I've seen new sites with more designs than old ones. It's the quality that counts. Having you justify the low quantity of designs before I even have a chance to see your site is equivalent to having a presenter apologizing about the insufficient research and preparation before even hearing his or her presentation.

With those initial annoyances, I was surprised to see that your site is not all that bad, which is why you are receiving this review instead of the usual "Thank you for waiting, but your request did not provoke any reaction from us..." One could say that I currently have this vague, optimistic belief in your site's potential. Let's see if I will change my mind later.

Presentation

I think the strong lines are what appeal to me most in your design. So often do I see site owners afraid of using bold lines; instead, they use soft, indistinguishable blending that makes everything on the screen melt together in one big blob. The contrast between light colors and darker lines work together very well, especially on the footer of your design. The header of your design is more problematic. The title of your site and the name of your version are both legible (although you should add an accent mark to the word Cafe in order to stay consistent; if the font you use does not support accent mark, you can still paint it in), but as soon as we pass that point, things get a bit crazier. There are two points that I would like to emphasize in particular.

I don't know what happened here, but judging from other parts of your design, I want to give you the benefit of the doubt and assume that you know how to make a smooth line. Yes, it is difficult to keep it smooth when you've reached the edge. I know the dilemma of working with shapes and lines. That is, however, no excuse. Pick up the eraser and smoothen up the edges in the same way that you would had this been a pencil drawing on paper. It will only take a few minutes at the most, and in return, you will appear a much more detail-oriented person.

What little hope I have of your being mindful of readability has been completely shattered at this point. Thank you for destroying my faith so soon. As a rule of thumb, never sacrifice the readability of your text for your design. Presentation is the container, but text is the content, even if it is something slightly inessential as a welcome message. It's not like this situation is unavoidable. You could move the flower to the left a few pixels or fade it into the background a bit more. Either way would allow you to keep the flower and the legibility of your text.

The same problem persists in how you chose to display your news entries. This time, you have no excuse. Whereas introductory text is something that can be glossed over without losing much, the text in a news update is another story. Usually, when people write a news update, they want their visitors to pay attention to what's being addressed in this update. Whenever such attention is asked of visitors, you do not want to give them more excuses to ignore you... unless you are one of those lovely people who update for the sake of updating.

I have no objection to using a background to highlight news updates. As you can see, Captious is utilizing that method right now. What bugs me about your news background is that it distracts rather than highlights your text. Furthermore, you leave a lot more room on both sides of this "box" than you do on other pages of your site. It gives the impression of wasted space. While we're on this topic, I find it ridiculous that I have to click through three links in order to see three of your most recent updates while you have room to accompany two or three (or even five, if you talk less about candy and more about your site... but I shan't criticize this) on one page.

The text on your navigation column is tiny compared to what is in content section. It is so small that I have to increase it twice before it becomes legible. Allow me to demonstrate:

The one on the left side is what appears in my screen by default. The one on the right is what appears after I have increased the font size. As you can see, it is a lot cleaner (and actually readable). I would go on enlarging the font while browsing through your site had it not been for the fact that as soon as I enlarge the font size in order to read your navigation, the content section breaks out in horror. My solution: you can go ahead and increase the default font size for me. The only time when such a small font would come in handy is when you have some unessential information to squeeze inside a box (as is the case with your footer text, for example). I do not think that something like your navigation could be considered unessential. Do you?

A couple of small notes:

1. Get rid of the dashed underline on your links. It has little aesthetic value, and it distracts from the otherwise clean appearance of your text. On the same note, the cross-hair cursor for on-hover links is not necessary. People are often accustomed to seeing the hand cursor; when you interfere with that, you are forcing your visitors to adjust their habits.
2. Add a heading to the topsite/button rotation section to set it off from other sections of your navigation, for consistency's sake.

Coding

HTML

A quick look at your HTML coding and I am beginning to doubt whether you think logically at all. Assuming that these empty span elements are a result of your trying to use the CSS curve technique, you have defeated its purpose entirely by forcing manual line breaks. To echo Veve, this technique was developed "so that the user could write content without having to worry about adjusting the text around the image/background," if you're going to use it in conjunction with line breaks, you might as well not use it at all. Since your layout works in a way that your text has to "curve" around not one but two imaginary lines, the technique shows its limitations. You will have to enforce manual line breaks regardless, so combine the two sections together to make things more straight-forward:

<span id="curve1" class="curve">Hello and</span><br /> <span id="curve2" class="curve">welcome to The Café</span><br /> <span id="curve3" class="curve">of Broken Dreams. This is a site provi-</span><br /> <span id="curve4" class="curve">ding linkware designs of Ani-manga. Broken</span><br /> <span id="curve5" class="curve">Dreams is maintained by yours truly, Serephia.</span><br /> <span id="curve6" class="curve">Currently, version 7 features Count Cain and his sister,</span><br /> <span id="curve7" class="curve">Mary Weather Hargreaves from the series God Child. Please</span><br /> <span id="curve8" class="curve">read our <a href="index.php?x=site_use">Terms of Usage</a> before proceeding. Enjoy your stay.</span>

And of course, you should change the width properties and values of #curve1 through #curve8 in your CSS document to their corresponding text-indent declarations.

Some general comments regarding your coding:

• Headings are meant to go from h1 to h6, from highest-level to lowest-level. You don't start the page with a second-level heading; you start it with a first-level heading. Think of h1 as the "title" for your page. "Updates" is the "title" for the index page; hence, it should be denoted with the <h1></h1> tag pair. As a cross-reference to presentation, you might want to rethink the way that your headers are aligned. They are meant as resting points, a means to break down the page into sections quickly and logically. When you have the second-level heading (which should really be first-level) aligned to the center and the third-level heading (which should actually be second-level) aligned to the right, you have ruined that visual hierarchy.
• When you give any element an id, that id should be unique. In other words, it should make sense as a name and be able to strike some associations should you happen to stumble upon it five years from now. "center" makes a bad id value because it's arbitrary: it describes the appearance/location of the table (center of the screen) instead of its function (to display news updates). What if in the future, you decide to align this table to the left? Your id would no longer make much sense, would it?
• Why do you need to include the PHPSESSID value after almost every link? I understand that Cutenews uses session id to track visitor's information when cookies is disabled by the browser, but that's only relevant to the comments feature. You don't really need to track session id on other pages, and if you do need to track session id across your site, then you really screw up, because as soon as visitors click on a link to visit another page, the PHPSESSID value is no longer passed on with the links.
• Am I supposed to take "Content Management Powered by CuteNews" to mean that you use CuteNews to power other content on this site besides than the news updates? If so, then you run into two problems:
  1. CuteNews is meant for managing news; using it for something other than what it's meant for is like using a crayon to write your letter. It works, but it's tedious and rather messy
  2. Let's face it: the template sucks. CuteNews still hasn't figured out how to use paragraph tags to form paragraph. Do you really want that mistake on every page of your site?
  If you don't use CuteNews on other pages of your site, then you need to learn how to use <p> and <br /> correctly. The latter is used to make a simple line break. When you want to make a paragraph break (or, more accurately speaking, when you want to make a paragraph), you need to enclose the content in the <p></p> tag pair.
• As for your navigation, you are not giving three random sections of text, you are giving visitors three lists of links. Hence, it would make more sense to present them as such. Using unordered lists, you could sort your links into logical, manageable sections and give yourself even more control over their appearance.
• Though these errors are not completely your fault, I believe that as the site owner, you are directly responsible for whatever is placed on your site. When it comes to coding, this means making sure that your image tag closes itself (I am referring to the image tag for Graceful-Lament topsite), that your attribute and value does not show up like this: frameborder=""0 (as in Selphies World Xchange code), and that you don't use deprecated attributes like hspace and vspace (which occurs in both of your button rotations).
• Beware of unencoded ampersands in your URL. HTML uses ampersand to start an entity reference. When you want to use it just as an ampersand, you need to encode it as &.

After you have finished addressing these logistical errors, perhaps you might want to consider the purpose of a layout and how your coding fits this purpose. Just as I believe that you should not use a crayon to write when a pen would do a much better job, I believe that you should not use tables for your layout when divider and CSS are the more logical alternatives. Tables are designed for tabular data. There is nothing "tabular" about your presentation. Instead, your layout is composed of different layers piled upon each other: the image, the content block, and the navigation block. It just happens that your navigation block lines up on the side of your content block, which gives off a "column" effect. You don't need tables for this; using float in CSS will give you the same effect. (I hope that you understand the concept of floating an element, since you've used it earlier in your welcome section. Just in case, though, Max Design provides an excellent tutorial on the basics of floating.)

CSS

I don't know why I keep wanting to give you the benefit of the doubt. Perhaps you just happened to catch me when I am in an extremely forgiving mood... Compared to your HTML, your CSS is more orderly. There are only a few points I'd like to stress in particular:

1. You will benefit greatly from CSS shorthand properties. For example:
   • background-color:#e4eafc; background-image:url('images/ver7_bg.gif'); background-repeat:repeat-y; background-position:center top; can be condensed to background: #e4eafc url(images/ver7_bg.gif) repeat-y center top;. (As a side note, you should not use quotes around the background image's URL because it is more likely to cause quirks in certain browsers.)
   • Likewise, font-family:"Trebuchet MS",arial, sans-serif; font-size:10pt; line-height:14pt; can be condensed to font: 10pt/14pt "Trebuchet MS", arial, sans-serif;. (Although, you should not use pt as a font unit. I will explain this point later.)
   • background-color:#FFFFFF; can be reduced to background-color:#FFF;. When your color consists of three pairs of digits/letters, you can omit one from each pair: #ffffff becomes #fff and #ff00ee becomes #f0e.
   • margin-left:30px; margin-right:30px; margin-top:10px; can be reduced to margin: 10px 30px 0. This would give you a margin of 10px at the top, 30px on the right and left, and nothing at the bottom. Sometimes, you would use this shorthand; other times, you would not, which makes me question whether you really understand how to use it.
2. As a value, 0 needs no unit; this is because 0pt is the same as 0em, 0px, 0cm, etc.
3. To echo something I have written in a previous review, point (pt) is a unit that should be used only for printed media. According to CSS Quirks, each browser and platform will attempt to display fonts in its own way. To have the font displayed in the size you want, use pixel (px) instead. "For example a 'font-size: 12pt' displays differently, but you can force that size by doing a 'font-size: 16px' This adjustment would make the font the same size on all browers[sic] and platforms. The conversions work like this: 1px = 0.75pt (make sure you round up or down so there are no decimals)" (CSS Quirks). An even better alternative would be to use em as your unit, which would allow for more flexible scaling in relation to the parent element, according to Big Baer's "CSS Font Size Explained".
4. When making declarations for links, make sure to list the rule sets in this order: a:link, a:visited, a:hover, a:active (your friendly LoVe/HAte mnemonic would come in handy, perhaps). Mess with this order, and you will risk browsers' rendering your link effects incorrectly.

Content

Site

"About the Site": I really hope you design better than you write, because your writing is not very interesting. I am not suggesting that you try to make your writing interesting; not carefully done, such attempt can be disastrous. You can, however, change the manner in which information is presented. A site's history, by nature, generally carries no interest to the visitor compared to the rest of the site: visitors are more interested in what you can provide them. Your site history (and your name, for that matter) is more important to you than to them. You care about the name of your site, where it was hosted, how everything started... your visitors don't. They're all trivia with little relevance unless you can present them in such a manner that they become interesting or significant. "Originally, it was hosted on Kylosa. However, Ebii, my first webmisstress, happened to stumbled across my site (god knows how), and I was happy to find that she had a domain site. . . . Then, a few months flew by (actually, it was close to a year...) and Ebii said that she was shutting down her domain. Therefore, I applied at Silversun's domain, Divine Judgment, and got accepted. So here it is now." You've told us nothing of significance. At the most, you have narrated a timeline using more words than necessary. I don't really care that much about where your site was hosted before... I really don't. You could have told me the same thing in fewer words if you used a timeline. When you finally get around to tell visitors about your site's purpose, you present it in such a way that it becomes extremely mockable: "Then after playing around with it I went online and found some brushes. Next I slapped a half-assed layout together. It wasn't great but honestly, I didn't care. Then I got to code it happily and put it up." I appreciate the honestly, but do you really want to communicate to visitors that you don't care about your site? You are presenting yourself and your site to complete strangers. You have the power to influence my perception, and at the moment, my impression is not so possitive. On a side note, consider increasing the space between the screen shot and the comment in your "Past Layouts" section.

"Webmistress:" Do you realize that your avatar is stretched beyond its original size? Or has blurry, overstretched graphics become the new trend? On another note, since you link to all the other programs that you use, why didn't you link to Photoshop as well? Consistency, my friend, consistency.

"Contests Joined": I have never quite understood the purpose behind such a page. There is no reason to list any contest you have joined unless the contest administrator specifically require that you do so. The contests that you join don't have anything to do with your site (unless you use your site as your contest entry, which you do not). After the contests have ended, what relevance do they have to your site? If you insist on keeping them, then I suggest that you

1. Divide your page into two sections, "Current Contests" and "Past Contests" so that visitors don't get the impression that you're entering a dozen contests at any one time.
2. Display your contest entry and award, where applicable, on the page itself. It makes no sense to force visitors to open a new window or tab simply to view a 100x100 avatar.

"Linkage": You already link to your host on the side bar. I find the repetition unnecessary, but I understand that you did it out of courtesy. It's not necessary to make a distinction between your link buttons and your "version" link buttons. As far as I'm concerned, they are all made by you and all have something to do with your site. One of your buttons has the curious abbreviation TCoBD. No where on your site have you mentioned this as an accepted abbreviation for your site; you have only referred to your site as Broken Dreams.

"Link Exchanges": I am tired of your using "I'm lazy" as an excuse. If you don't want to make a form but insist that people e-mail you, that is fine. However, you need to provide your e-mail address on this page so people do not have to search your entire site for that e-mail address and stop proclaiming your laziness with pride. How would you like it if I say, "Actually, I think I'm really lazy right now, so I'll stop reviewing your site; you can speculate on what I meant to say from now on"?

"Usage and Disclamers[sic]": This link should be moved up somewhere higher on the list. I consider "usage and disclaimers" to be more important than the contests you joined, your link buttons, and your link exchanges. You did a fine job of highlighting important points so that visitors could get a general understanding of your expectations without having to read the whole page. However, some of your points are repetitive: the point on direct linking is outright copied from one section to the next. Why waste such space? Combine them together, and comments on rules apply specifically to graphics only when they are relevant. As a note on consistency, you referred to this page as "Terms of Usage" in the introduction, "Usage and Disclamers[sic]" in the navigation, and "Terms of Usage" again on the actual page. The change isn't significant, but pick one and stick with it.

Designs

"Avatars": While it is nice to be able to see your maturation as a designer, many of the avatars on the third and fourth page are nothing more than cropped images. You have done very little to them besides adding a few grid lines, some shadow, and some text. These details alone hardly qualify your avatars as "designs." My advice? Delete these older works. It might be nice to keep them on your hard drive as a reminder of your development, but don't provide visitors with anything other than your best works.

"Signs": At the top of the page, you stated, "The words on the signs may be customized to fit your site's status (hiatus, closed, enter signs, etc.). Only the status word maybe changed. I will not add extra words." Assume that your visitors need these signs because they are not familiar enough with their image editing softwares (or do not have enough time) to make the signs themselves, how would they be able to change the word without messing with the image itself when you provide it in GIF? If you want visitors to be able to make the changes themselves, you need to provide them with enough instructions. If you want them to contact you and ask that you make the changes for them, you need to make it more explicit. On a minor note, since all the signs fit on one screen, the next/previous navigation links are not necessary.

"Transparent PNGs": The repetition of the site name in the background is very distracting. It's not visually appealing, and it makes it more difficult to get a sense of the quality of the cut-out. Rather than a white background littered with text, how about a gradient, colored background that would make it easier to see how well the image works on colors?

"Wallpapers": The good news is that you don't make the mistake many others make when offering wallpapers for download: you don't overload the design with too many fancy effects that make it impossible to see anything on the screen. The bad news is that many of your wallpapers have nothing unique about them. They don't reflect your style as an artist, nor do they stand out as something that have been meticulously refined. Some of them, like Sacred Ritual, are just badly executed. I am all for contrast, but a horizontal, blue design cannot be slapped on top of a gray, vertical background, and be expected to work without a whole lot of tinkering. And I just have to ask... what did you have in mind when you use butterflies, feathers, and candles in the same design? There's really nothing "sacred" about the look on her face or any indication from the image that she's engaging in any sort of ritual. You're trying to force a concept onto an image that doesn't fit with that theme. The result is something that appears very awkward. (By the way, the text, "Sacred Ritual," stand out from the design like a sore thumb.) Finally, as with your avatars, your last two works don't measure up to the standards (albeit very low ones) of your other wallpapers. It's time to remove them.

"Layouts": I will try to comment on one layout on each screen and divide my "random" selection among divider, table, and i-frame layouts in order to provide a comprehensive account of my impression without having to repeat myself too much.

• "Untitled/Wind-theme Layout": Compared to earlier works, you demonstrate a grasp of color coordination in this design. You are also experimenting with orbs/eyes illusion, something that seems out of your comfort zone. Such effort is refreshing. However, your "horrible content box and ugly footer" did not ruin this design. What makes this layout problematic is the fact that your content box and footer (as well as other graphical elements) don't align together very well. Your box is rigid and orderly; your orbs and "winds" are more "free spirited," but rather than complimenting each other, they seem glued together for no apparent reason other than the fact that you needed to do something to the original image to call it a "layout." As a result, even though they appear together on the same screen, there is nothing to connect them together into a holistic design. Take your header image as another example. You have an image to the right and an orb to the left. The image does not fit in with your background color; its edges are not blended in very well. The orb becomes distracting. As a visitor, I don't know if I should focus my attention on the orb or on the image on the right. A layout is not a dumping ground of unrelated elements. As a designer, it is your job to make these elements work together in order to provide a structure for the content. Beyond just having colors that match together, you should think about incorporating purple and plum more into the design and how your graphical elements fit or, in this case, do not fit with your typography. You should also consider your use of bullets: they are not meant as mere decorations but visual aids to help differentiate different items in a list. Having them misaligned ruins their purpose. Finally, if you think the "horrible content box and ugly footer" are not right, then you need to change them instead of complaining but putting the layout up for download anyway.
• "Cheers?": This layout is simply annoying. Once again, you don't seem know how to incorporate the image into your design. Your "vector art" (which isn't actually vector art at all) and image fit together like dog and cat. In this case, it seems that the image has been terribly butchered in an attempt to make it fit with what you have in mind. Blue is usually a safe color, but in this case, it seems obnoxious as well. What is that "blob" supposed to symbolize? What is its function? Why are there blue brackets? You need to think about the impact of each element in your design before adding it. A good cook doesn't throw together some random ingredients and pray that the dish is edible. Add some padding, and be mindful of your colors. Your block/vortex theme seems to have potential, according to Veve, but only if you do not force it to work with that image, the Chinese text, and the beveled title.
• "Vagrancy": Hmm... if the PNG is from Aethereality, the texture is from Fractured Sanity, and the brush is from Celestial Star, what exactly is yours on this layout? Do you claim credits solely for slapping a cut-out image on top of someone else's texture, then add some brushes on top of those? What? You coded the layout and make it ready for usage, you said? You did a bad job of it, still. When a typical line only has room for eight words, many people would recognize it as a problem, but you are so wonderful, perhaps you haven't noticed? You have a habit of using numbers for your navigation ("Age of Innocence" doesn't even have numbers to indicate the navigation options). Numbers do not serve well as navigation links because they have no contextual meaning. How am I to know whether "3" means "Go Fetch" or "Download" or "Blog Archives"? If you don't have enough room on your layout for navigation text, then your layout is not wide enough.
• "A Voiceless Conversation": When I have to scroll to see the first line of text on a 1024x768 screen, your header image is too large. Had it been artistically well done, I wouldn't have mind, but in this case, it is nothing more than a grayscale image buried under heaps and heaps of distracting brushes. Your brushes look like manacles... rather odd things to add on top of a voiceless conversation, don't you think? Every time I move my cursor over one of the links on the navigation column, borders appear around that link, which pushes down the content area. It was amusing for 0.5 second, but then it became rather annoying. On a different note, you should not tell visitors to use bold tags in place of headers. Just because they appear the same doesn't mean they serve the same purpose. The former only makes the text stronger in appearance, while the latter tells the browser that it is a heading—something essential to your content. Please don't give out such unhelpful and inaccurate advice.

I am tired of repeating myself. As with your avatars and wallpapers, layouts such as "Age of Innocence" and "Crystal Violet" have no room on this site, especially since you're capable of making something much more decent, like "Calamity". When they deliver only negative impressions of your skills, they should be removed, for your sake and for the sake of your visitors.

Parting Words

Browsing through your site is a frustrating experience because it seems that you know what you are doing, but you are just not trying hard enough. You can deliver decent-looking layouts like "Calamity," "Untitled" [14], and "Deadnight Moonlighter," but they appear in conjunction with crappy works that make me question whether you spent any time on them at all. Laziness is not an excuse. You seem to recognize when something isn't working, but rather than going back to fix it, you put it up for download. How can I trust you as a designer when you do such flaky things?