A bit of backstory: Ashley sent out an e-mail t’other morning to all of those who’d been waiting for a review at Timebomb Reviews announcing the re-opening of the site. (A counter-flounce?) I’m not sure what she set out to achieve by copying me in but it gave me the opportunity to offer those from the queue a real review. You know, one completed by someone who knows what they’re talking about. In light of that, this is one of a few requested reviews that will be completed over the coming weeks.
When I think of “mommy bloggers”, I think of knitting, maybe some cooking, a bit of parenting humour… something along those lines. It’s a stereotype, of course. I can tell right from the off, however, that this is not going to be a stereotypical mommy blog.
Gemini-Diva.com is very… loud. The mixture of a busy background pattern with an overly large top banner (both in physical size and area) is quite distracting and it’s hard to focus on a specific area. On top of that, the pattern doesn’t seem to line up which means I find my eyes darting along the little lines that are created as the image repeats.
Although I try to make it clear that I’m not a designer, and I’m not as “into” design as I am code, I like to follow some principles when it comes to my own web page layouts. Firstly, I aim to create a graphical focal point no taller than 150 pixels or thereabouts. Even discounting the additional parts of the top image used for background, your header is over double that. Secondly, I keep the background muted if the design is detailed (and vice versa: a busy background for a “light” layout) which I find is easier on the eyes.
The header image is very heavy on the left but offers little or no aesthetic value on the right. I’m sure with a few appropriate brushes, or by moving the domain name text to the right you could better use the space you have. The other option would be to ditch the header altogether; the busty babe isn’t doing anything for the layout and although it goes some way to destroying that stereotype I talked about earlier, that’s not necessarily a good thing.
Because the layout is “faux-centered”, your entire site sits off to the left in a 1280px wide resolution, also creating an ugly horizontal background repeat on the right. I’ll go into detail on how to fix all of this when I get to your coding.
To maximise page views on any website, it is important that links are visually distinguished from normal text. It ties in with usability, and making it as easy as possible for a user to navigate. In your case, I’m struggling because the links are not only very similar in colour to the text, but are also identical to normal bold text. As your colour scheme is almost monochromatic, I would suggest using something other than text colour to identify links, such as an underline or even a background highlight (give the links a lighter colour background than the content area).
As your site is a blog it’s pretty much a given that most of your content would originate on the front page of the website. Bearing this in mind, it came a bit of a surprise that you’re only displaying two posts and one of which is taking up 90% of the front page. There are two reasons why I like to include at least 4-5 posts on the front page: 1) prolonged exposure to Google and other search engine bots, which maximises the attention individual posts are receiving and increases the chances of them inheriting PageRank from your index, and 2) visitors are able to see a broader range of your writing and the kind of topics you’re going to cover on your website; this has the added bonus of intriguing the visitor into clicking deeper into your site. Theoretically.
Your current top blog is, as I said, taking up 90% of the page. Although it was considerate of you to leave an “image heavy” warning, by the time I’ve seen that my page is already chugging along at snails pace trying to pull in all those photos. On top of the 230+KB banner you’re not doing anyone any favours! For larger/bulkier posts, I would recommend using the WordPress “more” tag (<!--more->) to split up your post. That way, you can get more on page, speed up loading and give people reason to click deeper into the post.
There are a few wording errors on your About Me page, but otherwise it offers a decent combination of lists for the lazy, and a longer autobiography for the brave. I’d recommend fixing “I was told to weigh about 5 pounds, 5 ounces
” to “I was told I weighed about 5 pounds, 5 ounces” or simply “My birth weight was 5 pounds, 5 ounces”. “As a child I was quiet and rather shy but at times I was evil, mean, and outspoken when need be.
” is one big contradiction, but I’m at a loss as to how you’d word that more appropriately. “me and my husband
” should be “my husband and I”, and “we still love each other very much and our marriage is stronger
” needs expanding to clarify why your marriage is stronger, or what point in time it is stronger in comparison to. “His Children
” should be “My husband’s children”
While your Contact page seems self-explanatory to me, you do seem to have a series of “dos/don’ts” for your visitor. I have no underlying problem with this as I specify things I will not respond to on my own contact page, but I feel that the hostility towards readers is misdirected. If you’re had problems with hate mail or other correspondence of that nature through your form, deal with it off-site and don’t let unsuspecting/undeserving visitors bear the brunt of your annoyance. For the record, my favoured response to hate mail is the delete button… it works wonders!
The Debate section has no title on the page (unlike your About Me page which has exactly that at the top) and I’m struggling to see the point of it. At first I thought it was some sort of interactive opinion swapping page with functionality that my JavaScript blocker was perhaps not letting through, but I enabled all JavaScript and I still saw nothing. It’s simply a page in which you’re inciting people to argue but which you’ve cunningly titled “Debate”; whatever it is you’re trying to achieve I’m not sure it’s working.
Your Disclosure policy is both contradictory to itself and to your sidebar. It states “This blog does not accept any form of advertising, sponsorship, or paid insertions.
” and yet the next paragraph talks about compensation received influencing topics or content. The next paragraph then reiterates the first, stating “The owner(s) of this blog is not compensated to provide opinion on products, services, websites and various other topics.
“. Your sidebar states “This blog will at times receive money or products for blogging or advertising
“. I think you need to make up your mind whether or not you’re offering advertising/paid content and stick to a single stance. If you decide you’re not going to offer any services for financial gain, there’s little point in even having a disclosure policy.
I do not find your celebrity blends particularly attractive in the For You section, but I’m sure that’s simply based on my opinion of work derived from work potentially protected by copyright law. I’m sure you’re well aware of the implications of using other people’s art and photography but if not I have an article on copyright violation which should do just the trick.
I would recommend using an actual thumbnail instead of a resized image for your Past Layout on The Site section to dramatically improve loading time.
Your coding is somewhat mediocre and I’m not surprised my toolbar is flagging over 60 HTML errors on your home page alone, but you seem to have actually integrated your theme into WordPress instead of relying on premades and dodgy include hacks which is a step in itself.
Whilst looking through your code I found that most of your structure seems to be positioned “absolute”, which means a static position on page irrelevant of the browser size/resolution. While this is often handy for pixel precision, I believe you’re trying to replicate a centered layout and this is always more effective — and cross-resolution compatible — using the centering cheat. Simply ditch the absolute positioning, create a tableless layout with floats and then use the ‘cheat’ I linked to get everything dead center.
Re-creating your layout with floats would also give you the freedom to crop down your header into the layout image it should be, removing the background pattern which surrounds it on the left and right and the brown column shapes underneath. You can add the layout image to the #header div detailed in the tableless layout tutorial, and put the background pattern — stripped of unnecessary brown columns too — as a body background exactly as it should be. With no superfluous patterning on the header image to get in the way, you’ll have no problems with it lining up. After all that, the brown background could easily be re-added using background-color instead of an image, yet another tip for reducing load time.
Your pages need a doctype, this should go above all other code/comments in your theme header file; in fact, WordPress carries on by default so I’m not sure why this is missing. Your meta author/description/robots tags have no closing forward slash at the end but the rest of the tags do, so in the interest of saving time I’d recommend adding the slash to those rather than attempting to de-XHTML WordPress. The theme stylesheet <link /> should start with a lowercase “l”. You also have two <body> tags when one is sufficient.
Most of your images are missing alt attributes (see my notes on alt at tutorialtastic). Your headers seemed to be marked up as <div class="storytitle"> but in the name of semantics, headers should should be marked up with header tags and then stylised with CSS to integrate with your theme.
In your sidebar, your navigational, archive and meta links are missing the <ul> before and </ul> after, and I’m not sure why blocks of text are in <div>s instead of paragraph tags (again, syntax semantics). If you’re able to edit the JavaScript that includes your twitter info, &count=5 should be &count=5
You seem to have a stray </tr> and </td> in your footer, neither of which are needed.
You have several “pt” font sizes in your stylesheet, when px, em or % would be more appropriate, and the scrollbar colouring is pointless and invalid. Several bits of code are totally redundant, and would be better off removed altogether. Example:
border:0px solid #D0D0D0; border-left-width:0px; border-right-width:0px; border-top-width:0px; border-bottom-width:0px;
..where you’re defining a border as 0px (therefore non-existent) in the first line, and yet still you go on to declare 0px widths for each individual side. A simple border: 0; would suffice, or nothing at all in the case of box1 as by default a div is borderless.
You re-assign fonts to several different items, but this is unnecessary as the cascade (that’s the C in CSS) means most tags inherit whatever font is set in body { } anyway. Declare it once and then leave it for optimum space/bandwidth savings. You might be interested in my as-of-yet unfinished Shortening CSS guide to get rid of any padding properties that don’t need to be there.
All in all your website is usable, and I’ve seen many that are much worse both in terms of content and coding. However, you seem to have some negative history that is affecting the underlying message that is going out to your undeserving visitors which is what breaks that motherly stereotype I mentioned right at the start. While you might not want to look like a little mother hen clucking over her chicks, it’s very obvious that you involve yourself in your kids lives and care about them, so use that as incentive to bring your blog into a “happier place”.
While some of my coding advice might seem like a real overhaul, you did suggest that you may learn from one of my reviews and I think if you’re willing to put in the effort and do the necessary reading and research there’s no reason why you won’t. Ditch the ‘tude and work on what you’ve got to go forward with a better site overall.
15 Apr at 9:47 pm
I love your writing, and as I read this, I realize how many problems my own coding has.
…if only I could come up with the time to finally fix them.
15 Apr at 10:09 pm
^ Agreed. It’s not just voyeuristic reading your reviews—at least that’s what I tell myself—I now have to go crop all my headers down a bit.
15 Apr at 10:17 pm
Great review. I even used some of your handy tips for my site :D.
15 Apr at 11:27 pm
Yay my first review. Thanks Jem, I really want to improve my coding and my site all together. I am going to take your advice and try my hardest to work on my site and coding, thanks so much this was a great review. :)
16 Apr at 12:45 am
I love reading your reviews, Jem! (even if it confuses me. xD) I also use the handy tips for my site, just like Annie. :)
16 Apr at 3:56 am
A very good review, I made some notes for my future layout (which I should really start making) – in regards to the blog posts displayed per page.
By the way, what do you mean by “copying me” in reference to Ashley? In what way did she copy (or intend to copy) you? I’m a bit confused there.
16 Apr at 7:56 am
@Vera: I said ‘copying me in’, as in.. including me in the email.
16 Apr at 1:09 pm
Crikey that’s bright! Good review as always Jem :)
16 Apr at 3:44 pm
I love when people get reviewed by you, come back here and say, “Thanks Jem.” It’s so refreshing to know there are some people out there who can handle constructive criticism as opposed to, “Oh noes too much drama must close site down!”
16 Apr at 4:46 pm
“Me and my husband” might be correct depending on whether the sentence calls for direct/indirect objects.
16 Apr at 6:04 pm
I also wanted to say thanks for pointing about a few things. I had been so busy I didn’t notice that the comment form for the debate was gone. I have to fix that so again I say thank you and you have been very helpful. :)
16 Apr at 7:21 pm
I always love your reviews. And it’s really cool to go there and see she’s followed some of your advise.Though… it’s always funnier when they are blatantly stupid… LOLZ.
16 Apr at 8:05 pm
I was a bit surprised by the “South Beach” woman on her header, and then seeing that she was a mommy. o_0
16 Apr at 11:28 pm
I also was surprised at the buxom babe on the website, after you stated it was a “mommy blog.”
17 Apr at 3:12 pm
I second that! And it’s way to red for my liking.
18 Apr at 12:53 am
Your reviews are some of the best and most thorough I’ve ever seen.
You’d think that “mommy” comes with all sorts of connotations/stereotypes, but these days it’s not unusual to find them showing interest pop-culture just as many other people are.
18 Apr at 12:04 pm
[…] anyone is interested in reading the review you can do so Here sorry I am so late but like I said I was busy and […]
18 Apr at 12:52 pm
I knew the background looked familiar…
http://tinyurl.com/46n34o
18 Apr at 1:00 pm
@Ajemi: I’m not sure what your point is – there are tons of “web 2.0” logos that use identical 3-corner-rounded squares and I doubt they’re all trying to copy each other.
23 Jun at 7:01 am
Two months late, but I’ll still comment.
I usually make my banners around 300px in height, but I’m not big on using brushes, so I’d probably do better with 150px layout banners. I’ll probably try it more often.
For the childhood personality part, she could probably say, ” While I was generally a shy and quiet child, I had moments where I became outspoken and mean.”
The adjective order just sounded better to me (‘shy and quiet’, rather than ‘quiet and rather shy’). The structure is the main part.
Thinking of the alt attribute, is it better to use that or the title attribute? At first, when I loved IE, I always used alt but once I switched over to Firefox, the alt attribute didn’t seem to work anymore.