html site-critique

[Bernhard Sturm]

Hi Group,

I wonder what you professionals think about this site:

http://test.montessori-viki.ch/

The reason why I ask is that I have created the site from a layout a
graphic designer I am working with has created. After I finished the
site, we had an argument about pixel accuracy of the layout (ufff...).

She asked me to drop the list-style menu for a paragraph(!) because this
is the only way to have a common line-height:140% for all the text on
the site! I was a bit confused, because I told here that she is mixing
semantic with formal representation, and this wouldn't work when viewing
the site with other UAs (print, handheld, text-reader). She told me that
there are so few people out there using such exotic things that she
doesn't care about as long as the visual impression is pixel precise...

She calls herself webdesigner, but I said, that such an approach has
nothing to do with webdesign.
What do you think? Would it be okay to have a menu structured in a
single paragraph (p) truncated by line-breaks (br)? What are the
pros/cons for such an approach?

Thanks for your inputs
Bernhard

 

[mbstevens]

She calls herself webdesigner, but I said, that such an approach has
nothing to do with webdesign.

It does not. As long as you had her alone when you said it, it might
be OK, to say it, too. Once you've warned them, if people want to
pay for crap, well, it's their business and their money -- back off.

 

[Jim Moe]

I wonder what you professionals think about this site:
http://test.montessori-viki.ch/

The problem with pixel perfect designs is immediately obvious. The text
below "Anmeldung (pdf, 39kB)" shows only the top parts of the characters.
(I have a minimum text size set which is larger than the teeny text size
defined for that menu.) The layout design adapts poorly to different text
sizes.

She asked me to drop the list-style menu for a paragraph(!) because this
is the only way to have a common line-height:140% for all the text on
the site!

You can still achieve the spacing she desires by creative use of the
padding and margins.
The fact that she does not care about markup is sad. Web design is much
more than visual presentation; she does not understand that.

She calls herself webdesigner, but I said, that such an approach has
nothing to do with webdesign.

Correct. She is a graphics designer who has not embraced the realities
of the Web medium. She is still stuck in print layout.

 

[Bernhard Sturm]

You can still achieve the spacing she desires by creative use of the
padding and margins.

We tried this together, but she was really measuring pixels, and then
switching between safari (which seems to have a problem with em-unit
fractions (eg. 1.43em) for li-margins) and IE (which renders fonts
different), so this resulted in frustration. I lectured here for about
half an hour, showing her the page in Lynx and on my mobile phone, but
she was only like: 'The number of people using such devices in order to
view a website are close to zero, only geeks use this'... phheee...

The fact that she does not care about markup is sad. Web design is much
more than visual presentation; she does not understand that.
Correct. She is a graphics designer who has not embraced the realities
of the Web medium. She is still stuck in print layout.

I told her that as well. I was like 'As a print oriented graphics
designer you also have to respect the limitations of the media, you
cannot design below certain font sizes as people will not be able to
read it'... but useless..

frustrated
bernhard

 

[dorayme]

It does not. As long as you had her alone when you said it, it might
be OK, to say it, too. Once you've warned them, if people want to
pay for crap, well, it's their business and their money -- back off.

Maybe... or maybe take a stand quietly, play about a bit, get the
list back in the html and css something like:

#menu a {font-size: .75em;}
#menu li {list-style: none;}
#menu ul, li {margin:0;padding:0;}
#menu ul, li {line-height: 1;}

and ask the graphic designer to see if she can pick it from just
looking at the website itself. If she cannot, then Bob will be
OP's uncle.

Just play about with the above values (and any others you can
think of that I have not noticed) till you cannot see a real
difference.

All this line height stuff makes me nervous. It suggests a
brittle perfection.

 

[mbstevens]

Maybe... or maybe take a stand quietly, play about a bit, get the
list back in the html and css something like:
> .............

Ah, better to defend the accomplished feat than to ask permission.
A strategy sometimes necessary in industry.

 

[Bergamot]

The text
below "Anmeldung (pdf, 39kB)" shows only the top parts of the characters.

I don't see anything below it at all.

 

[Jim Moe]

[...] I lectured her for about
half an hour, showing her the page in Lynx and on my mobile phone, but
she was only like: 'The number of people using such devices in order to
view a website are close to zero, only geeks use this'... phheee...

The Lynx view is what search engines see as well.

I told her that as well. I was like 'As a print oriented graphics
designer you also have to respect the limitations of the media, you
cannot design below certain font sizes as people will not be able to
read it'... but useless..

To achieve truly pixel perfect layout for all possible browsers you will
have to provide the page as an image map. Any other choice will not meet
her expectations.

 

[Bernhard Sturm]

To achieve truly pixel perfect layout for all possible browsers you will
have to provide the page as an image map. Any other choice will not meet
her expectations.

True... That's what I suggested to her as well. Then she got almost mad
about me: that I would take the mickey out of her... siggh... I think I
go along the way as doryame told me. She will not notice it as she
hardly checks a site when finished.

cheers for all the replies
bernhard

 

[Adrienne Boswell]

Gazing into my crystal ball I observed Bernhard Sturm

Hi Group,

I wonder what you professionals think about this site:

http://test.montessori-viki.ch/

The reason why I ask is that I have created the site from a layout a
graphic designer I am working with has created. After I finished the
site, we had an argument about pixel accuracy of the layout (ufff...).

She asked me to drop the list-style menu for a paragraph(!) because this
is the only way to have a common line-height:140% for all the text on
the site! I was a bit confused, because I told here that she is mixing
semantic with formal representation, and this wouldn't work when viewing
the site with other UAs (print, handheld, text-reader). She told me that
there are so few people out there using such exotic things that she
doesn't care about as long as the visual impression is pixel precise...

See http://www.localmiamionline.com/statistics.html

<quote>10 million Americans surf from cell phones or personal digital
assistants (PDAs). Of the 19.1 million users owning a PDA, 5 million
access the Internet with those devices, and among the 67.2 million
online users that own a cell phone, 5.8 million access the Internet with
those devices. - ComScore Networks</quote>

You might also want to point her to a recent thread about Target being
sued in Federal court. Montessori schools are known for their organic
method of teaching (only wooden toys), and I am sure would be horrified
if their web site was not accessible to a visually impaired student, or
parent seeking information.

She calls herself webdesigner, but I said, that such an approach has
nothing to do with webdesign.
What do you think? Would it be okay to have a menu structured in a
single paragraph (p) truncated by line-breaks (br)? What are the
pros/cons for such an approach?

You could always go over her head and directly to the client. Maybe the
client isn't as thick as she seems to be.

 

[Bernhard Sturm]

I don't see anything below it at all.

Just the kind of effects I suspected to happen... I just don't get it
why print oriented designers try to get involved into webdesign without
accepting the fact that it's not a piece of static paper? It's as if you
would talk to someone comming from the last century: I always have the
impression that they still think everybody else in the world will see it
the way they see it on their 22" screen, and that everybody else is
using safari and nothing else to see the page.

bernhard

 

[Bernhard Sturm]

Maybe... or maybe take a stand quietly, play about a bit, get the
list back in the html and css something like:

#menu a {font-size: .75em;}
#menu li {list-style: none;}
#menu ul, li {margin:0;padding:0;}
#menu ul, li {line-height: 1;}

and ask the graphic designer to see if she can pick it from just
looking at the website itself. If she cannot, then Bob will be
OP's uncle.

I'll give it a try... I think it's worth it.

All this line height stuff makes me nervous. It suggests a
brittle perfection.

It's as if someone would say: the web is a static place. I, THE DESIGNER
AM IN CONTROL! but this is such an outdated view. This is not only true
for the visual design but also for the navigational design: most of the
graphic designer can not embrace the reality of a non-linear
navigational structure. They always think in terms of a book: a user
will always start at the first page and navigate along a predefined
path(hence the many useless intro-pages).

still angry
bernhard

 

[dorayme]

True... That's what I suggested to her as well. Then she got almost mad
about me: that I would take the mickey out of her... siggh... I think I
go along the way as doryame told me. She will not notice it as she
hardly checks a site when finished.

When I fiddled about this morning with some values, I recall not
being able to notice at all the difference. In case it helps you
in your deception [1]:

Open the <p>'d version in one window and the <ul>d version in
another.

Browser/window control the font-size so that the pics are the
same size between windows (I noticed the design has this feature
via the positioning scheme).

Then fiddle with the css of the list version.

 

[Bernhard Sturm]

When I fiddled about this morning with some values, I recall not
being able to notice at all the difference. In case it helps you
in your deception [1]:

Open the <p>'d version in one window and the <ul>d version in
another.

I did this already I made screenshots to document the 'non-existing'
difference. There is only a small 1 pixel shift visible in firefox, but
I doubt she will notice it. Anyhow: thanks for the input.

Browser/window control the font-size so that the pics are the
same size between windows (I noticed the design has this feature
via the positioning scheme).

Yes. Which makes it even harder to achieve pixel perfect designs as
various UAs size different (I noticed some glitches in Safari on Windows).


LOL.. given the fact, that she is not the boss, but in this particular
project she has the lead (in all other cases I am the boss

bernhard

 

[Andy Dingley]

Once you've warned them, if people want to
pay for crap, well, it's their business and their money -- back off.

I disagree with that. IMHO, one of the functions of the "competent
expert in the field" is to _educate_ the consumer.

Customers don't set out "wanting to buy crap". They often start by
wanting to buy something that _is_ crap, but they want it because they
also think, mistakenly, that this is the way it ought to be. A
customer who's told by one designer that "pixel-perfect is best" or
"fox your fint sizes" won't know that it's a bad idea (and why should
they?). Our job, as technical experts, is to educate them on the
reasons why we think such techniques lead to crap sites.

 

[Andy Dingley]

I wonder what you professionals think about this site:
http://test.montessori-viki.ch/

I like it. You've achieved a very difficult task: taking a "pixel-
perfect" layout and building it on the web in a way that's broadly
pixel-perfect, yet without compromising accessibility. You're to be
congratulated.

The designer has achieved a good result too. They've produced
something that's attractive and doesn't have the usual "Designed by
Geeks" square-box look of the typical standards-based site. Now they
need to relax and not be obsessive about the trivial details you
describe. They've met the useful goals, now they should stop before
aesthetic trivia starts to break code with technically significant
issues.

Congratulations. You've both worked well on this one, you've achieved
both of yoru goals, even though this tend to pull in opposite
directions.


Please take yourself and the designer to the recently posted site
(Massage in Canada) and show them how to achieve such a result. Now
there was a ugly site that needed this sort of design input.

 

[Bergamot]

"fox your fint sizes"

 

[Andy Dingley]

You just don't want to know what's been spilled in this keyboard...

 

[mbstevens]

I disagree with that. IMHO, one of the functions of the "competent
expert in the field" is to _educate_ the consumer.

Hence the "Once you've warned them."

 

[Chaddy2222]

I like it. You've achieved a very difficult task: taking a "pixel-
perfect" layout and building it on the web in a way that's broadly
pixel-perfect, yet without compromising accessibility. You're to be
congratulated.

The designer has achieved a good result too. They've produced
something that's attractive and doesn't have the usual "Designed by
Geeks" square-box look of the typical standards-based site. Now they
need to relax and not be obsessive about the trivial details you
describe. They've met the useful goals, now they should stop before
aesthetic trivia starts to break code with technically significant
issues.

I agree and think that's the problem with a lot of Flash based sites,
they look identicle in any browser, but the functionality and the
useability is just not good at all.

Congratulations. You've both worked well on this one, you've achieved
both of yoru goals, even though this tend to pull in opposite
directions.


Please take yourself and the designer to the recently posted site
(Massage in Canada) and show them how to achieve such a result. Now
there was a ugly site that needed this sort of design input.

Yes, I know what you mean. Although I think graphic design is one of
those things you need to study for quite some time to get an idea of
what works.