Fyneworks (stage 2)

Before I can focus purely on the content I'd like to have a 2nd round of critique from your guys. I received some very good feedback a few weeks ago and I'm itching to find out whether I'll pass the Webforumz Test of Fire this time round.

I've said it before but I'll say it again:
The pages are empty of content, but all the page URLs, titles, descriptions, headings, keywords and 'what have you's are complete - pending critique and subsequent modifications.

The portfolio:
At the moment I'm using a lightbox effect to display an image of the website, but this is temporary. The intention is to have a full page with details of the work carried out on each project, then a few images... so, clicking on a thumbnail on the frontpage will take you to project details in the future.

Attached Images

fyneworks-com.png (217.6 KB, 29 views)

I like it Clean, simple...and pink. It feels fresh and direct. The text you've used (well, images thereof) sets a friendly, approachable tone, and you've used it consistently.

The footer design is particularly good. I like the way it fades into nothing. The "recipe" bar is central to your design, and works well.

I'm not sure about the logo. On the one hand, it maintains the "jolly font" theme, but it also has some cheap-looking bevelling; perhaps it would be better as flat colour, possibly with an outer stroke as well. I'm also not too keen on the giant faded "fw" letters: they look washed-out.

Making a favicon is a nice touch. I prefer your favicon to your logo.

I don't understand the purpose of your "Professional web design London" hover-box in the top right corner. What's the point of that information? It looks like the content of <meta> tags. Why is the user supposed to see it? This feels like an effect used for its own sake.

The three top nav links (Homepage, Portfolio, Contact) are attractive, but they disappear completely when you disable images. Where's the alt text?

Actually, the problem is much more widespread. Try selecting "replace images with alt attributes" in Firefox Webdev. Almost your entire page disappears.

Now onto the code. Good job for writing valid XHTML Transitional! On the other hand, this seems an odd Doctype to choose; why not use a Strict Doctype?

Your CSS does not pass validation. It appears that you are using some proprietary CSS attributes, such as -moz-border-radius. Personally I don't like this: it goes against the principle of standards-based design. It's no better than using Internet Explorer's proprietary stuff -- just because we all like Mozilla doesn't make using its proprietary extensions more respectable.

You appear to have contracted a bout of divitis, a common infection for web designers recovering from table layouts. It's hard to diagnose for sure, but ask yourself whether you need eight levels of nested divs.

Your use of headings seems a little cynically SEO-oriented. The document outline suggests a structure that is not mirrored in the visible page. I think you're using the headings purely for SEO.

You seem to be hiding your <h2>s completely: they exist in the source code, but I can't see them on the page. I guess this is because you wanted to stuff some more (weighted) keywords into the content, even though you didn't actually want more headings.

Similarly, your <h1> has been assigned ridiculously low visual weighting. And now I think I understand the purpose of that hover-box: it's an attempt to legitimise cloaked keyword-stuffing. You don't want your visitors to actually see it, but you do want to serve up your keyword-stuffing to search engines. You're hoping that, because the content can (strictly speaking) be seen, you won't be penalised for cloaking. Are you sure you want to tread this path? Are you sure you're smarter than Google?

Google's webmaster guidelines are unequivocal on this:

In my opinion, you're taking the first step on a slippery slope down to black-hat SEO and designing your pages for search engines, not users. If you get good results and you're happy with it, no problem. But it leaves a bad taste in my mouth; it's not something I would feel comfortable doing.

Of course, I might have got the wrong end of the stick here. I apologise if I've unfairly accused you.

Bottom line:

• Good design
• Good code, but could be better
• Accessibility problem: use alt text
• Questionable SEO tactics

Hi Mike,

Thanks for taking the time to analyse the website in such detail. I really appreciate it. I thought you'd have a few things to say but this is great stuff...

The Logo:
I personally don't like your suggestion, but I've put it on the website so I can explain why. Without the bevelling it seems, how can I put it, 'lifeless'. It's all a bit too 'flat' and I don't think it fits in with the rest of the design, specially the 'recipe bar' on the middle on the template. And I think the bevelling works well there... What do you think?

Favicon:
The favicon was my old logo (I've updated it). The old theme was very plain and simple. The feedback I got was that it was too plain and simple. I was using a very basic colour theme and clean fonts. I agree with you, I personally preferred the old theme, but I have to keep in mind what 'most people' will find attractive and the new theme has worked so far so I'll keep it...

The three top nav links (Homepage, Portfolio, Contact)
What do you mean by 'disappear'? They fade out, and I understand they will seem 'more faded out' in some screens than others, but you should still be able to see it.

Alt texts
The only images on the entire website, at the moment, are the portofolio screen-shots. Everything else you see are background images so I can't have 'alt texts' as such. That said, I take your point and I've added 'title' to all links that are replaced by a background image.

why not use a Strict Doctype?
Can't argue with that. Just a little laziness I guess. I have so many websites and a lot of code already written in xHTML transitional. It would take me a whole weekend to check everything so I keep putting it off (as I know it's not essential). I'll get there eventually...

