best practice for putting one picture of another

[WindAndWaves]

Dear All

I have another question ... I was wondering what is the best practice of
putting pictures (a JPG) over a GIF background (see
http://www.cemac.co.nz/html/project_team.html for an example).

Cheers

Nicolaas

 

[brucie]

In alt.html WindAndWaves said:

I was wondering what is the best practice of putting pictures (a JPG)
over a GIF background

if backgrounding one isn't suitable positioning and z-indexing are
reasonably reliable.

http://www.cemac.co.nz/html/project_team.html for an example).

i don't see any images over any others.

 

[WindAndWaves]

In alt.html WindAndWaves said:


if backgrounding one isn't suitable positioning and z-indexing are
reasonably reliable.


i don't see any images over any others.

On the page, there are a background (writing) and three images. What do you
think is more reliable (a) background or (b) positioning + Z-index?

Cheers

Nicolaas

 

[brucie]

In alt.html WindAndWaves said:

On the page, there are a background (writing) and three images. What do you
think is more reliable (a) background or (b) positioning + Z-index?

none of the above. the text should be text, not an image.

 

[Amos E Wolfe]

Dear All

I have another question ... I was wondering what is the best practice of
putting pictures (a JPG) over a GIF background (see
http://www.cemac.co.nz/html/project_team.html for an example).

Cheers

If you use tables for your layout simply set one image as the table
background (e.g. a jpeg) and then set the contents of the cell as the gif
(which could have transparent parts).

-=# Amos E Wolfe #=-

 

[WindAndWaves]

If you use tables for your layout simply set one image as the table
background (e.g. a jpeg) and then set the contents of the cell as the gif
(which could have transparent parts).

-=# Amos E Wolfe #=-

Thank you for that idea, I might give that a go.

- Nicolaas

 

[WindAndWaves]

In alt.html WindAndWaves said:



none of the above. the text should be text, not an image.

Hi B.

I agree with you in general, but in this case looks are more important than
speed or that sort of carry on.

What do you think?

Thank you for your comments.

 

[brucie]

In alt.html WindAndWaves said:

What do you think?

· position:relative; on the grey container <div>.
· position:absolute; on the 4 pics positioned with the relevant
top/left/bottom/whatever coords.
· repeat image text in alt text attribute

if no css all images are still viewable, the text one hasn't disappeared
because its a background. if no css and no images alt text is viewable.

Thank you for your comments.

i accept cash and/or sexual favors.

 

[Jeffrey Silverman]

Hi B.

I agree with you in general, but in this case looks are more important than
speed or that sort of carry on.

What do you think?

Thank you for your comments.

What??? I know brucie is going to say something similar, but, text should
never be an image. at least not the way you are using text!! It has
nothing to do with speed or bandwidth! Plus, since the image of text is a
background image, there is no possibility of, at the very least, an alt=""
tag to tell what the text is supposed to be.

The way you did the page is very poor web design. I don't care how nice
it looks (and it looks fine, really) -- it is missing out on many points
of being a website. Indexing by search engines, accessibility,
searchability (within the browser), and, yes, bandwidth, among others. It
might as well be a printed flyer.


Oh...my...god... I just clicked some links...

The whole SITE is done like this! AARRgh!!! <runs away screaming>

 

[WindAndWaves]

What??? I know brucie is going to say something similar, but, text should
never be an image. at least not the way you are using text!! It has
nothing to do with speed or bandwidth! Plus, since the image of text is a
background image, there is no possibility of, at the very least, an alt=""
tag to tell what the text is supposed to be.

The way you did the page is very poor web design. I don't care how nice
it looks (and it looks fine, really) -- it is missing out on many points
of being a website. Indexing by search engines, accessibility,
searchability (within the browser), and, yes, bandwidth, among others. It
might as well be a printed flyer.


Oh...my...god... I just clicked some links...

The whole SITE is done like this! AARRgh!!! <runs away screaming>

Dear Jeffrey

I totally agree that you should use text, but you should also totally agree
that you can not achieve all the results with text (e.g. a funky font). The
client choose this approach so that is just the way it is.

Thank you for your comments.

Try something like http://www.hell.co.nz/index.jsp?city=Wellington - a very
flash and also very effective site, with very little text. (try picking up
a devil...)

Form follows function.

Cheers

Nicolaas

 

[rf]

I totally agree that you should use text, but you should also totally agree
that you can not achieve all the results with text (e.g. a funky font). The
client choose this approach so that is just the way it is.

Typical head in sand approach.

Does the customer realise that he is actively discriminating against
partially sighted people? That text can not be resized. That text can not be
read by a text to speech browser.

This active discrimination is, in Australia, illegal. There have been
successful law cases against such discrimination.

Does the customer know that google does not read images? Does the customer
realize that google will probably refuse to list the site? Even if it does
then nothing to do with what the company does will appear. Nothing, because
there is nothing google can see.

If google does happen to stumble across a page then that javascript only
navigation will stop it right in its tracks. Google does not follow
javascript navigation.

For that matter neither do people when javascript is disabled.


Here is what lynx makes of your example page. This is roughly what the blind
person will hear and what google will find:

<quote>
[USEMAP:navbar_keyline2.gif]
worker1 team worker2
home
</quote>

Not a pretty sight is it.

 

[WindAndWaves]

I totally agree that you should use text, but you should also totally agree
that you can not achieve all the results with text (e.g. a funky font). The
client choose this approach so that is just the way it is.

Typical head in sand approach.

Does the customer realise that he is actively discriminating against
partially sighted people? That text can not be resized. That text can not be
read by a text to speech browser.

This active discrimination is, in Australia, illegal. There have been
successful law cases against such discrimination.

Does the customer know that google does not read images? Does the customer
realize that google will probably refuse to list the site? Even if it does
then nothing to do with what the company does will appear. Nothing, because
there is nothing google can see.

If google does happen to stumble across a page then that javascript only
navigation will stop it right in its tracks. Google does not follow
javascript navigation.

For that matter neither do people when javascript is disabled.


Here is what lynx makes of your example page. This is roughly what the blind
person will hear and what google will find:

<quote>
[USEMAP:navbar_keyline2.gif]
worker1 team worker2
home
</quote>

Not a pretty sight is it.

Hi Richard,

Please have a look at www.cemac.co.nz/_dev/B1.html

Is it alright to work it this way? I have hidden the text in a block.

I tried to replace to text in the background image with actual text, but to
make it look similar was all but impossible.

Now it is hidden, the text is readable for Google and the like.

Cheers

- Nicolaas
PS the discrimination only applies to government pages and the like, as a
private business you can do what you want. If I want to make a page in
Chinese then that is my prerogative.

 

[Neal]

(regarding client's demands which make inaccessibility inevitable)

Typical head in sand approach.

<rant>

I think it's unfortunate that so many web designers are so in need of work
that they can't insist on the high road on matters such as these.

If we were architects, and the client wanted something done which was not
structurally stable, whether it's against building code or not the
architect should refuse to do it the way the client wants, and explain
why. If I told my plumber I wanted to use 3/8" pipe for the main, he'd
tell me to stick to what I know and let him do the job right, that's what
he's paying me for. And what response will the doctor give you if you ask
him to cure your heart problem, but you intend to keep on smoking 2 packs
a day and eating high-fat foods?

What's wrong with the web authoring profession is that too many web
authors don't act like professionals. They act like a hired hand, like an
immigrant worker who has to do what the boss says or some other eager fool
will take the job. Not to mention - far too many web authors making a
living at it don't even know how to do things properly in the first place.

Boy, I'd love to see a certification process for web professionals.
(Perhaps it already exists in some form?) If an independent body
recognizes you have expertise in HTML, CSS, PHP, accessibility/usability
practices and cross-platform design, that sets you apart from the schmuck
who designs web pages with PSP and DW but doesn't understand how simple
code works.

I see it as a designer's responsibility to show the client where their
requirements are faulted and to work out an alternate method which won't
break and will satisfy the client. If enough designers refused to screw
the user, the clients would see the difference in the clientele's response
to their site, and the whole web design profession would get getter pay
and respect as a result.

</rant>

 

[WindAndWaves]

(regarding client's demands which make inaccessibility inevitable)


<rant>

I think it's unfortunate that so many web designers are so in need of work
that they can't insist on the high road on matters such as these.

If we were architects, and the client wanted something done which was not
structurally stable, whether it's against building code or not the
architect should refuse to do it the way the client wants, and explain
why. If I told my plumber I wanted to use 3/8" pipe for the main, he'd
tell me to stick to what I know and let him do the job right, that's what
he's paying me for. And what response will the doctor give you if you ask
him to cure your heart problem, but you intend to keep on smoking 2 packs
a day and eating high-fat foods?

What's wrong with the web authoring profession is that too many web
authors don't act like professionals. They act like a hired hand, like an
immigrant worker who has to do what the boss says or some other eager fool
will take the job. Not to mention - far too many web authors making a
living at it don't even know how to do things properly in the first place.

Boy, I'd love to see a certification process for web professionals.
(Perhaps it already exists in some form?) If an independent body
recognizes you have expertise in HTML, CSS, PHP, accessibility/usability
practices and cross-platform design, that sets you apart from the schmuck
who designs web pages with PSP and DW but doesn't understand how simple
code works.

I see it as a designer's responsibility to show the client where their
requirements are faulted and to work out an alternate method which won't
break and will satisfy the client. If enough designers refused to screw
the user, the clients would see the difference in the clientele's response
to their site, and the whole web design profession would get getter pay
and respect as a result.

</rant>

Lets say long live diversity - because it is the best way forward. You are
right, but it all depends. Rules are for those who can not make intelligent
decisions.

 

[rf]

WindAndWaves wrote

Here is what lynx makes of your example page. This is roughly what the blind
person will hear and what google will find:

<quote>
[USEMAP:navbar_keyline2.gif]
worker1 team worker2
home
</quote>

Not a pretty sight is it.

Hi Richard,

Please have a look at www.cemac.co.nz/_dev/B1.html

Is it alright to work it this way? I have hidden the text in a block.

IMHO no it is not. You are still discriminating against partially sighted
viewers, those, like me, who have to wear glasses but still like to have the
text at about 16 pixels. I still can not change the size of that text. I
find it Very Hard to read, especially as it has been antialiased as well. I
don't get to see the text, I have to squint at the image of the text.

True, the text now appears in lynx (and therefore I assume an aural browser)
but you now have two bits of content to produce and keep up to date. One of
these days you *will* forget to change the "text" version.

Now it is hidden, the text is readable for Google and the like.

As for google I don't know how smart the bot is but I do know that if your
site comes to the attention of a human it will most likely be banned, not
just not listed but banned.

http://www.google.com.au/webmasters/2.html#B3

The bit at the bottom about manual removal from their index, particularly
the bit about hiding text from viewers and

http://www.google.com.au/webmasters/guidelines.html

the bit about quality guidelines.

PS the discrimination only applies to government pages and the like, as a
private business you can do what you want.

Nope. The Australian Olympic Comittee was not a goverment agency and they
lost and were fined quite a bit of money. $50,000 or so IIRC.

Read up on the legislation, it's in the .gov.au sites somewhere. It applies
to any organization that provides an information service to the public, a
[private] bus company publishing its timetable for example.

True, somebody flogging partitioning systems is unlikely to be charged (and
you can be charged by an individual, not just the authorities). Of course it
does not apply to New Zealand... yet

If I want to make a page in
Chinese then that is my prerogative.

Very true but if it is providing a service to the community (in .au at
least) it had better be accessible. Most expecially in Chinese you would not
use images of text. Chinese has such finely crafted ideographs that putting
them in an image (unless it is very big) is a sure way of making them
unreadable to anybody without perfect vision. I know, I work with Asian
languages, particularly the rendering of their text, as part of my job.

Those Chinese people can get real cranky real quick too

Bottom line: What is wrong with simple, plain, text. The browser can anti
alias it for the viewers environment. It can flow with the size of the
viewers canvas. It is much better all round. You will also find that people
here will stop complaining about it

Of course if you insist on using pictures of text then you have just lost
me, for one, as a customer

 

[WindAndWaves]

WindAndWaves wrote

...snip .... snip

I have actually tried to make the text visible and would dearly love to do
so, but I do not have the technical ability to do so.

Please see www.cemac.co.nz/_dev/B2.index.html

As soon as I add more than about one sentence (using a DIV), the whole
bottom drops down with disastrous consequences for the look of the page...

 

[rf]

WindAndWaves wrote

Lets say long live diversity - because it is the best way forward. You are
right, but it all depends. Rules are for those who can not make intelligent
decisions.

Do you really think your client is making an intelligent decision? By that,
I mean, is he making an *informed* decision.

No, he is not. He must not be aware of all the problems he is causing for
his clients. They may be staying away from his site in droves, but he will
never know.

Well, he might get an inkling of it when the other guy down the road
flogging partitions has to build a larger factory to keep up with his
demand. Demand that has originated from his perfectly accessible and
perfectly usable web site. A web site that does not abuse the viewer.

Your client is making a very bad business decision, based on what *he* likes
and what *he* thinks, not what his potential customer may like. Would he put
his showroom brochures inside a scratched perspex case three metres behind
the counter and expect the customer to view them from the front door? I
think not

IMHO part of your job as your clients contractor is to disabuse your client
of these blinkered opinions. It is up to you to give him the best you can
provide. If that includes arguing with him about design then so be it. *You*
are the web designer. *You* know about these things. All *he* does is flog
partitioning. As Neal alluded: you would not presume to tell him how to make
a partition, would you?

<aside>
I do this all the time with *my* customers (not web site clients, real
customers who are using my software in mission critical functions).

Often they will say "I *want* this" whereupon I reply "no you do not! You
*need* this instead". If they disagree then they can find somebody else to
do the job. I will *not* put my companies name to an inferior solution.

Often however any disagreement evaporates when I call in their boss, or his
boss, or the owner of the Television Station, and appraise them of the
situation.
</aside>

Sure, you can build the site for him as you are but I would then run very
fast very far away. When his customers complain about the usability of the
site he may be just short-sighted enough to blame *you*

 

[rf]

WindAndWaves

..snip .... snip

I have actually tried to make the text visible and would dearly love to do
so, but I do not have the technical ability to do so.

That's OK. That is why you are here

Please see www.cemac.co.nz/_dev/B2.index.html
404

As soon as I add more than about one sentence (using a DIV), the whole
bottom drops down with disastrous consequences for the look of the page...

Then you have other problems. I saw a few of them when I was looking at your
other pages.

Provide a working URL and I'll have a stab at fixing it.

 

[rf]

WindAndWaves wrote

Please see www.cemac.co.nz/_dev/B2.index.html

Found it.

Changes (not many of them):

Remove all references to b1.gif as a background.

Make the text div visible (by misspelling its class).

Remove style for the image (by misspelling class).

float: right image. margin: 10px image.

background-color: #ddd for the div I found enclosing the text and the image.
margin: 10px;

background-color: white for the text div, margin: 10px; margin-right: 465px
(to keep it away from the image)

We now have real text which is resizable (within reason).

http://users.bigpond.net.au/rf/cemac/

There are some problems introduced by this, the nice border seems to not
work quite as well now *but* this was relying on table cells maintaining
their minimum width/height anyway, something which is totally browser
dependent. I would not do this anyway. I would simply use a div with a 2px
border and forget about the nice + bits at the corners. If the client
complains tell him that this is hard stuff to do and will cost him an extra
10 hours of your time. He might just change his mind

This is a proof of concept only. Having looked into the HTML and more
importantly the CSS you have way over engineered this page.

My advice would be to treat what you have as a learning exercise and start
from scratch, this time keeping the KISS principle firmly in mind. Bring it
here at regular intervals for a review of work to date

The CSS in particular is way too verbose. You have built this from the
inside out, that is you are creating a rule for each little tiny bit on the
page.

Don't use CSS when you start again, just HTML. Get the content on the page
with no layout or presentational stuff at all.

Then start from the outside (the <body> element) and work in, only applying
rules and properties where they are required, over and above what you
already have, to make the page work. Keep inheritance firmly in mind.

You *may* need to add the odd <div> so as to group things together (the text
and the image for example). Do not simply plonk a div in there because you
think you may need it. Only place one when you can *prove* you need it.

If you do this correctly you will suddenly find that you have a complete
design, without using a table element

BTW that javascript only navigation will bite you when a viewer without
javascript comes along. At the very least make it degrade gracefully. Your
top level buttons should open a new HTML page when javascript is not there,
the new page basically replicating the drop down menu. I think this is,
however, the subject for another thread

 

[Neal]

Your client is making a very bad business decision, based on what *he*
likes
and what *he* thinks, not what his potential customer may like. Would he
put
his showroom brochures inside a scratched perspex case three metres
behind
the counter and expect the customer to view them from the front door? I
think not

To add to my rant

If this same client asked his machine supplier to get something that ran
on house current but could do the job of a 240V machine, the supplier
would stop and say, hey, you really need a 240V machine to do what you
need to do, it'll be worth your while to install a 240 line and run the
baby off of that.

If this same client was buying uniforms for his employees, the uniform
company would guide him into a decision which provided a quality uniform
at the lowest price - enough quality for the application, but no more than
necessary to keep costs down.

And, unless this is an illegal business, when the CPA they hire advises
them that a particular financial practice is unwise, they pay attention,
as there's a real tax cost connected to the way they've been doing
business.

So why is it the lowly web designer cowtows to their demands, and does not
stress that the effect they want on their site is going to backfire?
Where's the feedback saying "Gee, you do this, and this will happen. It's
a bad idea"?

Being able to tell the person who pays you that they're innocently
misguided and THIS is what you need to do to succeed - that's
professionalism.

As a musician, I sometimes have to hire players to play. In this business,
it's sometimes necessary to follow the leader for right or wrong, but when
a musician notices a problem and brings it to my attention, you better
believe I hire him or her for every possible gig. This person's thinking.
This person cares about the bottom line. I want this person on the job.

Satisfy every possible demand, and respond with a better solution to any
requirement that won't work. You will be respected for it. If you're not,
you are in the wrong place, and GET OUT.

Nobody needs a job where they have to do whatever the man says, for right
or wrong.

Are you a pro or are you a hooker?