Page 1 of 1

Websites, Flash, Graphics and WAI

Posted: Wed Mar 08, 2006 11:13 am
by darryladie
I have a few friends who I get to look over projects as I am working on them and they always seem to give me the same feedback, that the layout is good but that I am lacking graphics.

Fair enough. But I have a bit of a "thing" about accessibility which they understand nothing about! They also think Flash is good, for me that is a reason not to really listen to them but I am concerned that my sites are a bit boring.

Really you could say that I am a coder rather than a designer I try and code websites as well as humanly possible (strict doctitles etc.) but I am worried that that is not translating into work for me because strict doctitles mean nothing to newbies they take my abilities at their slightly bland face value.

My interest in accessibility has only really helped to secure a contract with one firm that does consultantancy on autism (so it's directly linked to disabilities).

That was really a long winded way of me asking how I know when things should be a graphic rather than text if there are ways of knowing that a graphic is more appropriate as well as any ideas for incorporating more graphics.

Its not got to the stage where I am replacing things with ASCII art :lol: but I do think I dont include enough graphics. How do I get into graphics, I borrowed Photoshop from someone and didn't have a clue what to do with it and online tutorials never seem to translate to anything relevant for the work I do.

What should I do?

Posted: Wed Mar 08, 2006 11:18 am
by feyd
use CSS to load the structural graphics, so that only content images are apart of the actual page data, where possible?

Posted: Wed Mar 08, 2006 11:25 am
by Chris Corbyn
Yes, I like to use a lot of CSS in place of graphics.

You don't need images to make a layout look good, you can do excellent layouts with CSS.

If you use images as background try to stick to very simple gradients and things like that. These are incredibly easy to create in photoshop too. Basically, what I'm trying to say is if you can do very good graphics (like I can't!) then using CSS gives you a huge advantage.

(Wonders if CSS will ever implement something to create gradients with color)

Rules I try to stick to with Graphics:

* Try not to use a graphic in place of text...
* Always include an alt attribute on your images
* If you do use a graphic in place of text, make sure the alt provides the same text as the image

Posted: Wed Mar 08, 2006 11:33 am
by darryladie
Thanks Guys.

I love CSS.

Problem is that means I forget about images. Do you guys reckon these sites need more gprahics as well?

They are both incomplete:

http://www.darryladie.com/
http://www.autismlifeline.com/ (I am aware of the problem with the image on the home page in anything except IE - I am working on it - any suggestions greatly appreciated!)

Thanks again :wink:

Posted: Wed Mar 08, 2006 11:34 am
by Roja
Lets restate your current design process:

Make site, add graphics.

You are now saying you want more graphics. So reverse the process.

Make graphics, make site.

That way, the site design flows naturally from the graphics. The use of graphics is in no way an evil thing. Graphics can help clarify, structure, and break up monotony. They can be incredibly accessible - in some cases more than text!

The trick is getting the balance right. While an image showing a beautiful image of a carnival will instantly convey far more meaning than text can (thus being a great addition to a page), an image replacing every word of text will not.

Here are a few fantastic examples of accessible sites that are a million times better because of careful and appropriate use of graphics:

http://www.csszengarden.com/?cssfile=142/142.css (Personal favorite this week!)
http://www.csszengarden.com/?cssfile=189/189.css
http://www.csszengarden.com/?cssfile=192/192.css

There are others on zengarden that can give inspiration. Remember, everything there uses the same underlying html structure - they only change the css and add images.

Images, as you imply, can be far harder to do well than code. In that regard, I can't help much. :)

Posted: Wed Mar 08, 2006 11:38 am
by darryladie
Wow! Thanks for another great reply.

Have looked at that Zen Garden before, I will try to keep all that in mind.

I envy people who can do graphics, it makes me feel so incompetent! :cry:

Posted: Wed Mar 08, 2006 11:40 am
by feyd
The only real issue I have with your personal site is the color scheme and the odd feeling of having the W3 links and copyright on the right side with nothing else. It just feels out of place to me.

As for the autism site, it does feel really basic, even slightly amateur. It may be the overlap that happens with the picture, and the really basic image of the acronym. But there's also the overly basic navigation too.

Nothing personal. :)

Posted: Wed Mar 08, 2006 11:57 am
by Roja
darryladie wrote:Problem is that means I forget about images. Do you guys reckon these sites need more gprahics as well?
Okay, thanks for providing links - it helps clarify things quite a bit.

