Welcome!

[danhodkinson]

hello to one and all at smashing magazine.

I run a tiny design company in the midlands with a colleague, after a long, arduous redevelopment of our site we have just uploaded our new site.

I am keen to get your opinons on the site as well as any performance issues you face.

The site was originally meant to be created using Flash, but i wanted it all to be automated which would have taken far too long so it was made using html, css and elements of javascript.

Thanks for any input
Dan Hodkinson

[Andy]

Tip: If you want a website review, at least try to submit the URL.

[danhodkinson]

you know what Andy, its tips like that that keep me on my toes

sorry about that, the url is http://www.meshdesignltd.com

[Andy]

Great.

Now, as promised:

• Make it validate.
• Website barely works with JS disabled.
• There's no scrollbar!!
• Add xml:lang to your html tag.
• You should only have one (and no more than two) h1 tag(s). You have three.
• The h1's content should be reflected in the title. If, for example, you are on a page with the heading reading "portfolio", your title tag should read "Portfolio - Website Name".
• Subheadings should be properly nested. H2 should go after h1, h3 should go after h2 and so on.
• <img> tags should have a non-empty alt tag.
• Graphics should not be marked up with the <img> tag. Use CSS (background-image) instead. Leave <img> for images related to the content, such as photos.
• Make sure to have a text-equivalent for your content. Replace your introduction image with actual content and then apply the images through CSS.
• Move scripts down to just before </body> as javascript files block parallel downloads and rendering.
• Anchor tags (<a>) should contain text, even if styled with CSS.
• Navigation menu should be marked up as an unordered list. Example:
  

  Code: Select all

  <div id="navigation">
  <h2>Navigation</h2>
  <ul>
    <li id="home"><a href="/">Home</a></li>
    <li id="portfolio"><a href="/portfolio/">Portfolio</a></li>
    <li id="about"><a href="/about/">About</a></li>
  </ul>
</div>


• You have 11 javascript files and 11 background images. Consider combining the javascript files as well as combining the background images into a CSS sprite.
• Enable gzip compression.
• Enable caching.
• Your using resources from 8 different domains. Reduce the DNS lookups.
• You have a whopping 91 images on your site. Make fewer HTTP requests.
• Your contact form is in flash!! Make a HTML version instead.
• Use ids and classnames that describe content, not style.
• Text that appears to be a heading should probably also be marked up as one.

[danhodkinson]

Thanks Andy,
ok for a few of your points:

There's no scrollbar!!

- we have hidden the scrollbar on purpose as we want them to navigate using the menu

You should only have one (and no more than two) h1 tag(s). You have three.

the h1's arent being used as headings, they are being used for cufon replacement text, this only works with the h(x) styles. Should i still use an alternative h(x) then?

You have a whopping 91 images on your site. Make fewer HTTP requests.

- our site is a portfolio of our work? so i can't really have fewer images?

Your contact form is in flash!! Make a HTML version instead.

- i couldnt find a html form that didnt redirect the user to the home section of the site which is why i opted for flash.

regards
Dan

[Andy]

we have hidden the scrollbar on purpose as we want them to navigate using the menu

Then your website is doomed to fail.

There's a reason why the scrollbar is there. You really shouldn't try to innovate established conventions as your users expect things to work a certain way. If it doesn't, they will leave.

Also, try navigating your website with javascript disabled. Your whole portfolio becomes unusable.

the h1's arent being used as headings, they are being used for cufon replacement text, this only works with the h(x) styles. Should i still use an alternative h(x) then?

You should only have one H1 out of accessibility and SEO purposes.

Also, Cufón works with whatever CSS selector you feed it. It does not have to be a heading. See here: http://wiki.github.com/sorccu/cufon/usage

our site is a portfolio of our work? so i can't really have fewer images?

You could always subpage the content so people can see the images on a separate page in case javascript is disabled.
If javascript is available, you could pull the images in on-demand, enabling your little slider.

Your portfolio section isn't even readable/viewable in its current state so I can't see why not.

i couldnt find a html form that didnt redirect the user to the home section of the site which is why i opted for flash.

Then you didn't do your research properly. I assume you've heard of Ajax? I'd be surprised if you haven't, seeing as you're using jQuery and all.

Code: Select all

$("#testform").submit( function () {
  $.post("test.php", $("#testform").serialize());
  return false;
});

http://docs.jquery.com/Ajax/jQuery.post

[danhodkinson]

Why is it doomed to fail because of a lack of a scrollbar?

Without getting into a huge debate I don't see why we should be discouraged from going against the norm on a website, how will we move forward if we dont? it may turn out that we return to a multipage site, but we have decided to experiment with this one.
We are a design company (albeit a tiny one) so if the purpose of the website was to present important information that should be in a uniform vertical, multi page layout then we would obviously be ridiculous in attempting to do what we are doing, however we are trying to present ourselves in a slightly different way.

I do agree that i should put steps in place so that if the user doesnt have javascript enabled they are redirected to a website that doesnt require java to funciton.

with the cufon i got confused with this quote on the usage:
[quoute]In order to avoid unnecessary duplication cufón does not come bundled with a selector engine, which means that by default you’ll only be able to use tag names (such as h1) as selectors[/quote]
so i will set about fixing that today.

I do appreciate your comments though and dont want you to get the impression that i am having a go and disregarding them because i am not,

regards
Daniel

[danhodkinson]

also,

# Enable gzip compression.
# Enable caching.

i have used this on CMS sites and PHP sites but never on a HTML site, do you have a link that can give me a bit more information on this please?

Regards
Dan

[Andy]

Why is it doomed to fail because of a lack of a scrollbar?

Because users expect a scrollbar.

Do you really think that your site will be well-received if you start stripping features from users' browsers? Many would become unable to use your website, which would definitely drive them away.

I do agree that i should put steps in place so that if the user doesnt have javascript enabled they are redirected to a website that doesnt require java to funciton.

Users shouldn't really be redirected just because they lack javascript, though. Make your website work without javascript first. Then enhance it with JS functionality.

i have used this on CMS sites and PHP sites but never on a HTML site, do you have a link that can give me a bit more information on this please?

http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
http://httpd.apache.org/docs/2.0/mod/mod_expires.html

[GreggInteractive]

1.
On the scroll bar subject, I do admit it took me a while to realize how to get to the next photo. At first i thought there were only 2 photos, then I clicked contacts and it scrolled past a bunch more.
So i went back and had to look for the "next" link. If I was you i'd take the next link and turn it into a brighter next button so everyone instantly sees it when they are viewing your work. It'd be cool if you could go to the next photo with your arrow keys also.

2.
I have a 24 inch Mac screen and your background image just drops off and turns to white. The transition from photo to white is really rough. I would either fade the background image to white, or put some bordering line of some sort so it does not look so rough.

3.
Your site took a LONG time to load. I waited for it to load cause I wanted to see the design, but not everyone will want to wait that long. I would go back threw your photos and see if you can optimize them anymore down to smaller KB sizes (not smaller as in pixel size).

You have 11 photos under your work, each averaging around 185 kb. so 2,035 kb to download before the page is done.

Take those same 11 photos and optimize those down to around 40 kb, they will not lose any detail that the human eye can pick up on, now your users only have to download 440 kb for the whole page the load. Close to what just two of your images used to use.

When creating a site, you always want to have your user experience in the front of your mind, and slow loading sites are inconvenient for the users. So are "next" links that the user has to look for instead of just seeing naturally.

Thats it. The work yall do looks great.