Comments on Message for Non-CSS Browsers

Posted: Wed Dec 31, 2003 7:39 pm (20 years, 3 months ago)

I've been a reader of the site since its days on F2S. I love the new design, but I have a few comments on it.

Hidden in the new design, there is a message for people using browsers that do not support CSS. The source code for the message is as follows:

Code:

<table border="1" width="98%" align="center" bgcolor="#ffffff" id="oldbrowser">
<tr>
   <td align="center">You are using a browser which is not compatible with CSS (for more information, see <a href="/tutorials/css/basics.php">Tara's tutorial</a>).
   Because of this, it is possible that our website may not appear
   correctly in your browser. We apologise for the inconvenience, and
   recommend you visit <a href="http://www.webstandards.org/act/campaign/buc/" target="_blank">WaSP</a> for more information.<br /><br />
   </td>
</tr>

</table>

First off, why use a table for this message? There's no real reason to. The point of this message is that the site may not look perfect if you use a non-CSS browser, so why worry about using a table to style that message? It would be easier, cleaner, and more logical to use a p tag.

Secondly, the message links to the Web Standards Project's Browser Upgrades Page. This is a good idea, except that the Web Standards Project has discontinued their Browser Upgrades Project, and they no longer want webmasters to link directly to that page. Since 4WebHelp is a web-related site, why can't we have our own browser upgrade page on our own site? I'd be willing to help write the page if needed.

Finally, many people argue that there are a lot of cons to an upgrade-your-browser message. It shows up in your Google results, it is redundant on every page, and people that use Custom User Stylesheets will see the message. I use a simple PHP script to almost eliminate this problem. I show the upgrade message on the first page of my site that a user comes to. If the user was refered to a page on my site by another page on my site, they have already been shown the message once, so I don't show the message again. Of course, users with CSS browsers won't even see the message on the first page.

The new design is great, and hopefully we can aim to be one of the most standards-compliant sites on the web.

Thanks,
taestell

Team Member Joined: 06 Jan 2002 Posts: 2564

Hi taestell,

Quote:

First off, why use a table for this message? There's no real reason to. The point of this message is that the site may not look perfect if you use a non-CSS browser, so why worry about using a table to style that message? It would be easier, cleaner, and more logical to use a p tag.

This message was actually there on the old design, where the page's background colour was set in the <body> tag, hence the need to have a white background for the warning message (black on purple doesn't show well Laughing

). However, since the new design has the background colour set in the style sheet I think it's safe to use a <p>, as you said.

Quote:

Secondly, the message links to the Web Standards Project's Browser Upgrades Page. This is a good idea, except that the Web Standards Project has discontinued their Browser Upgrades Project, and they no longer want webmasters to link directly to that page. Since 4WebHelp is a web-related site, why can't we have our own browser upgrade page on our own site? I'd be willing to help write the page if needed.

Thanks for pointing this issue out to me, I was not aware that WaSP had discontinued the project. However, as they say themselves, I'm not sure if such an aggressive campaign is needed anymore. Why not link to a page which lists browsers which are compatible with CSS, and change the message to something like "We apologise for the inconvenience, and recommend you upgrade your browser to one which is compatible with CSS [link]"?

I found your blog link quite interesting. I had never thought about the message very much (as you may have gathered Very Happy

).

I thought custom stylesheets were applied on top of existing ones, which means that the message will be shown unless the user says otherwise. Or am I wrong? It's just that that's what makes most sense to me...

As the post says, you can eliminate the Google problem (although Google shows the part of the page which is relevant to your query, and it is rare for a user to search for anything contained in the warning) by using an image, which I'm willing to do.

I guess your hack works in response to the other cons though Smile

, so I'll work on that.

Team Member Joined: 06 Jan 2002 Posts: 2564

I've applied a hack to get the message to only appear on the first page. Please let me know if it works for you Smile

.

Posted: Wed Dec 31, 2003 9:34 pm (20 years, 3 months ago)

Quote:

I've applied a hack to get the message to only appear on the first page.

The hack works for me. I don't know exactly what method you used to do this, but my code always checked the HTTP_REFERER string, and if it contained my own site's URL, it hid the message.

Quote:

Why not link to a page which lists browsers which are compatible with CSS, and change the message to something like "We apologise for the inconvenience, and recommend you upgrade your browser to one which is compatible with CSS [link]"?

That's usually what I do for my own sites. I am always sure to mention that they can upgrade their own browser or choose a different modern web browser, so that less savvy web users know that they have many options. Also, I tell the good points of every browser, like how Opera is a small-weighted download for users on dial-up, or that Firebird contains the most standards-compliant rendering engine, etc.

Quote:

I thought custom stylesheets were applied on top of existing ones, which means that the message will be shown unless the user says otherwise.

The only browser that I've ever used custom stylesheets with, Opera 7, applies them over top of the raw HTML of the page, without the page's already-existant stylesheets.

Quote:

As the post says, you can eliminate the Google problem [...] by using an image, which I'm willing to do.

Using an image introduces another standards-compliance issue, and I don't think that Google results will be a problem now that you applied the PHP hack.

If you would like me to help in the writing of your browser upgrades page, I would be willing to do so. I've written many in the past.

Thanks for your quick reply and PHP hack!

--taestell

Team Member Joined: 06 Jan 2002 Posts: 2564

taestell wrote:

Quote:

I've applied a hack to get the message to only appear on the first page.

The hack works for me. I don't know exactly what method you used to do this, but my code always checked the HTTP_REFERER string, and if it contained my own site's URL, it hid the message.

Yes, that's exactly what I did Smile

.

Quote:

If you would like me to help in the writing of your browser upgrades page, I would be willing to do so. I've written many in the past.

That would be great Smile

.

