New site - feedback please

[James]

Hi

A friend has asked me to build him a website for his small internal communications business.

He hopes the site will be found by search engines for those looking for an internal communications specialist. I haven't really addressed SEO yet, just done a few metatags and H1 title.

Diaz Brothers (http://www.diazbros.co.uk/)

I am happy that it works in IE and Mozilla, but it looks a bit boring. I would really appreciate suggestions on how to make it more visually appealing.

Incidentally, the site I was told to base it on is http://www.evisu.com/. My friend liked this site but I don't know why - I think he liked the navigation at the top.

Cheers.

[francis]

It looks really bleak - just a flat background colour and text. Some graphics would really help or maybe junk the background colour and go for something with more "umph" (like David's Parliament School site (http://www.curiousfish.co.uk/phs/)). You need something that doesn't scream "dull efficiency" but rather "we can come to the table with some cool ideas that will really help the flow communication within your organisation. We aren't a staid company".

You could go for the usual royalty free image of a smart, happy, energised person in a crisply ironed shirt, but those images cost $$, and as this is for a business, it's probably best to buy them rather than "acquiring" them.

Are there any better examples that your friend could put together? Are there any mockups available - any pictures of roadshows they've put together, or something that they can put in that will add some graphics? Hopefully they aren't all covered by NDAs. Also, how about a client list? I know there's a "recently completed projects" bit, but if there was more provenance then it would, IMHO, be better. I wouldn't want to spend money without some idea of the size of projects/companies that have been dealt with in the past.

Boring techie things:

Now, I know that I'm more aware of this than others, but the colour scheme and design of the nav bar screams "blue robot". Blue robot has been around for many years now and IT/web people will probably know it.



text</p> should be <h2>text</h2> on http://www.diazbros.co.uk/content/services.html - but I realise it's not finished.

[James]

Thanks for the feedback Francis, I agree with you, it's dull and uninspiring. I see this as stage one - all the content I have been given is in place - now to make it look great (delight?!).

Will change to <H2> from [b] - but why is this important?

Blue Robot - yes it is from there but then again, it's mentioned in the source code so it wasn't hard to work out. The site's not aimed at techies so I have no problem in using the much-used Blue Robot as a start point for layout.

Cheers,

[francis]

The <h2> is important as it carries on the same structure as <h1>. <Hn> tags weren't invented for SEO, there were put there to provide structure for documents, thus:

<h1>My page on cats</h1>
This is my page on cats
<h2>Domestic cats</h2>
Introductory text on domestic cats
<h3>Tabby cats</h3>
blah blah blah
<h3>Tortoise-shell cats</h3>
blah blah blah
<h2>Big cats</h2>
Introductory text on big cats
<h3>Lions</h3>
blah blah blah
<h3>Tigers</h3>
blah blah blah


Imagine if the stylesheet didn't load - it would be difficult to work out what was a heading and what wasn't. I believe that some speach browsers can pick out document structure like this. Additionally, strong (http://www.w3.org/TR/html401/struct/text.html#edef-STRONG) is meant to emphasise text as opposed to just making it bold. I usually think of it like this:

: no meaning at all, it just makes the text bold. To be used when you just want bold text. No different than <span style="bold">blah blah</span>
[b]: this text is very important. The equivalent of shouting.

[i]: no meaning at all, just makes the text italic. To be used when you just want italic text. The equivalent of <span style="italic">blah blah</span>.
[i]: This text needs emphasising. It's not as important as [b], but it is important. The equivalent of talking in a raised voice.

But that doesn't mean that you should use

[b]blah blah</p> instead! If you use <Hn> tags, it's also a whole load easier to style. Assuming you want the same colour for each one:


h1, h2, h3, h4, h5, h6{
color:red;
}


<h2>blah blah</h2> is also less code, therefore bandwidth.

[James]

I've made some changes - I was specifically asked to avoid cheesy "man in ironed shirt catalogue pose" images.

Again, feedback greatly appreciated.

Francis, the code validates in Dreamweaver and renders perfectly in IE and Mozilla. However I confess to using DW's "layers" - do you object to this?

Cheers

Diaz Brothers (http://www.diazbros.co.uk)

[David]

It's a big improvement on the last version. All my comments refer to the left-hand column:

The "DIAZ" logo is good but the way you have positioned it looks rather contrived - exactly 45 degrees and with corners just touching the border. You could free up the whole feeling of the placement if you made it look as though it was a card that had been thrown down. Rotate maybe 30 degrees and handle corners differently - maybe one inside the frame and one outside the frame. You'll need to play around in Photoshop to get it just right.

The "inform, engage, change" watermark is a nice idea but its placement makes it look like a subtle left-hand nav bar. Don't be afraid to overlap text. I would increase the text size and have it run underneath the body text. This introduces "tension" into the design and that makes it more interesting.

[francis]

I'd go with David's comments - the logo is better but needs some playing with. Photoshop, CTRL+T to bring up the transform handles then play around with it.Also try CTRL + T then hold down SHIFT+ALT+CTRL as you transform it - you can start skewing it all over the place. Maybe a tiny bevel and subtle dropshadow as well?

Using DW's layers is okay, depending on what you want. I've read reports that things can start to go wrong if you/your users with poor eyesite increase the text size. In fact, you can actually see it working on the Diaz site if you take the text up to 150% or above. It's difficult to tell in IE as you can only go large > larger with no idea of how it scales (it it 150%, 140%, more, less?). Moz at 150% and above ruins the page. Opera makes a reasonable job of it and, because it's Opera and it's a great browser, it even scales your logo. BUT because DW puts in a width for your <divs> things start go go wrong again. IE and Moz wrap text onto the next line and Opera allows content to flow out of the div, and as your banner text is the same colour as your page background, your company name becomes "Diaz Brothers Internal Commu". I don't know why I'm writing this on a Saturday night, but:

<div id="Layer2" style="position:absolute; width:575px; height:56px; z-index:2; left: 173px; top: 9px;">

position absolute - the div will always be there. If it's not nested in another positioned <div>, content can and will flow over this. Width and height: these are (not in IE) the absolute, complete, non-budging dimensions. If your content is higher and/or wider than this, it will flow outside of the <div> and look scrappy. Z-index - only used for stacking positioned <div>s, so not needed (I think) in your page. Left and top - because your <div> is abosolutely positioned - these are the coordinates your <div> will take. They won't move from that which, depending on what you want, is either good or bad. You can get rid of z-index without any issues. Width you should get rid of - just let the <div> flow to the width of the browser window which, in this case, is probably what you want. Also, screen readers tend to read pages in the order that they are in in the code. Your navigation div is above your company name div (id="layer2"). This means that the first thing a screan reader will potentially read to a view is "home, services, pro bono, contact us" (after it's tried to guess what to call your logo that doesn't have any alt-text that is!).

Try this version (http://www.websitearchitecture.co.uk/storr/forumimgs/JBDiaz/) - all of the CSS is in the head - I've ditched the external stylesheet and re-coded the XHTML. This works fine in Opera, Moz and IE. Also, a cautionary note about case sensitivity in CSS: Moz and Opera treat it as case sensitive, so .Content is different and won't work if you've coded class="content". Best stick to one case - it's far easier.

[James]

Thank you both so much - you're right about the logo - it looks too mathematical being exactly 45 degs and aligned to the borders - I'll try less gradient and an overlap.

The "inform engage change" was totally my idea, not the client's. I'm still waiting for his feedback but my girlfriend said she was confused into thinking they were links, which is not the case. Maybe text is a bad idea, I might consider an appropriate washed out vector graphic instead.

Francis, as always, thanks for your time and enthusiasm. I'll try and get my head round your suggestions tomorrow (far too late for that now!)

Incidentally, I was tempted to use tables for the layout but decided to stick with CSS on this occasion!

Overall I am much happier with this second version.

Guess you must be thinking "Shouldn't he be doing work on Bentley instead?". Is there anything I can do? I must confess to being a bit slow to contribute to the coding of the site, but I do find the Includes, PHP and CSS hard to understand, particularly as I can't preview locally. :">

Thanks again.

[James]

I've now repositioned the logo - but the edges look a little rough. Not being an expert in Photoshop, I used Fireworks to rotate the image. Am I stuck with the roughness because of the angle or is there a fix?

I have extended the "inform - engage - change" image and made it a background image that floats under the rest of the page.

Francis, I'm not too fussed about the effects of massive text resize in Mozilla. The way I see it is this: Mozilla and its variants is used by say 5% of users. Let's say 2% (and I think that's an overstatement) of those Mozilla users want to blow the text size up to the n'th degree. We end up with 0.1% of users seeing overlapping text. That's one in a thousand. I think I can live with that. Particularly as this site is not mass market.

Or have I misunderstood the advice?

I have decided that I will follow best practice wherever possible, but I'm not going to give myself the stress of catering for such a tiny tiny tiny minority users if it's not second nature to me.

As you were so kind as to do the alternative code on this occasion I will definitely make the changes, and try and learn from it, thanks again mate.

Feedback would be great chaps,

Cheers.

[James]

Forgot to say - the logo does / did have ALT TEXT - it says "Diaz Brothers logo", or have I done something wrong?

Or did you mean the "inform - engage - change" image - that didn't have ALT, but as it's now a background image it doesn't matter.

Cheers.

[francis]

You've put the alt text on an image map - any idea why you're using it? I don't see it linked to anything, so it's really extra, unneeded code. Maybe that's why I didn't notice the alt text - the first thing I did was to take the image map out. Also - you can dispense with the

wrapping the image - it's not needed. An image should be wrapped in a block-level item - you've got a <div> here, so that's okay. If you need padding/margins around the image, well, that's what CSS is for. A

is a paragraph of text and, technically, shouldn't be used for adding space, especially with

</p>. A bit of CSS bottom-margin will sort that out - I use it loads at work on tables.

It's up to you about changing the code. Personally I don't see the point of declaring a specific width on a <div> that I'd want to span the entire width of the page - don't bother with the extra code, and let the <div> flow.

As for the image, I don't know why it's so ragged. Maybe you could try taking a screengrab of the page, airbrusing out the old logo and then put the new one on. Cropping it down should make it small in K and you shouldn't get the ragged edges.

Agh - it's gone midnight. Stupid clock change...

[James]

The logo is skewed at 30 degrees but of course the GIF itself is perfectly square. If I added ALT to the image without an image map, then the ALT pops up around the logo as well as on it. By adding an image map that is aligned to the angle of the logo it allows ALT to appear only when hovered over the logo and not the whole GIF. Hope that makes sense.

There is no link, I used the image map purely to position the ALT TEXT.

Is this bad?

[francis]

Originally posted by James Barker@Mar 29 2004, 10:07 am
There is no link, I used the image map purely to position the ALT TEXT.

Is this bad?
I did an experiment (see below) to see what would happen if the image didn't load, which is one of the main points of alt text, apart from the whole accessibility thing (alt = alternative = an alternative to the image). The results are below. I know that IE is the most predominent browser, etc etc, but don't forget that it gets alt text wrong (http://devedge.netscape.com/viewsource/2002/tooltips/). Alt text shouldn't be used to convey popup messages - that's what <title> is for. The image map is causing the alt text to fail because the image doesn't have any alt text - the image map above it does, but that isn't the image. Alt text on an image map is to aid accessibility, not to act as a positioning tool for the alt text. Image maps (http://www.w3.org/TR/html401/struct/objects.html#edef-MAP) are generally meant for navigation devices, so really should be kept to that. If it were me, I'd ditch it as it's doing more harm than good.

Note: I had to shift the logo down a bit as the alt text was the same colour as the cream layer so couldn't be seen - something else that will need tweaking!

http://www.websitearchitecture.co.uk/storr/forumimgs/alttextandimagemaps.gif

[James]

I did this website free of charge, because Carlos is a friend and it didn't take very long to do anyway.

When I got home from work on Wednesday there was a case of wine waiting on my doorstep by way of thanks from Carlos for building the site. He is genuinely delighted with it.

So I got my first payment! The wine was worth £60 and is much appreciated this weekend!

James.

PS the site is now found on Google but not very high unless you add "Diaz Brothers" to the search words. I will try to get it higher.

[Tom]

Good news about the wine!

Its Easter Day, so I'll make the obvious comment: the site looks choclate-ey to me. One should always think about colour symbolism. Is it an after-dinner company?

Re SEO, please see Content Management comment about Zealotry - and take the test!