10 April 2008 - 20:31Raison-detre.org

This was not how I wanted to start out this review, but, what happened? I do remember seeing a gray splash page and upon visiting again, I find myself with just the main site I’m supposed to be reviewing (I had already written a review for you splash page). I do believe that your splash was part of the deal but I suppose I’ll let this “major” change slide, besides, I doubt you would want to read what I wrote about the splash page…

Information

Site: Raison-detre.org
Type:
Domain
Owner: Chopin
Reviewed By: Erica
Date Received: 12/31/07
Date Completed: 4/08/08
Preview

Presentation

Now I see a rather large and dark Bonjour and adjacent to it is a man smoking. It is a bit disturbing due to the fact that images that normally depict smoking and the like aren’t at all kid or teenager friendly. I’m instantly wondering, “Now, is this site a collectives? or an advertisement?” It’s the former, fortunately. But I must commend you for the work on the layout itself, ignoring the iframes, I find that designs that give the user a circular glance must and will be great. I first see the hello and as I said before, I looked towards to the smoking man and now I’m down at the site title and thinking, “Ah! So that’s the site’s name.” The font for the site name is appealing and I can read the words! Kudos for that. Now what’s this? I see a small obscure man with a speech bubble, I’m clueless as to what it is until I scrutinized the extra tiny text on it to find that it’s a navigation. I must say, are you trying to blind my already dying eyes?

If your navigational links were at the very least, the same size as your normal font, I shall be very pleased. Beside the point of the text size, again I don’t find any relevancy in the small image of a man sitting in front of a TV, I suppose it is to introduce your navigation but at this point, I could hardly care about your navigation due to its minuscule size. Do away with that tiny, out of place navigation and just add the navigation links above the i-frame or inside the i-frame if you so wish.

As for the overall state of your layout, like I said, it means a lot if you can bring the users eyes around in a circle since any work of art, etc… always has a starting and end point. However, your colors could use a bit of contrast, as of now, I’m getting a little nauseated just looking at all the green and blue hues. Think of it as seasickness…which I rarely ever get.

Content

In terms of design, I quite understand the urge to use a smaller font than the standard 8pt or 12px/11px but this is a bit out of hand. Even if it is an iframe, at the very least have the line-height at 14px or higher. Right now, it is way too cramped and I makes me feel that you’re trying to cram everything in this small frame.

If anything, while the font size and line-height are already toeing the standard viewing line, separation of paragraphs are always welcomed. I see big wads of text and I’m reluctant to read it, to say the least, it’s intimidating. Think of a site as an essay, each part is divided into paragraphs and each paragraphs also have it’s own structure, and think of a section of a site as an essay also, beginning, middle, and end. While the beginning is good, if the middle isn’t the whole essay falls apart, and right now, it’s the same for your site. I’m finding it tedious to tread onward when I see small text and huge paragraphs, if it was vice versa with larger text and smaller paragraphs, I’m a happy girl.

Main Page

I’m not going to state this for every page but, even for the introductory paragraph, if it’s going to be that big, which I find a bit meaningless considering what you wrote for it, at least cut into slices.

Welcome alien no. 75842 to Raison-detre.org, my (Chopin’s) humble abode full of unimportant and random sites that helped me procrastinate through middle school and now college. But of course, these sites don’t exist mostly just for my own pleasure but for others to learn about something new or find out more about a particular subject. Everything should be self-explanatory and if it isn’t, then it is my fault and you can feel like you’re better than me for a couple of hours and go on with your merry life. Feel free to poke around and I hope you enjoy your stay here!

Ah, much better. That huge section I crossed out is not needed, rather, it is excessive. Any one thing describing your site or you and/or visitor should be put in its own page rather than stuff a chunk of it in the introductory paragraph that introduces what your site is about. Be concise, and short, to say the least, visitors are out for eye-candy rather than reading a bunch of text (they do that enough in school) unless your site centers around a journal or written articles, keep things short and to the point.

