Hi all..

My first attempt at cssing and going tableless with my portfolio site..

Please review and comment.

My site : http://www.rayvolvez.com

Thank you!

Hello Elaine,
Since no one else seems willing to respond to your request, I will go ahead and add my 2 cents worth if you don’t mind.  :-)
Now bear in mind this is just one person’s observations, so please take these comments in the supportive spirit they are intended.

First things first I love, love, LOVE your graphic images!  Strong, bold choices… very nice!  And your sweeping d’r studio logo is very chic and nicely done.  I’m viewing your site with a 24” widescreen Samsung and your images are truly crisp and clear, well done.

Viewing your site through IE7, Firefox 1.5 and Opera 9 on Windows XP I notice some very different behavior depending upon the browser. I am not sure if you have previewed your site across multiple browsers or not and perhaps the differences were a conscious choice, so I’ll just list a few things I happened to notice.

Your font sizing is flexible and that’s a terrific start.  In Firefox the border and footer text you have running across the bottom stays fixed so your content and navigation text runs overtop of it when increased in size, additionally your primary graphic (e.g. the water glass, parrot) to the right stays fixed and text resizes within the structural element.  In IE, only the border of the footer stays fixed, your footer text and your primary graphic float with text when resized. Interesting…

A note about sufficient contrast.  The light green you have chosen for your header graphic that you use to say “nothing short of” and “shall we produce” is very difficult to read against the graduated grey background.  Perhaps just adding a small outline to these words will help them stand out.  I had to really take some time to decipher what those words were.  The same is true for the header graphic on your Articles page “the belief in” gets lost for me.

You’ll want to re-run the HTML validator on your home page… you’ve got a few stray line break tags that are throwing a wrench into an otherwise validated (although not cleanly laid out) code.

And I’m curious about your choice to have all the code related to navigation and your footer and images coming before your content. This diminishes the little importance of what little content you have on each page in the eyes of search engine spiders.  It also adds clutter for those that are attempting to view your site with alternate methods (e.g. text readers and so on)... I only mention this because you have taken the trouble to imply your concern for accessibility by providing validator links for WAI-AAA and Section 508. With all due respect, your site does not conform to priority level 3 guidelines, so you should not claim WAI-AAA status.  It may appear to validate well, but the more subjective guidelines are lacking.

All in all a very graphically pleasing site. I like it very much. Keep up the good work and keep improving!

Cheers!

thank you.. i thought no one is going to reply..

i have rechecked my xhtml validity and the wai-aaa was checked using cynthia, it told me that i passed the testing.. any ideas if its still invalid now? let me know pls..

i’ll have to look into the contents ordering i guess.. as this is my first try at css layout, i simply ordered my content in the chronology of my work, as in i had the contents last after working all the navigation in..

thanks..

i have rechecked my xhtml validity and the wai-aaa was checked using cynthia, it told me that i passed the testing.. any ideas if its still invalid now? let me know pls..

If you are interested in making your site truly accessible, you might start here on the W3C site to see an overview of how best to begin evaluating your conformance (http://www.w3.org/WAI/eval/conformance.html).

Although you may have run your page(s) through various automated “checkers” such as CynthiaSays, they are not able to evaluate all points on the checklist (http://www.w3.org/TR/WCAG10/full-checklist.html), some priorities must be evaluated by humans and this is where you must step in and look carefully at your page structure.

Okay, so I’ll “pick on” your “About d-r studio” page just as an example…
Running through the checklist and comparing against your code I immediately see the following:

Point 3.4 “Use relative rather than absolute units in markup language attribute values and style sheet property values”
I didn’t bother to look at your linked stylsheet because you have on-page styles that go against this checkpoint. You have several styles that apply font sizes in pixels rather than % or em.  And interestingly enough, when viewing your site through IE6 in Windows XP I see that changing the “text size” settings does not affect the appearance of your page at all, which is consistent if you have specified sizes in absolute measurements.

Point 3.5 “Use header elements to convey document structure and use them according to specification”
You use \ tags for your headings and apply a particular class to them, instead of using semantic markup of header tags \<h2>, etc.

Point 3.6 “Mark up lists and list items properly”
You show a list of services you provide, but it is created in a \<span> element instead of using semantic markup for lists such as \<ul>

... okay I’ll stop there because I think you’ll get the point.  I would encourage you to spend some time to improve your coding skills and learn a little more about WAI and accessibility.  There are many VERY good sites out there to assist, here are just a few:
- http://www.w3.org/WAI/ (of course)
- http://www.diveintoaccessibility.org
- http://www.gawds.org
- http://www.webaim.org

I see by your “Personnel” page that you have many good years of learning available to you.  I wish you all the best because you show a great deal of potential!!  I look forward to seeing your work in many areas of the web.

I love your site. It is very well designed. The Gallery is designed very well with the pop up and all. I love it. Do you create all your images using Photoshop?
Only the top image is bothering me. The pale green is not readable.

Cheers!

Hi Thanks!
Yes, all images are created with photoshop, mainly photo manips.

I agree about the text at the top, will fix it as soon as i caN. been real busy with school and work.

Any more critiques? well this never makes it onto cssdrive gallery even though it has been featured by many other css galleries. Kinda sad but well..