audio visual business

[j3n]

Hey, I'm building a site for a client - McMedia (audio visual stuffs..).  I would love some advice/comments/opinions on this design.  I am mostly concerned with the main page.  The client has requested the front layout be centered on this photo, so I added some "spice".  Overdone?  If you think the graphics are lame, I want to hear that too.  Be hard on me!

 

(Note: the product line page does not have links to the brands yet, as it says it does..)

 

Thanks SO much for checkin this out: http://www.mcmedia-av.ca/test2/

 

 

 

 

[nrg_alpha]

Overall, I like it. Clean and simple. My additional thoughts are as follows:

 

- I would fix the validation errors though.

- I wouldn't use tables for layout. Use css instead.

- You shave some weight off of your images through smushit. When I passed your home page through it, there was a savings of 17.93 KB that could be had.

- Looking through your code, I noticed that you don't have SEO (Search Engine Optimization) stuff. Example, you lack a meta description tag in your head tag. You also don't make use of heading tags (<h1><h2><h3>... etc). Since you are a business, you could potentially benefit from making yourself more visible to search engines. There is a SEO board here on the freaks. Obviously, there are additional tutorials online.. just google SEO and I'm sure you will find plenty. Also, I found this book pretty informative.

- Since this isn't a purely visual online portfolio, I would consider adding alt attributes to your images.

- I would make the draconicmedia url within the footer a link.

 

All in all though.. well done IMO.

[Axeia]

nrg_alpha pointed out a lot of things already, but let me add some more to that.

 

• Mainmenu links should be bigger, if you're going to highlight the background on mouseover the entire thing should be a link, people get confused by these things. Text should be bigger, more prominent as well, up the font-size a bit and make it bold.
  SEO wise it would be good to use a <ul><li><a></a></li><ul> construction for the menu. Could use CSS for the mouseover effect instead of javascript if you make the entire 'highlight' the link.
  
• Where are the <h1>/<h2>'s at? "Welcome to McMedia Online!" That's you're h1 right there.. not some span.
  
• Why is the entire thing use ajaxrequests for no good reason? That's seriously going to kill your search engine rating
  
• The rentals page.. now that's a place where a table should be used instead of for the design (like nrg_alpha already mentioned).
  But tables are more than just <table><tr><td></td></tr></table> like you're using there. There's also <th> which should be instead of <td> for table headers.
  colgroups would be a good addition to, to associate the header to the data below it.
  Nice of example of both th and colgroup on w3schools quite closely resembling your table.
  
• On the product lines page I see a lot of possible <h2>'s
  
• Contact page, same table story, and you could use <address> for the address instead of a div.
  

 

I'd be tempted myself to add title tags to the links with a VERY short description and then on the frontpage use the javascript to position the title text on the monitors/projection screen (whatver it is) in the middle.

 

Out of curiousity, the "McMedia" behind the menu is supposed to be half hidden behind the image? Looks kinda strange.. out of place

 

[j3n]

Thanks, those are all great suggestions!

 

- I checked out the validation errors, and have fixed many of them, but it will take some work.. apparently I forgot to close my div tags, which seems to only create more problems once fixed.  :-\

 

- smushit is an awesome tool, I've never seen that before! thanks.

 

- draconicmedia is now an anchor - good point.  Also SEO to come! Thanks for the direction nrg_alpha.

 

- Axeia, very interesting idea about the title/description tags with onmouseover events.  If it is within the time budget, I will definitely consider it!

 

 

Questions:

 

-what is the advantage of using h1/h2.. as opposed to a span/class?  you are both adamant about them, so I'm obviously missing something...

 

- axeia, what is the advantage of using <th> in my [rentals] table? It seems purely academic? 

 

- axeia, the architecture is centered on ajaxrequest because i don't want the menu bar, or background image to reload.  Is there some way I can use this construct and build on my search engine rating otherwise?  (I also noticed that because I'm using ajax, the browser back button is useless... ahh!)

 

- yes, the gray mcmedia behind the menu items is there on purpose.. you're not a fan?  Maybe I can spice it up a bit.. add some swirlies or something.  What do you think nrg?

 

 

 

 

Thanks again for your opinions.  MUCH appreciated.

 

 

 

 

 

 

 

 

[j3n]

- I wouldn't use tables for layout. Use css instead.

 