As to the alien no. blah blah number, it’s dispensable, as a visitor, I could care less about what visitor number I am. If you would like to have statistics for your site, I would recommend Google Analytics or Stat Counter.

For your updates, the dates needs to be a bit discernible, such as emboldening the dates:

2008.02.21 - There are new textures, icon textures, and a tutorial at Falderal.
2008.02.16 - I finally added the fun bag section of the domain with icons and a hair tutorial. I plan to add movie thoughts/recommendations so look forward to those!
2008.02.10 - No new sites but I updated the sites section with the fanlistings I already owned and a new project. Please join the fanlistings!
2007.12.30 - I guess I’m REALLY feeling productive. I even planned out how to expand this collective to make it slightly more interesting for the visitors rather than just being a simple storage place for myself. While I implement those plans, which might happen sometime in the course of 5 months, check out the exit section of this domain because I added new links and also my photography portfolio because I added more prints and a couple of new albums.

There, I can now discern what is what and when pigs fly.

Domain

I would like to emphasize that vocabulary, if used right can be effective, and if used incorrectly, can muddle the meaning you’re trying to get across. For instance, the word logistics, I do believe that the meaning you want and the actual meaning does not coincide with each other.

Quoting from Webster’s:
Logistics n. military science of moving and supplying troops

Now that sounds odd, doesn’t it?

The sub-header itself needs a bit tweaking:

Domain Logistics and Random Information
to:
About the Domain and Other Information

Sites

Clean and neat, but they need to be separated, each description needs to stay only to its site it is describing. Right now, the only thing that actually separates each of these sites are the buttons. Again, I understand that you want to conserve space according to the frame height but it is a needless concern.

Coming…eventually

Most particularly, in areas like these, big descriptions, barely visible separation of each. Without me actually leaning close and trying to decipher which description belongs to which, all I see is a large chunk of a paragraph. Albeit you included bold lettering and number identifications, still, it isn’t enough without separations. But a suggestion is indicating that they are all different by using a bolder color for your bold words, adding bullet points instead, or just indenting each number or description.

Fun Bag

Graphics

You offer icons, I see. Well, they don’t seem to have that certain “spark,” so to speak, that icons should have to attract attention. I do enjoy your different toning of the same icon, but, to be frank, it’s basically recycling, and that in short, is not something you want to continually do. Unless you can come up with a whole different theme for each of the same image, I suggest not to repeat images that only has changes in tones and lighting.
You’re not completely without talent in making icons, so spend time on each, trying to see what would fit each icon rather than just tweaking the lighting and colors, even just adding a bunch of light, soft brushes and saying that it is an icon.
Here are just a couple of sites that show some variety when it comes to icon making:

Exit

I have nothing to say about this section except to make a list of your Links Out by using this tutorial from A List Apart: CSS Swag: Multi-Column Lists

Coding

Simply put, your coding is a bit outdated where tables aren’t used for layouts, only for data handling, granted that there are still numerous sites that still hasn’t or cannot conform to the new web standards. Instead of trying to give you a whole tutorial in converting from tables (which is supposedly only used for data display) into divs and actual css: From Table Hacks to CSS Layout and Coding a tableless (CSS) two-column layout (which can basically be applied to i-frames if you understand the semantics).
Now as I look at your actual coding for your content, I’m a bit terrified. I’ll be issuing some explanations about why not to use the coding you’re using now and refer you to some articles.

The natural coding of the basic HTML page should look like this:

  • <html>
  • <head>
  • <title> </title>
  • </head>
  • <body>
  • Hello World!
  • </body>
  • </html>

Note that each different element lies on a different line with the exception of the <body> tag since your entire content naturally falls in between that tag. Your construction of your basic HTML page should normally look like this, it is concise in the manner it is displayed and it is clean where you don’t have to search around for a tag or element.

