Browsers, browsers! Quo vadis?

[El Kabong]

There is a lovely site offering arguments regarding use of scripts to detect
which browser a visitor is using: http://www.quirksmode.org/js/support.html.

While reading the author's essay, it occurred to me that there was actually
a broader subject involved: Why should, or shouldn't, we design for the
lowest browser capability? Now please keep in mind that I do _not_ have a
solidly opinion formed regarding this yet but I would like to have one, a
valid one, if possible.

One point I've considered leads me away from the idea of designing for the
older or more obscure browser versions, since newer popular browsers are
free for the downloading. Therefore, the question becomes, "is the added
time and effort (translate to "expense") to develop universally compatible
pages justified?"

This may seem a moot discussion and perhaps I'm merely looking for
justification for a lazy man's way out, but I'm very interested in your
opinions about this.

Thanks,

El

"Faced with the choice between changing one's mind and proving that there is
no need to do so, almost everyone gets busy on the proof."
Galbraith's Law

 

[Neredbojias]

There is a lovely site offering arguments regarding use of scripts to
detect which browser a visitor is using:
http://www.quirksmode.org/js/support.html.

While reading the author's essay, it occurred to me that there was
actually a broader subject involved: Why should, or shouldn't, we
design for the lowest browser capability? Now please keep in mind that
I do _not_ have a solidly opinion formed regarding this yet but I
would like to have one, a valid one, if possible.

One point I've considered leads me away from the idea of designing for
the older or more obscure browser versions, since newer popular
browsers are free for the downloading. Therefore, the question
becomes, "is the added time and effort (translate to "expense") to
develop universally compatible pages justified?"

This may seem a moot discussion and perhaps I'm merely looking for
justification for a lazy man's way out, but I'm very interested in
your opinions about this.

This has been discussed ad infinitum so perhaps you could edify yourself
more satisfactorily by Googling for past usenet fare on the subject.

 

[J.O. Aho]

One point I've considered leads me away from the idea of designing for the
older or more obscure browser versions, since newer popular browsers are
free for the downloading. Therefore, the question becomes, "is the added
time and effort (translate to "expense") to develop universally compatible
pages justified?"

Much depends on what you want to show to the rest of the internet, if you want
to make a "how to fix your microsoft installation after hard drive crash",
then the visitors would most likely be only MSIE users and you don't have to
care much about other browsers.

If you instead make a page, "how to take best care of your horse", you can't
anymore be sure on that your visitors will be using MSIE, it could even be the
minority browser. On a site like this you should be more aware of how it looks
in different browsers and should at least see to that it's useful in the major
browser families, khtml, gecko, opera and msie.

Most browsers handles HTML4 quite well, so if you get your code validated at
the w3c validator, you can assume it's usable by the major borwsers, it may
not look the same in all of them.

Things to avoid, if you want to make the site usable for as many people as
possible, is flash and jscript (microsofts version of javascript), as those
have a limited support when looking at CPU architecture and operating systems.
CSS, specially CSS2 is poorly supported in older browsers, so it could be good
to be sparse in the use of styles (but the number of people using older
browsers are limited, I wouldn't care too much about them).

I do have a number of different architectures on my own computers, and I use
GNU/Linux both at home and at work, when I do for the web is usually made in
mind to work as well on all my computers and working with wap is even more
difficult as the browsers in the phones has even larger variety on feature
support.

This may seem a moot discussion and perhaps I'm merely looking for
justification for a lazy man's way out, but I'm very interested in your
opinions about this.

Of course it's all up to you what you want to support, but bad support can
lead to that your page to get less visited.

 

[El Kabong]

Of course it's all up to you what you want to support, but bad support can
lead to that your page to get less visited.

Thanks J.O.

Well, maybe I thought someone would just give me a verbal slap on the head
and tell me "Yes, it must fly in all environments." or "Don't worry about
it... nobody else does."

The page with which I am currently concerned is
http://www.tomahawkfallride.com/CustomChopperShow2007.htm. It is supposed to
match exactly a flyer being physically distributed. It works OK in IE7 but
it falls down badly in FireFox. The pages validated nicely for HTML and CSS
so I'm a little confused by the failure in Mozilla. If I fix it for FireFox,
it's going to look like crap in IE7.

Is this something I should ignore or is there a solution?

Thanks again for your patience.

El

 

[dorayme]

The page with which I am currently concerned is
http://www.tomahawkfallride.com/CustomChopperShow2007.htm. It is supposed to
match exactly a flyer being physically distributed. It works OK in IE7 but
it falls down badly in FireFox.

And in Safari ... and doubtless other reasonably standard
compliant browsers. It is a typical example of using the wrong
type of tool to try to mimic a printed page, namely absolute
positioning instead of a PDF. The material is simple enough to
quite do without all the need for any positioning at all. It is
headings and paras and a couple of pics. Why would you not simply
go down the page with these and style the elements lightly to
suit the conveying of the information and text and background
colours and leave it at that?

 

[El Kabong]

Thanks.

I'm not sure the site owner really needs it to match the flyer precisely. I
did upload it as a pdf,
(http://www.tomahawkfallride.com/CustomChopperShow2007.pdf) but it's nearly
a megabyte and we're pretty sure a lot of our target audience is not on
broadband.

So I'll give it a try tomorrow without the positioning.

El

 

[BootNic]

K4a1i.77$145.71@trnddc02
I'm not sure the site owner really needs it to match the flyer
precisely. I did upload it as a pdf,
(http://www.tomahawkfallride.com/CustomChopperShow2007.pdf) but
it's nearly a megabyte and we're pretty sure a lot of our target
audience is not on broadband.

That pdf could be under 200kb, would that make life better?

--
BootNic Friday, May 11, 2007 11:42 PM

All men dream, but not equally. Those who dream by night in the dusty
recesses of their minds, wake in the day to find that it was vanity:
but the dreamers of the day are dangerous men, for they may act on
their dreams with open eyes, to make them possible.
*Thomas Edward Lawrence (of Arabia)*

 

[J.O. Aho]

Thanks J.O.

Well, maybe I thought someone would just give me a verbal slap on the head
and tell me "Yes, it must fly in all environments." or "Don't worry about
it... nobody else does."

The page with which I am currently concerned is
http://www.tomahawkfallride.com/CustomChopperShow2007.htm. It is supposed to
match exactly a flyer being physically distributed. It works OK in IE7 but
it falls down badly in FireFox. The pages validated nicely for HTML and CSS
so I'm a little confused by the failure in Mozilla. If I fix it for FireFox,
it's going to look like crap in IE7.

Skip absolute positions, it never works well if you want to support more than
one browser. If you want to get some ideas how to do things, take a look at
http://css.maxdesign.com.au/index.htm

Your page gets quite unusable if you has enlarged the fonts (120%), regardless
of browser.

 

[dorayme]

Thanks.

I'm not sure the site owner really needs it to match the flyer precisely. I
did upload it as a pdf,
(http://www.tomahawkfallride.com/CustomChopperShow2007.pdf) but it's nearly
a megabyte and we're pretty sure a lot of our target audience is not on
broadband.

So I'll give it a try tomorrow without the positioning.

El

Best not to top post. You could perhaps start with something as
simple as:

body {
background-color : white;
font-family: "Times New Roman", Helvetica, serif;
color: black;
margin: 0;
padding: 0;
}
#main {
padding: 10px;
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
max-width: 35em;
margin: auto
}

#ray {float: right;}


#heading {margin: 5px auto auto auto;}


h1 {

width: 100%;
height: 50px;
background: #000;

margin: auto;
text-align: center;
}


and then for HTML (just get rid of the white line in th heading
in an image editor)


<div id="main">

<h1><img id="heading"src="Ray_Kittel/header.gif" alt="Chopper
Challenge Custom Bike Show Presented by Bubba's Midwest Biker
Productions" height="45" width="530"></h1>


<p><img id="ray" src="Ray_Kittel/RayKittel.jpg" alt="Ray Kittel"
height="238" width="214">In conjunction with the 26th Anniversary
of the Tomahawk Fall Ride, Bubba¹s Midwest Biker Productions is
pleased to announce the return of the most respected and trusted
name in bike show judging in the upper Midwest for the "Chopper
Challenge² Custom Bike Show. Ray Kittel of Ray¹s M/C Show World
will, once again, serve as chief show judge &amp; bike show event
coordinator for this special Tomahawk Fall Ride bike show
competition and special feature at Bubba¹s Big Party! $500.00 in
cash prizes, plus trophies, and bragging rights, will be at
stake. First through eighth place winners will each receive a
trophy plus the following, applicable, cash award:</p>


<p><img src="Ray_Kittel/prizes.gif" alt="1st prize: $150, 2nd
prize: $115, 3rd prize: $85, 4th prize: $60, 5th prize: $40, 6th
prize: $25, 7th prize: $15, 8th prize: $10." border="0"
height="51" width="513">


<p>PLUS: FOUR additional entries will be selected (solely by the
judges) to receive trophies as ¹Judges¹ Choice Honorable Mention²
winners!</p>

<p><img src="Ray_Kittel/entry_fee.gif" alt="" height="22"
width="530"></p>

<p>Chopper shops ­ enter three motorcycles in competition and
receive the fourth entry ­ FREE (limit of four entries per
exhibitor or shop). Register on-site, day of the show, Saturday,
September 15. (Sorry, no pre-registration is available for this
bike show competition.) The show is located at the beautiful
Nokomis Community Park in the township of Nokomis on Business
Highway 51N (County Highway ³L²) Tomahawk, Wisconsin. Winners
will be determined by combining judges¹ scoring with ³spectators¹
choice² voting results utilizing a point system. Bike show
competition will be open to all years, makes, and models of
motorcycles. There is no ³individual class² competition. All
entries from stock to full custom ­ vintage antiques, period
classics, touring bikes, special interest entries, sport street
bikes, trikes, performance machines, mild street customs to
radical choppers ­ will battle it out in head-to-head competition
(shootout style) vying for judges¹ points and spectator votes.</p>

<p>Entry and/or company display signs are encouraged and
welcomed.</p>

<p id="showdates"><img src="Ray_Kittel/show_dates.gif" alt=""
border="0" height="97" width="530">


and go on from here. You can simplify further, improve this too,
but above is roughly if you insist on the pics to match the flyer.

 

[JD]

That pdf could be under 200kb, would that make life better?

Not for people who think PDF viewers are utterly tedious, such as me.

The OP would be better off creating a nice, semantic HTML page for the
content, and maybe offering the PDF leaflet as an optional download for
printing purposes.

 

[dorayme]

That pdf could be under 200kb, would that make life better?

Not for people who think PDF viewers are utterly tedious, such as me.[/QUOTE]

The idea is that it would make life better for those whose
connections are slow and limited. How do you look at pdfs that
are presented on websites? It is tedious to open a reader, but
not _so_ tedious to see the PDF in the browser window itself.

 

[J.O. Aho]

Not for people who think PDF viewers are utterly tedious, such as me.

The idea is that it would make life better for those whose
connections are slow and limited. How do you look at pdfs that
are presented on websites? It is tedious to open a reader, but
not _so_ tedious to see the PDF in the browser window itself.[/QUOTE]

PDF gets larger than the HTML+Images -> longer load times
PDF reader has to be started by the browser -> longer time before displayed
PDF reader has it's own toolbars -> Smaller display area

PDF is great if you want to print something, but IMHO poor substitute to a
HTML page.

 

[El Kabong]

and go on from here. You can simplify further, improve this too,
but above is roughly if you insist on the pics to match the flyer.

I really appreciate the work you put into your reply, but I also did not
want to merely copy your work and remain in the dark as to the "why's" and
"how's" of the styling. I will go back and review your suggestion to learn
some new stuff, for sure!

So I went back to my roots and placed objects _as_if_ they were in a table.

It works well in IE7 and FireFox but I have no idea about all the "brand x"
browsers. Guess I have to get busy downloading them but I only have a PC.
How does it look in Safari? Of course it loses its resemblance to the flyer
when the text size is changed in FireFox. (It doesn't change in IE7.)

Here's the link again:
http://www.tomahawkfallride.com/CustomChopperShow2007.htm

And Thanks again.

 

[Jonathan N. Little]

Not for people who think PDF viewers are utterly tedious, such as me.

The idea is that it would make life better for those whose
connections are slow and limited. How do you look at pdfs that
are presented on websites? It is tedious to open a reader, but
not _so_ tedious to see the PDF in the browser window itself.
[/QUOTE]

I have to right-click and download. And I get quite irritated when folks
use PDF in place of HTML and I click on a link with not PDF warning,
and I don't notice the url in the status bar until after puzzle over why
I been watching a blank page and a throbber spinning for the last 5
minutes!

 

[Jonathan N. Little]

Here's the link again:
http://www.tomahawkfallride.com/CustomChopperShow2007.htm

Well you could finish the job by:


1) Replace the:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

2) Remove *ALL* the attributes CENTER, BORDER, HSPACE, VSPACE, ALIGN in
documents


3) Then give Ray's picture "RayKittel.jpg" the ID "ray" and add

#ray { float: right; margin: 0 0 .5em .5em; }

to your stylesheet

4) And for the RK Logo "RK_logo.jpg" add the ID "rk" and add

#rk { float: left; margin: 0 .5em .5em; 0 }


5) Remove the W3C logos because bikers don't give a rat's *** about the
W3C! ;-)

 

[Beauregard T. Shagnasty]

5) Remove the W3C logos because bikers don't give a rat's *** about
the W3C! ;-)

Ahem!

(but yes, remove the logos.)

 

[El Kabong]

Ahem!

(but yes, remove the logos.)

Guess I was just too proud of myself. They're going.

I'll work on the other stuff later, but can you tell me why changing the
DOCTYPE is a good idea? (I'm new to this "validation" stuff so I'm not being
facetious.)

El

 

[John Hosking]

I'll work on the other stuff later, but can you tell me why changing the
DOCTYPE is a good idea? (I'm new to this "validation" stuff so I'm not being
facetious.)

See, e.g., http://hsivonen.iki.fi/doctype/ . The connection between
doctype and validation is different from (and secondary to) the
usefulness of avoiding quirks mode (by selecting a doctype).

 

[dorayme]

PDF gets larger than the HTML+Images -> longer load times
PDF reader has to be started by the browser -> longer time before displayed
PDF reader has it's own toolbars -> Smaller display area

PDF is great if you want to print something, but IMHO poor substitute to a
HTML page.

All good points that are really besides the particular point that
a 200k pdf is better for a dial up user than a 1000k pdf.

Might as well here mention a qualification to your "poor
substitute" point. From the perspective of the person who has no
html/css skills and careful with dough, it is an excellent
substitute for many things (like newsletters). And I don't know
if you use something like Adobe Reader to kick in via a plugin
into the browser or what but on a Mac there is a rather
lightening fast alternative without the bloat.

 

[dorayme]

I have to right-click and download. And I get quite irritated when folks
use PDF in place of HTML and I click on a link with not PDF warning,
and I don't notice the url in the status bar until after puzzle over why
I been watching a blank page and a throbber spinning for the last 5
minutes!

Jonathan, I share most of your irritations on this one. But they
are less than you might believe on a Mac with a certain tiny
plugin reader. Single click, quick show.

I have to say words that modify all criticisms of pdf's "on"
websites to justify my allowing some of my clients, (even
introducing them to the notion!), to do this. The alternative
would be work that they could not justify to pay for and, really,
simply would not. I would rather a client happy than frustrated,
me being the Christ in all of this. You see, I fancy the role. I
know, it is a sign of madness. I still like it.