CSS does not pass validation
We had a discussion about this not long ago. I had enough of using javascript to programmatically insert CSS that works but doesn't validate. I am a true follower of code validation, specially markup. We valid our html to make sure it works for every user. Browsers ignore CSS statement they don't recognize a carry on parsing the CSS. Nothing breaks, nothing stops working. Why should your user suffer (ie.: be forced to download extra code and rely on javascript) just so that I can feel good about the fact all browsers accept every statement in my CSS? Do you see my point?

About divitis
LOL, I can guarantee I don't have that condition, but it's really funny, thanks for that! I am aware of a couple of useless layers at the moment (eg.: .body-wrap around #body) and I'll be getting rid of them when I'm fixed on the design.
Also, someone is also very kind to point out that this div tag (just after body)...
<div id="Frontpage0" class="PageWrapper FF ClsFrontpage Frontpage FP NotPrintable NotHighCon NotTextOnly">
...is useless. But it is key to the workings of my CMS.

My use of headings
My H1 tags are SEO'd to the max. No doubt about it (and no shame either).
On the frontpage, the H2s are replaced by graphics to fit in with the theme.
On the other pages, one H2 is the title of the document (ie, 'Quality Websites' here)
The other H2 is hidden because it's the menu heading. I suppose I can ditch this one, but I wanted it there because it makes sense when you read the website with CSS disabled.

Now for the big one...
The H1 and hover box:
Don't apologise. I asked for a critique. And that's because I wanted issues like this to be raised. By impartial observers...

Right, The reasons for the small H1 and the hover effect were:
1. I want SEO'd H1 tags, not necessarily in the most friendly or marketing friendly format, but that logically describe the content.
2. As a document, I want each page to include a concise and keyword rich description of the content at the very top of the page.
I put the those together and I thought of a simple idea: Show the H1 and put the description in a tooltip. Reasons for it:
1. Web-users are well used to this type of functionality/effect
2. It is un-obstrusive and I wouldn't have done it it I couldn't see anyone finding it useful.
3. I'm 100% confident that visitors who work out how to use it (I'm not imposing it on anyone) will find the tooltip to be a handy tool on each page. It may not seem so helpful because it's fairly simple to work out what they're all about. But on deeper pages, I think the description will be very, very handy...
I'm actually thinking about expanding the tooltip and providing 'see also' links or something like that...

Now for the key question: Would I do this if search engines didn't exist?
Yes. Obviously not in the exact same way, but yes.
Other key questions would be:
Have I done this before? Yes.
Did it work? Yes.
Any drawbacks (from users or SEs)? None what-so-ever.

Once again, thanks for your critique... Look forward to your reply

I see you've changed the logo (at least temporarily). I much prefer the new one; other people might have completely the opposite judgement. I think bevelling tends to work best when you have straight, angular text (rather than curvy text).

If you can spare the space, the logo may look better with a margin at the top. At the moment, its right up against the page border.

By disappear, I mean become invisible. They are still there to be clicked on, but I can't see anything. The link titles appear on hover, but there's no way to tell they exist beforehand.

Since these images are content, not decoration, you might consider making them <img> tags in the HTML, rather than background images in the CSS. Then you could use alt text.

Note that title should not be used as a substitute for alt. They are different.

Try disabling images in your browser. You'll see the problem (it's not just those three items).


As you say, it's not essential -- just a good option for the future, whenever you're ready. I don't think it's worth "porting" any of your existing sites to Strict: just use Strict for the new stuff.

Yes, your point makes perfect sense. Hiding invalid code from the validator using javascript is just silly. Personally I wouldn't use invalid code in the first place (except as served exclusively to IE, when it breaks. Pandering to IE is a necessary evil, but at least we have conditional comments). And if I thought my javascript might be generating invalid code, I'd check the generated source against the validator.

Yes, I thought you were a borderline case -- it's almost impossible to know whether the divs are necessary unless I designed the website myself.

But it is a funny name The corresponding inline affliction is span mania.
I won't go through your argument -- suffice to say that it seems a little slippery to me -- but these lines are the really important ones. You've done it before, it worked for you, and you haven't experienced any problems. That's justification enough (though not enough to make me want to copy you).

Besides, it is a cool effect

I'm not sure mate... I've taking in what you said about the bevelling, but I'm looking for another way (one that doesn't look crap) to 'funk it up' a little. It just seems so plain and doesn't seem to fit in with the rest of the 'cool' design... I'll let you know what I can come up with...