Do you mean divs?  I experimented with a div layout on another site and found that it was a nightmare getting the different browsers (ahem..IE...) to render it as intended. 

 

Can you give me a VERY simple example of what you mean?

 

Thx

[Axeia]

Yes, what we're are basically suggesting is using tags for the purpose they were made, as in

• table = Tabular Data
  
• div/span = Layout
  
• h1 = Most important line on the page, just imagine you're writing a book. Every page is a chapter, your chapter title is your <h1> (h1-h5 are subchapters). Say it's a cookbook and you're writing a recipe for Garlic Shrimp.
  <h1>Garlic Shrimp</h1>
  <h2>Preperations</h2>
  <ul>
    <li>Leave the butter out of the fridge so it can reach room temperature.</li>
    <li>Let the Garlic ripen in the sun for 2-3 days</li>
  </ul>
  <h2>Ingredients</h2>
  <ul><li>Shrimps</li><li>Garlic</li></ul>
  <h3>Best Shrimps</h3>
  <p>The best shrimps are obtained from blah blah</p>
  Errr you get the idea by now I hope.. not here to write a cookbook
  Every page should have a h1 and can optionally have any number of h2-h6's. Just don't skip any inbetween (so no <h1></h1><h3></h3> as that's missing a h2)
   
  
• <ul><li></li></ul> = list, for a list of related items. The menu for example.
  
• colgroups, th's etc are not just a way to get a fat heading. They're there to relate things to each-other, that way screenreaders know information in the table is a price, and which isn't.
  

 

Using the proper tag for the proper purpose makes pages more logical to different kinds of 'browsers', search engines (also a type of browser) come by and go 'Oh hey look tabular data.. err I can't make head or tails from this' which might mean the worst possible text ends up being indexed as the most important.. you're leaving it up the search engines 'guess' to decided what is important and what's not.

 

Non-visual browsers as used by blind people also need proper markup to make any sense of your page.

 

Also realise that search engines don't have, or have very limited javascript support. By basing something as vital as navigation on javascript you made the page inaccessible to them, as well as to all people with it disabled or who simply can't use it cause they have a disability and are using a 'special' browser.

 

A good (though not complete) test to see if your page is anywhere near accessible is by using a 'special browser' yourself, such as lynx .

[j3n]

Haha, a b2b html lesson AND a cooking lesson! Score.

 

I will start off by saying this: when I own the internet, I will ban users with disabled JS.  I will also ban IE users.  Then, the internet will be at peace.

 

Anyway, you've cleared up some things for me.  If I understand what you're saying, the reason for using headers and "proper" tags is for better communication with search engines.  (I have my SEO homework set out for me!) 

 

As far as the javascript/ajax navigation problem, this is one I will struggle with for a long time to come.  On the one hand, with ajax, I can use memory-expensive background graphics that will only have to load once.  This opens up so many doors for use of cool art.  Also, I guess it's a weird pet peeve of mine when each link reloads the ENTIRE page.  Waste of my time!! (people to see place to go!) However, you raise some solid arguments for the use of the plan ol' href.  I think it just comes down to knowing your audience.  Who do I want to target?  People who like art and are likely to have JS enabled, or stupid people who don't deserve to see any websites at all.  Haha, just kidding. I mean, ... or the broader scope of the online public.  There's always a compromise.

 

Anyway, thanks again for your thoughts Axeia, you've been much help!

[Axeia]

Browsers don't download the page again and again and again for every page view, they use caching.

That's also why it's recommended to use external files for javascript/css you reuse on different pages, they get cached as well.

(That's also the reason why the first pageload always takes longer than secondary requests).

 

You might want to read http://developer.yahoo.com/performance/rules.html some very nice info on that page.

And yes search engines (and screenreaders/what not) need tags to make sense of your content.

 

And not everyone disables javascript simply so they wont get annoying alert() messages, some visitors may use a braille browser for example which simply doesn't have support for it. (and Lynx that I linked earlier doesn't have support for it either)

[j3n]

Yeah, I know about caching.  But it still isn't instant, as is with ajax.  The image still goes away for a second.

 

And yes, I do use external css and JS files, for that purpose. 

 

About the hate on the disabled javascript.. I was just having some fun   I know there are good reasons for it, but it puts an extra step in my efforts, and thus, I complain!