Welcome to <CodeIsLove>: Geek Is Chic, owned by Kitty. The site houses loads of random ramblings, articles, tutorials and tips as well as Classic Blogger-related things.Blog review for runner-up winner
Blogged by: Kitty onLabels: blog review, contest
Just to be clear on this, it was not an easy task to choose which of the blogs deserve to win the second place. All of them have their own strengths and weaknesses and I practically had to go back and forth on my decision. Anyway, after thoroughly reviewing the shortlisted blogs for the second place, I have decided to pick Nurul Nabila of http://gadisbermatacokelat.blogspot.com/ as the second place winner.
Here are the reasons why I chose her blog out of the others:
The blog is written coherently and using proper grammar and spellings. The content in each blog posts are arranged in paragraphs - not too long, nor too short. Good length. Also, the punctuation marks are used correctly.
The blog is updated frequently, which is good because it gives the visitors something fresh and new everytime they come and visit the blog.
Ok, I'm basically done with the short review. The next part will be the overall review of the website. Please take note that the review is based on the following rubrics:
First impressions and site/blog name
Gadisbermatacokelat is unique in itself, however it is not as easy to read due to the name is composed of three different words. It would be better to include hyphens in between those words, Gadis-bermata-cokelat.
At first glance, the blog looks simplistic enough. The design is not complicated and everything seems to be organised nicely.
Navigation
The navigation menu is easy enough to spot. Located on the left side of the blog, visitors will definitely won't miss them. Since the navigation menu links make use of div layer and Javascript, there is no page loading required, hence the hover effect helps to the visitors to know which link they are clicking on. However, the font size for the menu should be enlarged as to make it stand out and allow the visitors to spot them easily.
Aside from the navigation menu, it is also relatively easy to spot the other links on the blog. Again, here the hover effect makes a difference to indicate which one is a hyperlink and which is a normal text.
All the links on the blog are working so good job there.
Layout and design
As stated previously, the design of the layout is close to minimalistic and it is easy to navigate around the blog. The blog is divided into two sections: the content body and the sidebar. The header is simple and does not attract too much attention since the main focus is the content. However, too much space is set aside for the header since the actual header is quite small. This gives the impression of too much white-space, though it is somewhat compensated by the banner on the top of the page. I would suggest the height of the header to be reduced. And I do not quite understand the purpose of the 'slide to fade' effect of the header apart from to give it an animated finish.
There is also a big empty space in the footer section. I am guessing this is due to the advert code placed there, though at the moment (when this review is written) there are no ads visible.
The font for the headings (both in the sidebar and the main body) are too small. While it would be legible enough for people with normal eyesight, this certainly will pose a problem to those with visual problems. I recommend using a larger font for them. Moreover, for headings, it is better to use the heading tags, such as <h1> or <h2> rather than using divs.
Content
Larger font should also be used for the blog posts. The spacing between the lines are too narrow and it makes the paragraphs look somewhat crowded.
The link for the comment is also too small for some people to notice so you could make it larger. The date could also be changed to use the DD-MONTH-YEAR format (14 September 2012) instead of using 14.09.12 since not everyone use this DD-MM-YY format (the Americans for example, use MM-DD-YY format).
On the About page, I would highly suggest you to not include your personal details on your blog. This is for your own safety. By putting your personal details on your blog such as your birth place, school, hometown, etc., you are exposing yourself to danger here. Perhaps due to your young age, you may not be aware but this is how stalkers can find you. Do yourself and your family favour by keeping these details to yourself only.
Linkies page: 'Linkies' is not a word. You can replace this with 'Links' or 'Linkages'.
If you are committed to use English on the blog, do try to use proper grammar. For example: 'Link exchange currently OPEN'
and 'You delete mine, i'll delete you! I always check it now!'
These should be rewritten as, 'Link exchange is currently OPEN' and 'You delete my link, I will delete yours! I always do link checks!'
Other things to take note of:
Chitchat - Chit Chat
Want join? - Want to join?
Helped: colour; picture; - With the help of: NAME OF THE WEBSITE, NAME OF THE WEBSITE
Best view in Google Chrome - Best viewed in Google Chrome
I don't quite follow what you meant by 'No strangers please' because all visitors to your blog whom you do not know or recognise would be strangers. I think what you meant is 'No anonymous visitors please'.
Apart from those above, I also do not encourage the use of custom cursors. The reason for this can be found in my article here:
//This point is based on my personal preference // While I very much dislike background music on websites, at least yours has a stop/pause button, and that is a relief.
Newer and older posts links should be placed in the main body section, preferably at the bottom of the blog entry. Putting them on the sidebar just makes the links out of place and so that visitors won't have to scratch their heads looking for them.
Coding and validation
According to the W3C validation service, you have 40 Errors, 60 warning(s) on your front page, but since the W3C does not support Blogger tags so I am not going to be too anal about this. However I will be pointing out the other major errors that you need to fix.
Unable to Determine Parse Mode!
No DOCTYPE found! Checking with default HTML 4.01 Transitional Document Type.
You have not included a DOCTYPE which is why you get these errors. A doctype is important to allow the browser to detect what tyrepe of HTML you are using on your blog which will help the browser to display the page accordingly.
document type does not allow element "CENTER" here
You should not put divs and/or even <center> tags within the head section. This is not the place to put them. You should place them in the <body> section instead.
For every img tags, there must be the alt attribute included. This is to allow people who have chosen to disable the Show image option in their browsers to know what are the images that are in there.
For script tags, the type of the script must be declared. Yours is like this:
<script language=JavaScript> while it is supposed to be <script language="JavaScript" type="text/Javascript">
Here is a common overlooked error: end tag for element "BR" which is not open
</br> should be rewritten as <br />
And according to the W3C CSS validation service, you have 35 errors but since most of the errors are due to the specifications have not been included by W3C so no need to fret here. But just like the HTML validator, I will go through the main errors.
.header Value Error : padding-top -25.0 negative values are not allowed : -25px
There is no such thing as negative values for padding. You might want to use margins instead.
#leftcontent Property _margin-top doesn't exist : 30px
This is probably due to typing error; _margin-top should be margin-top
Browser compatibility
Your web page is compatible across different resolutions above 1024x600 as well as on different major browsers (Chrome, Safari, Firefox, Opera) so congratulations on that.
Comments and suggestions
As noted above, your spelling/grammar need to be polished up a bit but this is not a major problem, considering English is not your first language. However, do take note on the other areas such as font sizes and your personal details. Slight changes should be done to the header height and also the coding errors.
I also highly suggest you to change the target links for the Newer and Older posts links since I do not think your visitors will appreciate having multiple tabs opened in their browsers just to read your older/newer posts.
Blog review: TwinkleTwinkleToess
Blogged by: Kitty onLabels: blog review
Site name: TwinkleTwinkleToess
Site owner: Eryn
Review completed on: June 12, 2012
First impressions and site name
The name is nice however it is not as easy to remember. It would be better to insert a hyphen in between the twinkletwinkle as having two of the same word together can be rather confusing to the visitors.
The layout looks minimalistic and well-presented. It is not cluttered and is pleasing to the eyes.
Navigation
The location of your main menu links is obvious enough. They sit at the top center of the page and there's no problem locating them. However, you might want to increase the font size of the links since not everyone can read small letters.
All the links on the website are working fine so congratulations on that.
Layout and design
I'm not going to comment much on the layout and design since it was not created by you. As stated before, the layout looks well-presented and not cluttered. However there is a certain part about the design that needs to be taken note of. I will explain this under the browser compatibility section.
Content
The spacing between the lines are nicely spaced and it makes the paragraphs easier to read. And it is nice to see you punctuate your paragraphs with photographs as it gives the readers something to see other than chunks of texts.
The font size for the 'Posted on', 'affiliates', 'banner exchange', etc. is too small. Also, when I hover over the link for 'lovely comments', the font colour changes to a darker colour and blends with the black background thus I can't almost see the link. You may want to change the colour for the hover effect.
Profiles page
There are a few grammatical mistakes that can be overlooked so there's no big problem there.
You might want to change the font colour of 'Likes', 'Dislikes' and 'Favorite colors' since it is too bright against the light background.
faq should be re-written as 'F.A.Q.' since faq is not a word on its own.
Site page
I really like how you came up with the name of your website. Twinkle toes, catchy. Though I don't quite follow what is meant by 'Admitted on: March 2012'. Does it refer to the date when the blog is opened/created?
Wow you have a lot of things in your wishlist. I hope you'll be able to get most, if not all, of them.
In the credits section, proper crediting should be done, i.e. the names of the person/website should be stated clearly and not just referred to as 'x' because no one likes to be referred to as 'x'. It should be something like this: Layout by 'name of person or website here'.
Coding and validation
I'm not going to spent too long on this part since W3C doesn't actually validate Blogger tags. So I'm just going to skip through the validation comments on Blogger tags and focus on the other validation comments.
A quick look at your source code reveals that you do not have a correct coding structure. You do not have the doctype, character encoding, <HTML> and <body>. A correct, basic web page structure should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
Full details on this type of doctype can be found here on W3 website. Most of the errors are caused by the absence of the doctype declaration and this can be reduced had you included the doctype.
The id="box" appears multiple times. The usage of the id selector with an element limits it to once only, and if you want to use the element multiple times, it is better to use the class selector instead.
Your images do not have the "alt" alttribute specified. "alt" attribute is required for 'img' element because it will help your visitors to recognise what the image is about in the case if the images do not load up properly. So the line for img should be like this:
<img src="the link for image of a cat here" alt="my cat" />
You should have not used <textarea> to display your link back codes, or any codes for that matter. <textarea>s are for inputting texts. Instead, you should use <pre> or <code>.
There're about 24 errors and 20 warnings in your stylesheet, but most of them are due to W3C having not yet included a lot of the CSS3 hacks into their specification so nothing to fret here. But I'm just going to point out a few things here.
There's no value justify for height. So height: justify does not exist.
The text-transform property does not have normal as its value. The only values that text-transform can have are none, capitalize, uppercase, lowercase, inherit.
The same applies to text-decoration. The only values that it can have are none, underline, overline, line-through, blink, inherit.
You also get this warning: "Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space."
This refers to font-names that consist of more than one word. For example, Trebuchet MS. Every time you use a font that have more than one word, you must add quotation marks before and after the font name, like this:
font-family: "Trebuchet MS";
or
font-family: "Trebuchet MS", Arial, Verdana;
Browser compatibility
Congratulations, your layout looks about the same in the latest versions of major web browsers (Chrome, Firefox, Opera, Safari and Internet Explorer 8) as well as in screen resolutions 1280x800. However, in screen resolutions 1152x864 and below, the sidebar on the left seems to be overlapping with the main content thus some parts of the blog entry are blocked. Here's a screenshot of it:
Also, with 800x600 screens, your page has a horizontal scrolling. This is because your layout is positioned as fixed.
Errors
You will need to capitalise the words where appropriate, such as names and when starting a new sentence after a fullstop.
And also, work on the grammars. You can mix English and Malay together in your entry but do try to make sure the grammars are correct.
Comments (and suggestions)
You'd only need to remember to capitalise the first letter in every sentence and also for names as well as making the font-size slightly bigger. You would also have to work on the coding structure.