On the Autism site, I have to disagree with Feyd. I don't think it looks amateur, I think it just lacks "pop!". I like the header graphic, the pages are simple, the navigation is clear, and the design "fits" together well. (The picture in the lower right is like 2 pixels out of place on my firefox, but whatever).

I think its appropriate to the content, but it definitely doesn't grab my attention. You do have the font size/spacing set fairly large, so maybe you could restructure it a bit to make room for a bigger header graphic that could have more detail - something more visually stunning. I'm hardpressed to explain in detail, but it feels like thats the spot you could do more in.

Your professional page on the other hand is a whole different beast.

Green and brown are just abysmal colors. Adding in tan, yellow and dark green as 'highlight' colors just makes it worse. The hilarious thing for me is that as soon as I scroll down (and see the portfolio examples you have) I'm entranced! Vivid colors, clear layout, and even a touch of creativity (the picture in the middle of the red example).

Further, the body of the site is structured rather slapshot. The absolute first text on a professional page should be a description of what you offer. It helps in search engine results, and also helps new visitors immediately understand why they came to your site. In a nutshell, I'd move the "Web design" section up to the top, and rewrite the intro sentence for it. You have 2-3 sentences to describe the purpose of their visit - maximize it!

And yes, for a webdesigner, I would definitely have more graphics on my main page. You have stunning portfolio examples, so expand that a bit (3-4), and possibly one at the top of the page that rotates.

Not sure, but I wouldn't immediately want to hire you based on that page, while the portfolio snaps are *hot*. They would at least make me say "Hey, worth looking further".

Posted: Wed Mar 08, 2006 12:04 pm
by feyd
:lol: I was actually kinda going after the "pop" angle on the autism site, just completely forgot the term for some reason. That's what I was hinting at with "slightly amateur" .. swear.

Really.

Stop looking at me like that.

Posted: Wed Mar 08, 2006 12:12 pm
by darryladie
Thanks for the feedback guys,

Feyd:

You have both commented on the colour scheme, I will take another look at it :lol:

As to the autism website, the idea of the site was to be simplistic, I am aware of the problem with the image, I working on that atm.

Roja:

I'm glad you like the autism page, the idea was not to detract from the content and I was working from a design the client has given me :lol:

As I said above I am aware of the problem with the picture! :)

As to my site, looks like I have a bit of work to do! The picture in the middle of maroon page is not my creativity. That is the client's art, the whole site can be found here:

http://www.noelastratford.com/

There are a few problems with that as well but that project is from like 8 months ago so I'm not changing it coz I'm not being paid 8)

I will work on my site as soon as the other one is done.

Thanks again. :lol:

Posted: Wed Mar 08, 2006 12:42 pm
by Chris Corbyn
darryladie wrote:http://www.autismlifeline.com/ (I am aware of the problem with the image on the home page in anything except IE - I am working on it - any suggestions greatly appreciated!)
It's the box-model problem. IE is containing anything an everything to do with the box, inside the box. The browsers that meet standards are putting the borders, padding and margins in the correct places, which is making the space allocated for it a little larger, hence the issue you're seeing.

A nice trick is to use two stylesheets, one main stylesheet and on for IE (yes, it sucks but blame Microsft for not sticking to standards):

Code: Select all

<style type="text/css" media="all">
@import "your_main_file.css";
</style>

<!-- The block below here is a MS conditional comment ignored by all parsers except MSIE browsers -->

<!--[if IE]>
<style type="text/css" media="all">
@import "exceptions_for_ie.css";
</style>
<![endif]-->
That way, you can put the little bits of CSS that vary for IE in the seconds stylesheet so they override the pre-defined ones in the main stylesheet, without affecting other browsers.

Here's some more info on the broken box model in IE.

http://css.maxdesign.com.au/listamatic/ ... xmodel.htm

I agree with Roja, I like your websites. You work in a similar way to me. See my CV for example... very similar graphically to your personal site (apart from the color-scheme) :)

Posted: Wed Mar 08, 2006 12:55 pm
by darryladie
Thanks Chris,

I already have an IF for IE to correct PNG transparency, so I will just add a style sheet in there as well to compensate for the wonders of IE!

Thanks very much,

Darryl

P.S. I really like the School Website you built, especially the title graphic and the nav, it works really well :lol: