[thelist] Site Critique Please (thereformist.com)

martin.p.burns at uk.pwcglobal.com martin.p.burns at uk.pwcglobal.com
Wed Oct 24 04:19:30 CDT 2001


Memo from Martin P Burns of PricewaterhouseCoopers

-------------------- Start of message text --------------------

Hi Paul

I understand the point of making allowing the user to have
control over fonts, but it's not just a question of looking 'not quite
as good' on a Mac; em-sized fonts are pretty much unreadable.

So for a small gain for Windows users, you have a near-100%
loss of usability for Mac users, and that's not a happy balance.

You seem to be running Apache, so here's a possible XSSI
way of doing this:
<tip type="XSSI in stylesheets">
Rather than serving different whole stylesheets for different platforms
which will lead to all kinds of version control nightmares, why not
have a single CSS file, which switches font-sizes for different platforms
within it?

You can do this with Apache's XSSI - basically, Server Side Includes
with added variables and conditionals.

You can get CSS files being parsed by adding them to your
.htaccess file:

Options Includes
AddType text/x-server-parsed-html .shtml .css

(more info at
http://evolt.org/article/A_Cheesy_htaccess_Tutorial/18/226/index.html )

and then do the following to your CSS file:

At the start add:
<!--#if expr="${HTTP_USER_AGENT} = /Windows/" -->
    <!--#set var="small" value=".7em" -->
    <!--#set var="normal" value=".8em" -->
    <!--#set var="large" value="1em" -->
    <!--#set var="very_large" value="1.2em" -->
    <!--#set var="huge" value="1.4em" -->

<!--#else -->
    <!--#set var="small" value="10px" -->
    <!--#set var="normal" value="11px" -->
    <!--#set var="large" value="12px" -->
    <!--#set var="very_large" value="14px" -->
    <!--#set var="huge" value="18px" -->

<!--#endif -->

and then in the rest of your stylesheet, drop in the
variables like so:

li {
   color: black;
   font-size: <!--#echo var="normal" -->;
   line-height: <!--#echo var="very_large" -->;
   margin-bottom: 5px; }

p {
   color: black;
   font-size: <!--#echo var="normal" -->;
   line-height: <!--#echo var="huge" -->; }

As it's SSI, it has a much lower overhead than firing up the CGI
and a Perl interpreter.
</tip>

All you need to do then is quote the one CSS file, as you've
done already:
<style type="text/css"> @import "thereformist.css"; </style>
and it all works beautifully.

Cheers
Martin



Sent by:  thelist-admin at lists.evolt.org

To:   thelist at lists.evolt.org
Subject:  Re: [thelist] Site Critique Please (thereformist.com)


I used "em" sizing for the fonts so the viewer can adjust it if desired. I
pondered about the sizing because it looks quite bigger on a Windows
machine. Given the choice between having it look better for Windows or Mac,
I went with the majority rule.

> From: Jamie Bakum <jamie.bakum at circle.com>
>
> Yikes! Type too tiny!
>
> Mac OS9.1, IE5, 1280x960



--------------------- End of message text --------------------

This e-mail is sent by the above named in their
individual, non-business capacity and is not on
behalf of PricewaterhouseCoopers.

PricewaterhouseCoopers may monitor outgoing and incoming
e-mails and other telecommunications on its e-mail and
telecommunications systems.
----------------------------------------------------------------
The information transmitted is intended only for the person or entity to
which it is addressed and may contain confidential and/or privileged
material.  Any review, retransmission, dissemination or other use of, or
taking of any action in reliance upon, this information by persons or
entities other than the intended recipient is prohibited.   If you received
this in error, please contact the sender and delete the material from any
computer.





More information about the thelist mailing list