http://brushedwithmagic.com

http://brushedwithmagic.com

This is the latest site that I have completed. A little background on this design.

a) Tableless. XHTML 1.1 with CSS for layout. (Note: the host sticks some crap code at the end of the markup. Validating to XHTML will fail. Not my fault. )
b) Meeting at least Priority 1 Web Content Accessibility Guidlines.
c) Content consists of some paintings, painted jackets and painted dishware.
d) The design was inspired by a book on making martinis and other fancy drinks. It had that retro, 50's lounge type of look to it.

Any honest thoughts are welcome. Thanks.
cb.

cb,

bad, bad host. For validation, why not write them and ask them to at least complete their "<script>" tag and add an alt to the image.

Honest thoughts: I love the colors! Not a big fan of the green diamonds at the bottom. Probably would've done either micro or bold stripes instead, then moved the text below all design and centered. Just MHO. On each page the thumbs don't line up with the instruction/big image box. A valign issue maybe? But I appreciate them being shown on the same page. Contact us page's center col is way down the page. There's no color bg for the "dishware" heading (or maybe would not show). The "paintings" header should be padded left a bit like the other headings. And lastly, IMHO, the alt tags are too detailed. This is one opinion of Jakob Neilsen that I do fully agree with: Link. I understand the reasons for it, but maybe separate pages for the images for accessibility? Overall I like the forethought you put into the design and development!

I like your design but the colors don't seem to work together (bright background vs. more pastel menu) and I think a sans-serif font would look better. I couldn't find a link back to the index page.

cb,

bad, bad host. For validation, why not write them and ask them to at least complete their "<script>" tag and add an alt to the image.

Hey divaone. Thanks for the feedback. I have emailed them on many occasions. Apparantly, they aren't too knowledgeable on customer service, or XHTML validation. Either way, they've never done anything about it.

Honest thoughts: I love the colors! Not a big fan of the green diamonds at the bottom. Probably would've done either micro or bold stripes instead, then moved the text below all design and centered. Just MHO. On each page the thumbs don't line up with the instruction/big image box. A valign issue maybe? But I appreciate them being shown on the same page. Contact us page's center col is way down the page. There's no color bg for the "dishware" heading (or maybe would not show). The "paintings" header should be padded left a bit like the other headings. And lastly, IMHO, the alt tags are too detailed. This is one opinion of Jakob Neilsen that I do fully agree with: Link. I understand the reasons for it, but maybe separate pages for the images for accessibility? Overall I like the forethought you put into the design and development!

I did try stripes and I found that it brought more focus to that section of the page than the page itself. Therefore, I chose the subtle coloured tile just to accent it.

Thumbs don't align? I tested this on IE 6, Mozilla, Firefox and Opera on the PC and it seems to align for me. Same with the Contact Us page. What browser and platform are you seeing this on?

Dishware bg image is #fc0. The container background is #fc6. Kind of subtle, I suppose.

The 'Painting' heading is an <h2> element. My style sheet dictates 'padding-left: 10px;' for all <h2>'s, so it should be the same.

About Jakob Neilsen. I guess the real challenge of making an art site accessible is trying to describe to the person accessing your content what they are, well, accessing. The challenge I had is giving the user an idea of the artwork on the site. I don't know how it's possible to describe artwork in a couple of sentences. I think that's impossible to do. However, creating the 'alt' and 'title' values is first for the compliance of accessibility and then to try to describe the artwork. I can see Jakob's point about overdescribing something, but I think in this case of trying to make the site accessible and the nature of the site, I tried my best.

Seperate pages for accessibility? I think then I am defeating the purpose of trying to design with accessibility in mind. I believe the two can go hand in hand if the effort and time are put in your site. IMHO

And....thanks for the compliment on the design and development. I try my best

cb.

I like your design but the colors don't seem to work together (bright background vs. more pastel menu) and I think a sans-serif font would look better. I couldn't find a link back to the index page.

Hi browncat.

Would you say it's the colours of the menu vs. the background, or just in general?

As for the font, well, I was trying to match the design style used on the text for the logo and menu graphic. I ended up settling with 'Georgia'.

Oh yeah....no home page link. Oops. I'll fix that

Thanks.
cb.

Thumbs don't align? I tested this on IE 6, Mozilla, Firefox and Opera on the PC and it seems to align for me. Same with the Contact Us page. What browser and platform are you seeing this on?

I'm on IE6/PC. The content on the contact page is approximately 175 pixels down from the top of the paintings menu item. It's lined up directly with the bottom of the menu itself (bottom of the Contact link box).

Dishware bg image is #fc0. The container background is #fc6. Kind of subtle, I suppose.

I see now! Yes, it's very subtle.