Done!

damn it. What browser/OS are you using? I've tested the site on IE6/&, FF2 and Safari on WindowsXP and everything seems fine...

I strongly disagree. Those images are all being used for decoration. They're not conveying any information that can't be presented or isn't presented as text. My rule of thumb is to navigate the website with CSS off. No information is missing, so we're goo.

1. Nowhere as good for SEO, 2. The document wouldn't downgrade as gracefully as it does now. Near perfect printer-ready documents...

I know, I used title because those images are the background of links (a tags).

I see what happens when you disable the images, but unfortunatelly I'm willing to make the sacrifice in the name of SEO. I'm running under the assumption that the images will be downloaded.
PS.: They're all PNGs at the moment, very large. I'll compress and export them to GIFs when I'm done and minimize download times.

I know, you're right... I will try to force myself into changing... lol. The problem is, if I change one site I'd have to change all because they all share my CMS... That's why I keep putting it off... but I'll use strict markup on any smaller projects from now on...

I completely understand and would approach it the same way if I were in your position. But if it's any consolation, I first used this techinique (small H1) under the supervision of our admin Rob, SEO Guru and master of the known SEO universe - well, he's not that good but he's got a lotta experience :P

Once again Mike, I really appreciate you taking your time to raise these issues with me. You've been a great help...

PS.:
I'm not trying to brainwash you and I'm not preaching, but check this out...
This page is 3rd on a Google search for SEO Expert London.
Those pages have been up for 2 only weeks, and don't even have a considerable amount of content yet. But, the amount of time I spend getting the headings/keywords/descriptions right are already paying off...

Changed the logo again. I had a ripple effect bevel, which looked quite messy (it was intentional). Now I'm using a smooth bevel, probably the best of both worlds. How's that looking now?
See a screen-shot of the original logo.

Aha! Another logo variation. That one is good too -- a little less plain, but still "clean". My favourite so far

This can also be handled by a print stylesheet, but that doesn't address your other two concerns.

PNGcrush is one good option.

EEK! That does sound like a big disincentive to move to Strict.

That is actually pretty impressive, considering there are over 1 million search results

Take out these two worthless lines on homepage:
Definitely too much going on with fonts. I'd say get rid of the fonts you use for "view more" and thumbnail heads, and replace it with that nice neat sans serif in the logo. Some of it appears to be a matter of sizing & weight, which can completely change the appearance of a font family. You're doing so much with fonts -- asking people to read that signature font is a lot -- you really need to cut down not just on font families, but on size/weight/color variations.

Is that for technical reasons, appearance or user-friendliness? Does it look crowded?
I 'm ok with removing the second line, but if I also revome the heading 'the recipe for a really good website' the menu won't make any sense.

The font on the logo isn't sans serif, it's some other handwritting font which I can only use in graphics, not directly on the page (ie.: it may not be available to the user.
I agree that there;s too much going on with the fonts. My intention was to have the cool font for logo/navigation only. Everything else should be Verdana/Arial.

Fine. I'll stick to the font on the logo and verdana on everything else. (and I'll get rid of the view more link, I think it looks out of place...)

Thanks for the feedback!

I actually like the font/color variation on this site. Usually I don't like mixing, but I think it works well here. I'll probably have time for a more in-depth critique later (I've been so dang busy these past few weeks). I too dislike the logo. I think it would look much better if you took out the giant fw in the background. Apart from that, I don't mind the colors or the font. You could probably spend some time to clean up the bevel a little bit, though.

Also, by taking out the huge fw, the content will be further up. It just looks funny as it is.

Mason:
I've made the changes you suggested. Check it out.

Mike:
YAY!
One being that if the images fail to display, the user can't see the links....
But what's the second?
TA. I'll see how good this is. If it's almost as good as GIF compression I might as well leave them all as PNGs.
Thank you. 'SEO expert London' is actually going to be my main target keyphrase. Breaking into 'web design london' , 'professional web design' and pretty much anything 'web design' will be very tough...

Ryan:
I do too, which is why I did it. It will probably make more sense when I follow the colour scheme into different sections... (only subtle details)

Ok, none of you guys seem to like the huge FW, so let me tell you my reason and maybe you'll be able to suggest a better alternative.
I wanted something striking, something to make an impact and make people remember the website. If I was a good graphic designer I'd make a cool little cartoon or something, but the big faded FW background was the best I could think of... Any suggestions?

Thank you all for replying!

PS.: I forgot to say this before, but I will be using the white space to the right of the logo, to show 1 or 2 marketing links or a little banner - which btw Mike, will be an actual image