Even for something so easily misunderstood should have its own category - CSS. By using external style sheets, you have a better overall control of your site, whereas embedding an internal style sheet to every page is tedious, and by changing one, you have to go back and change each and every one, manually. The external style sheet remedies this by using only a file with the extension .css and you can control all your pages’ styles from just one file.
Your basic page setup would then be:

  • <html>
  • <head>
  • <title> </title>
  • <LINK href=”STYLESHEET.css” rel=”stylesheet” type=”text/css”>
  • </head>
  • <body>
  • Hello World!
  • </body>
  • </html>

The <font> tag that defines the styles of the text has been deprecated, meaning it should not be in use anymore, but deprecated tags still are, which doesn’t conform to web standards now. There are better, innovative ways such as using your style sheet to define a text:

  • p
  • {
  • font: normal normal bold 12px arial;
  • /* sets style, sets font variant, sets boldness of, size of text, font family of text */
  • }

Your different headers should be worked the same, except you will be working with tags that were made specifically for specifying headers: <h1>, <h2>, and <h3>. These headers go up to six, but the first three are more commonly used. <h1> is the highest rendition of a header, and obviously, the lower it is, the less it stands on the scale of importance.
Particularly for your Bonjour! header, you could use the tag <h1>:

  • h1
  • {
  • color: green;
  • font-family: ‘Times New Roman’, helvetica, sans-serif;
  • font-size: 24px;
  • }

I would like you to look up upon different ways of rendering styles by using and id=”". By using these two classifications you can control, well, basically, your whole site’s style. They identifiy and classify each element by the same property. For instance, if you want your header to be one header for a couple of pages and another header for another couple of pages, instead of embedding different styles into the tag itself, by using you can order them to be what for what to each header:

  • h1.blue
  • {
  • color: blue;
  • font-family: ‘Times New Roman’, helvetica, sans-serif;
  • font-size: 14px;
  • }
  • h1.green
  • {
  • color: green;
  • font-family: ‘Times New Roman’, helvetica, sans-serif;
  • font-size: 14px;
  • }

For the HTML code:

  • <h1 class=”blue”>bonjour!</h1>
  • <h1 class=”green”>bonjour!</h1>

Note that I used class and not id. Read up on this article to understand the differences when it comes to classes and ids.

For your use of tables, here’s a nice piece of article that is short, sweet and to the point about why not to use tables: Tables vs Divs.

Grammar Corrections

I won’t go into explicit details here because you seem to have a “good enough” knowledge of how to use the English language, but vocabulary and paragraph indications are what I emphasis most.

Pages That Were Not Reviewed

You had a couple of pages that lead out of Raison Detre so I took the liberty to not review them since they weren’t explicitly connected to your collective.

Final Statement

As an overall impression of your site, I feel that it is none too good or too bad. In terms of graphical skills, you don’t seem mediocre but play around with your graphics program, you could do wonders! In terms of your coding, you needed to go back and look up W3 Schools for up-to-date coding standards and a refresher on how to create web pages. For a domain, Raison Detre is informative and it does reflect you, so kudos. On whole, reviewing your site was enjoyable, to say the least, and that I also have gotten some pointers out of it also, as I hope you would from my review. I apologize for the tardiness in this review and I hope you found it helpful.

1 Comment | Tags: Domain

Comments:

  1. Hello!
    Thank you so much for the review. As for the “major change” about the splash page, I never received a notification about you reviewing the website already so I changed some things around; sorry about that though.

    I’ll definitely take your pointers next time I make a layout for my domain. I guess the reason my coding is so outdated is because I’ve been web designing for about 8~9 years and although the natural assumption is that you’d get better and pick up on new things, I just stay in my comfort zone. But I’ll check out the websites you directed me to and try out the coding you recommended.
    As for the external CSS, I actually prefer it where it is because when I update sections of the site, all I need to do is change my header.php file and edit the code there so I don’t see a need for an external file.
    I also meant “logistics” as “the management of the details of an operation” but I can change the header if you still think that’s not fitting. English isn’t my first language so I don’t understand its nuances at times.

    Once again, thank you so much for the review. I’m sorry for the long response (I’m rather long-winded as you can tell from my domain)!

Post Your Comment

About You




Comment