Posted: Thu Jan 01, 2004 3:03 am (20 years, 3 months ago)

I went ahead and made a 4WebHelp-ized version of my Browser Upgrades page and put it online for you at http://oldf2s.f2g.net/temp/4webhelp/upgrade.html. If you want to use that page, here is the [updated] HTML source code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>4WebHelp: Browser Upgrades Page</title>

<link rel="stylesheet" href="./screen.css" type="text/css" />

</head>

<body>

<h1>Upgrade Notice</h1>

<p>You probably arrived at this page because your web browser is outdated and can not handle most of the technology used on our site. Some of these techologies, like <acronym title="Cascading Style Sheets">CSS</acronym>, have been around since 1996 (see <a href="http://www.4webhelp.net/tutorials/css/basics.php">Tara’s Tutorial</a> for more information). Sites like <a href="http://wired.com/">Wired News</a>, <a href="http://espn.com/">ESPN</a>, and <a href="http://alltheweb.com/">All The Web</a> use these standards, and most people use web browsers that can handle them.</p>

<p>No need to worry, though. To take full advantage of the modern Internet, including this site, all you need to do is download a modern web browser. You can either upgrade to the latest version of the web browser that you use now, or choose a different web browser.</p>

<p>The following browsers can handle this technology correctly:</p>

<ul>
<li><a href="http://mozilla.org/">Mozilla</a> (1.5 or higher)</li>
<li><a href="http://mozilla.org/products/firebird/">Mozilla Firebird</a> (a slimmed–down version of Mozilla with fewer features)</li>
<li><a href="http://opera.com/">Opera</a> (for Windows, 7.2 or higher; for Mac, 6.0 or higher)</li>
<li><a href="http://apple.com/safari/">Safari</a> (Mac only, 1.0 or higher)</li>
<li><a href="http://netscape.com/">Netscape</a> (7.0 or higher)</li>
<li><a href="http://microsoft.com/windows/ie/default.asp">Internet Explorer for Windows</a> (6.0 or higher)</li>
<li><a href="http://microsoft.com/mac/products/ie/ie_default.asp">Internet Explorer for Mac</a> (5.0 or higher)</li>
</ul>

<p>If you are using AOL or Compuserve, make sure you have updated to the most recent version.</p>

<p>If you do not wish to upgrade your web browser, you can <a href="http://www.4webhelp.net/" onclick="history.back(1); return false;">go back</a> and view our site without visual style. To learn more about web standards, visit <a href="http://webstandards.org/">webstandards.org</a> or <a href="http://w3.org/">The World Wide Web Consortium</a>.</p>

</body>

</html>

And the accompanying CSS:

Code:

body { background-color:white;
   color:black;
   font-family:georgia,serif; }

p { line-height:1.3em; }

a { color:blue; text-decoration:underline; }

a:hover { color:red; text-decoration:none; }

abbr,acronym { cursor:help;
      border-bottom:dotted 1px; }

By the way, I think its best to have the browser upgrades page look plain (like the link above shows), and not just look like another page of your site, because most people viewing it aren't going to have CSS enabled anyway.

Okay, that should fix up all of the problems with that. Thanks for being so quick at fixing this up, and I hope this helps. Smile

Thanks again,
taestell

Team Member Joined: 06 Jan 2002 Posts: 2564

Hey, that's great!

Thanks for taking care of it.

A few comments:
- replace "old" with "outdated", it does sound a little patronising Smile

- replace "and can not handle the technology used on this page" with "and cannot handle most of the technology used on our site"
- add, after "CSS", "(see Tara's tutorial for more information)"
- replace "You may" with "You can" - just sounds less like an order like that Smile

- replace "upgrade to the newest version" with "upgrade to the latest version"
- replace "The following browsers can correctly handle this technology:" with "The following browsers can handle this technology correctly:"
- replace "Mozilla" with "Mozilla (and FireBird, a slimmed down version of Mozilla)"

Posted: Thu Jan 01, 2004 6:39 pm (20 years, 3 months ago)

Okay, I fixed the page and uploaded it to http://oldf2s.f2g.net/4webhelp/upgrade.html. If you want to take that page and put it on your server, download that page and the stylesheet at http://oldf2s.f2g.net/4webhelp/screen.css. Or if you want to link to the page on my server, just link to http://oldf2s.f2g.net/4webhelp/. Smile

Thanks,
taestell

Team Member Joined: 06 Jan 2002 Posts: 2564

Thanks for making the changes. I've now uploaded the page Smile

.

Posted: Fri Jan 02, 2004 12:04 pm (20 years, 3 months ago)

Daniel wrote:

I've applied a hack to get the message to only appear on the first page. Please let me know if it works for you Smile

.

Doesn't work for me. I get shown the message on just about every page.
(Using Links on fbsd Smile

)

P.S. Links is a text browser (better than Lynx) Smile

Team Member Joined: 06 Jan 2002 Posts: 2564

Not much I can do really. I'm using the $HTTP_REFERER variable, which is the only one available to me (other than $HTTP_X_FORWARDER_FOR or whatever it is, I guess).

Posted: Fri Jan 02, 2004 12:48 pm (20 years, 3 months ago)

That HTTP_X_FORWARDER_FOR may be better, as I believe Norton Firewall blocks the HTTP_REFERER var.

Team Member Joined: 06 Jan 2002 Posts: 2564

Yes, I'll try using both of them. I knew Norton didn't set the referrer, but does Norton set that second variable?

Edit: Made the change.

Posted: Fri Jan 02, 2004 12:54 pm (20 years, 3 months ago)

TBH, I don't know.

Posted: Fri Jan 02, 2004 1:12 pm (20 years, 3 months ago)

what if you set a cookie as well as checking the referer? then it (usually) won't show on return visits either.