The 'Painting' heading is an <h2> element. My style sheet dictates 'padding-left: 10px;' for all <h2>'s, so it should be the same.

Here's a quick pic. It's more the background than the element itself. It's minor, but noticeable.

About Jakob Neilsen. I guess the real challenge of making an art site accessible is trying to describe to the person accessing your content what they are, well, accessing. The challenge I had is giving the user an idea of the artwork on the site. I don't know how it's possible to describe artwork in a couple of sentences. I think that's impossible to do. However, creating the 'alt' and 'title' values is first for the compliance of accessibility and then to try to describe the artwork. I can see Jakob's point about overdescribing something, but I think in this case of trying to make the site accessible and the nature of the site, I tried my best. Seperate pages for accessibility? I think then I am defeating the purpose of trying to design with accessibility in mind. I believe the two can go hand in hand if the effort and time are put in your site. IMHO .

Your efforts are applauded. Because of my personal tastes, I have to agree with him on the fine line between accessibility and purpose. The tags didn't help guide me in the right direction... "click to view full size" (but more because of the alignment of the thumbs). Maybe a switch of the longer alt info onto the "click here" box which presently gives instructions in it's alt tag?

And....thanks for the compliment on the design and development. I try my best

Sure!

I'm on IE6/PC. The content on the contact page is approximately 175 pixels down from the top of the paintings menu item. It's lined up directly with the bottom of the menu itself (bottom of the Contact link box).

Ah...I see now. You must be on 800 x 600 resolution...correct? I made the textarea too wide. It should be aligned as intended now.

Here's a quick pic. It's more the background than the element itself. It's minor, but noticeable.

Okay...I see what you mean. That'll get fixed. The funny thing is, I just kind of randomly made those boxes as random rectangles. It looks like the paintings box managed to be less wide and over to the right a bit more than the other titles. I didn't even notice it! That sure is a keen eye for detail you have!

Your efforts are applauded. Because of my personal tastes, I have to agree with him on the fine line between accessibility and purpose. The tags didn't help guide me in the right direction... "click to view full size" (but more because of the alignment of the thumbs). Maybe a switch of the longer alt info onto the "click here" box which presently gives instructions in it's alt tag?

Fair enough. I see where you're coming from. The tags that tell you what each item is all about doesn't help you navigate the site. But.....here's why I did it.

Assume you are using a text reader to access this site. The text will speak out in the order based on this Lynx emulator here;
http://www.delorie.c...om/jackets.html

So, based on that, the individal will first here;

'Fabric painted jackets with various designs. Click on thumbnail to view image or listen to the description of each item provided.'

Then, they will hear the descriptions of each item.

Another big reason is that the browsers that I test on (IE, Mozilla, Firefox, Opera) read the images' title text. Lynx will read out the images' alt text.

So, yeah, it is 'abuse' of the alt and title tags, I suppose....but like you said you have to applaud my efforts

Thanks again for the feedback.
cb.

Well i guess it is a ok design, very original, but sorry I don't like it too much.
As browncat said The colors dont seem to fit right, and one more thing, the pattern at the bottom, it would be better with plain color.

Well i guess it is a ok design, very original, but sorry I don't like it too much.
As browncat said The colors dont seem to fit right, and one more thing, the pattern at the bottom, it would be better with plain color.

No worries. I appreciate the honest feedback.

And I do see your point about the many many colours used in the site. I'll keep the points raised in mind and play around with it.

Thanks again.
cb.

Hi browncat.

Would you say it's the colours of the menu vs. the background, or just in general?

As for the font, well, I was trying to match the design style used on the text for the logo and menu graphic. I ended up settling with 'Georgia'.

Oh yeah....no home page link. Oops. I'll fix that

Thanks.
cb.

I would say the menu colors don't go with the other colors. I would try copying the colors from the logo (the colors on the little paint palette plus blue and orange) and using them for the menu, probably with bold white type on the menu.
I actually like the green thing at the bottom, but it doesn't go with anything else. Maybe replace the purple with the same green.
Also try replacing the background of the text area with white and either eliminate the "Welcome" or make it less conspicuous.
Why not try copying some motifs and colors from the dishware?

cb,

Our discussion above about alt tags reminded me of the Jakob Nielsen article but really made me do more research - can never rely on one source only Here are some other articles you may be interested in:

Using ALT And TITLE Attributes scroll down especially to the table that shows what works where/how

Titles and alternative text for images a bit wordy, but some useful info

divaone-

Hello Crazy Bat,

To be honest with you I am not a big fan of this site you created. I think you did a very good job of being creative so brownie points on that for you. The colors dont seem to flow to well, but thats just my opinion. Well sorry for the negative criticism but this is what the forum is for. Good Luck!

Thanks,
Taylor Leach