OT: Web Design - Catering to Everyone

[arashi]

I just completed a 10 month web design project, and as I expected some people are unhappy with it. The people who are unhappy are very few, but they are very vocal. The people who are unhappy also happen to use Netscape 4 as their default browser.

The reason they're unhappy is the new design caters to people who use a version 6 browser (IE 5.0+, NS 6.0+, ) and not users of the version 4 browsers. Basically what happens is when you go to the page with an older browser, it forwards the user to a text-only page that, well, it's text-only and doesn't look very nice, but it does the job.

Now it was never our intention to piss people off, nor did we choose to neglect NS4 users. The decision to force NS4 users to the text-only page was made after a lot of thought and discussion on the part of my department. We felt that in trying to cater to everyone, we neglected the vast majority of people who have are up-to-date. I won't quote numbers (because they vary from site to site), but the percentage of users using NS4 and other older browsers is very small compared to all other users. The decision was made with a heavy heart, because we knew that some people wouldn't agree.

I foresee many months of complaints from the vocal minority, but I just have to remember that there are many more people who appriciate newer, better things, and even if they're silent, they're still there. Personally I feel that there comes a point when you have to move on, otherwise you never grow. It took me a long time to move from DOS to Win95, so I can appriciate growing pains, but as a developer I think sometimes you have to make the hard decision for people. They may not like it, they may leave you in favor of someone else, but in the end I think you're probably better off because you end up with a better product.

Has anyone else run into similar growing pains when their designs? If so, how did you deal with them? Do you try to cater to everyone, or do you cater to the majority? Have you found a good balance of the two?

I'm really curious to hear about other people dealing with similar issues, because I think it's going to continue to be an issue for a very long time as technology continues to advance.

- Arashi

[rozallin]

I visited both designs of the site using various browsers and I must say that I think you've done a good job.

Designing a website that "looks good" AND works effectively is far more complex than most users seem to realise; you have to take into account that there are hundreds of browser versions in use, many different platforms, user preferences that vary greatly and over which you have no control, different window sizes, varying connection speeds... the list goes on.

But I find the best two ways to approach this are either to do what you have done, and create multiple versions of the site and allow the user to choose which version they would like to see, or, to use a buzzword, let the pages "degrade gracefully" - take advantage of the latest technologies that the most recent versions of browsers feature, but don't use them to carry the crucial message or functionality of the site. This way the site is fully functional to those using text-only or older versions of browsers, but gives those using the most up-to-date browsers that little extra, kind of like icing on a good-tasting cake.

Good web design is not about using snazzy bells-and-whistles; it is about making sure that the site's architecture works and allows people to get to the content or whatever they are there to view, and makes this information accessible to everyone.

Bear in mind that it is better to have people complaining about the asthetics of the site than having people complain about not being able to reach it at all.

John Allsopp has written a thoughtful essay which deals with the issue: The Dao of Web Design. It's a rather interesting read and gives advice about how web designers should approach the problem.

I hope this helps.

[perrin]

I don't want to sound like one of these luddite users who are making your life difficult, but looking at the site I think I can understand why they're upset. You seem to be causing a lot of trouble for older browsers in order to do that trick where you update part of the page without actually reloading. I can't see how this is worth it, when just going to a new URL with the content showing would work just as well. In fact you're breaking common features of every browser, like bookmarks and mailing URLs to people (there is no way to mail someone a link to your "alumni & friends" page, for example).

A text version of a site is always welcome, but the one you provide here isn't very useable. Why is this all on one page? Why isn't it split into multiple URLs? It may be a bit harder, but it would make much more sense.

Have you noticed that all of the most successful sites work in older browsers? These fancy so-called "DHTML" features just don't add that much value and they shut out some of your users. I don't think they're worth it.

[Hero Zzyzzx]

Hear Hear!

What elements on this page are so important that you HAD to create it so it wouldn't work in NN4.x? I'm just not seeing it, but I guess I always think functionality first, form second. Why aren't your text links underlined? All the usability studies show that the first thing folks look for when scanning a page is underlined text.

Great job, but I'm curious as to what was so ornerous about getting this page to work mostly correct in NN4.x. . .

Oh, and great use of accesskey attributes- I LOVE those freekin' things!

-Any sufficiently advanced technology is
indistinguishable from doubletalk.

[thraxil]

first, congratulations on making the site xhtml compliant!

i also work for a university. our network people have standardized on netscape 4.02 or something absurdly old like that and refuse to upgrade (apparently that was the last version of netscape that could be downloaded as just the browser; everything since is 'communicator' and comes with an email client, etc. and they have some objection to that). so we tend to actually see a pretty high percentage of NN4 users. boy does it suck.

i've had more success by being very strict about keeping sites simple, marking them up semantically, using css for all the layout and formatting and using a couple basic tricks. i think you've made the right decision in acknowledging from the beginning that NN4 will not display the same page the same way as newer browsers and it isn't worth it to even try.

we've generally avoided having alternate versions of the site for different browsers though. that turns into a maintenance problem and we just don't have the resources to do that.

here's the recipe i use:

• content is marked up semantically in xhtml. tables are avoided unless absolutely necessary. on the first pass through, tables aren't used at all (well, except for tabular data). divs and spans with class and id info are used liberally to group logically connected stuff. no thought whatsoever is put into how things will be layed out yet.
• already, you've got a site that should be pretty boring looking but will get any information you need across and will work in any browser.
• two elements are added to the <head>:
  • <link rel="stylesheet" type="text/css" href="safe.css">
  • <style type="text/css">@import "unsafe.css";</style>
• safe.css includes things like colors and fonts. basically the stuff that works even in NN4 without breaking things.
• since NN4 doesn't understand the '@import' syntax, it won't load unsafe.css but newer browsers will. so in there, you put positioning rules, styles for form elements, and other more advanced stuff that NN4 is too stupid to deal with.

the result is a page that works in every browser, looks good in the ones that support css fully, and degrades in NN4 about as well as could be expected, with the right colours and fonts (often important for "branding") but maybe a more linear layout. and you don't have to maintain two seperate versions.

the main downside is that most designers have spent years learning table-based design and tricks for making it work and their intuitions about how to design web-pages have been very subtly influenced in this direction. many otherwise excellent designers really can't think about web-design without implicitly thinking in terms of table layouts. divs + css are really at least as powerful a layout tool but they require a different mindset to work with. different kinds of layouts are difficult or easy in each style. so this is usually a problem unless your design team is unusually open-minded.

if you can't entirely eliminate tables, you can at least go to a second-best approach where you use tables for layout and css for all other formatting. this sacrifices some of the advantages of semantic markup but is usually the most practical approach.

if you absolutely must have alternate versions of the site, it's good to at least use some kind of system, either a CMS or XML with multiple XSL views to allow you to maintain the content in only one place and have all the alternate versions automatically updated. cocoon and axkit are my preferred tools for this kind of thing.

anders pearson

[rattusillegitimus]

The CSShark Answers FAQs site has some good information on using precisely this recipe to make a site work in both NN4.x and more modern browsers. It has plenty of tips and tricks and mentions the common pitfalls that can break cross-browser compliance. I usually have a browser window open to the site when I'm designing a new layout.

--
$rattusillegitimus = Eliza::PerlMonks::Robot::new()

[dws]

Basically what happens is when you go to the page with an older browser, it forwards the user to a text-only page that, well, it's text-only and doesn't look very nice, but it does the job.

Instead, you might forward Netscape 4.x users to http://home.netscape.com/ where Netscape themselves will advise NS 4.x users to upgrade. (Or, include a "Please Upgrade" notice on the page you're redirecting them to.)

Progress almost always hurts those who're so comfortable in their rut that they've decorated it. But at some point, the burden of supporting old stuff is just too great. My grandmother was really unhappy at having to give up her dial phone.

Consider that their vocal grumbling is more a wail of "Why do things have to change?" that just happens to be directed at you.

[Nemp]

As far as I can see at the end of the day you did the right thing for your department and if users are unwilling to upgrade (as even Netscape recommend from reading dws's reply above) then it is their problem. You are not excluding the data from them - in fact you made the effort to provide the text only version.

It is nearly always impossible to cater to everyone's needs unless you have a very small user base (or a very malleable one that accedes to your every desire but I don't think that's very likely!!). It has always been my opinion that you should cater only to the audience you choose to cater for. I don't mean that I try to exclude users who won't or can't upgrade to the necessary standards, (tools, web-browsers or whatever) as indeed you haven't by providing the text-based version, but I won't specifically provide the glitzy "good-looking" version to people who aren't my target audience.

Of course there is a lot of give and take involved but once you decide on your platform that's what it is and people should live with it - and be *VERY* happy you went to the effort of providing a version that they could still view - even if not so eye-catching as the original.

I try to cater to the majority... as great a common denominator as possible... but that's just me :)

Just my $.02
Neil

[simon.proctor]

Just a minor point about all those people who are blind, disabled or in someway physically impaired that may actually want to find out about the information you present as well.

For many the internet is a means of gaining greater self reliance and although you have provided a text only version I sincerely doubt its usability.

You've made an effort so far but your text only page doesn't validate against Bobby. I also note that once on the text only page, all linked pages are not text only. This, to me, seems to miss the point (but thats just my opinion :) ).

Have your department considered purchasing a few screen readers (etc)?

[FoxtrotUniform]

In my experience, most of the people who will evaluate your work (and decide to buy your product, or not) will be running fairly up-to-date browsers with Javascript enabled and seven hells' worth of plugins. If you want to sell something, make it shiny. Shunting users of "incompatible" browsers to a spartan page with few compatibility issues makes better business sense than trying to make your main site as compatible as possible (and even ivory tower theorists like me can't do that all the time). Whether you'd be better off simply ignoring the luddites is probably better determined by someone with access to your server logs and accessibility policy.

Personally, I'd be much happier using the simpler, text-based site; congratulations on an excellent job. (Of course, this means that I disagree with your assertion that a better product requires cutting edge technology, especially in this context, but you can't have everything.)

That said, I'm annoyed by your implication that I'm some sort of archaic, stunted reactionary for using Netscape 4.x instead of, say, Mozilla. In fact, the only three browsers that my system can run at any acceptable speed are Dillo, lynx, and telnet. Netscape 4.x is the least unacceptably slow of all the rest, so it's what I go with most of the time. If you'll send me a cheque for a new computer, I'll be happy to, as you say, move on and start to grow.

--
F o x t r o t U n i f o r m
Found a typo in this node? /msg me
The hell with paco, vote for Erudil!

[ignatz]

I hate to say it, but I think that they might have a point. Sites built with the "Designed for the latest cutting edge technology that we like; if you don't have it, upgrade or F off even though you know that everytime you upgrade something on your windows machine it screws everything up" school of web design are going to have to brace themselves for the fact that somewhere off in the ether there's a minority that's going to be pissed. You just get the added bonus of seeing them in person. I wish that more web developers got a chance to meet the people who can't use the stuff that they build. I can just see a nice encounter between flash only site developers and a room full of blind users.

Back in the day when people payed me too much money to build the damn things, I created seperate templates for Lynx / IE3, Netscape 4, and bleading edge browsers. A lot of times we'd also have to support HTML templates for various Email clients for press releases and mailing lists and the like. (makes dealing with quirky browsers seem like child's play. At least they've got some documentation.)

When justifying the work that it took to support these ancient machines I had a whole speech prepared about being a business and how turning away even 1% of your customers can mean the difference between success and chapter 7. I'll spare you.

Personally, I think that it would be good for you to learn how to make the site work for these people. Yes, it is a headache at first, but you get used to it. Just another skill to put on your toolbelt, although a very schizoid/psycho skill. Hell's bells, compared to dealing with all the BS of cross platform GUI development, it's a walk in the park.

()-()
 \"/
  `                                                     

[LTjake]

The only REAL requirement that your page should meet in old browsers is that it be useable (aka accessible). Too many people try to make the page identical in each and every browser and add versioning (ie. different streams for v4, v5, etc browsers). This is considered bad, on many levels.

Often, when talking about this subject I direct people to this article on evolt.org. As you can see, even in lynx, the page is usable.

[rjimlad]

My approach is with features that they really should have had in the first place (eg HTML 4.01, CSS1 compliance), make no compromises - if they have an old browser, then they'll *see* that they need to upgrade. It's much easier to say "What? You can't see that? Oh yes, that's because your browser doesn't fully support HTML 4.0" than tell people that you don't want to support them.

As for features which they don't necessarily have to have - eg frames, javascript, images, embedded sounds, shockwave - I make sure there's always a valid fallback for compatibility reasons. For example:

• You might use the content of an 'object' tag to provide similar functionality (or provide a link to somewhere that does) to whatever the <object> tag refers to (eg, a sound, swf, an image).
• You could set the 'alt' attribute of any <img> tags to something descriptive (ie, not "") and set background colours of the surrounding element (wrap it in a
  if you need to) to match an approximation of the image.
• Set CSS attributes to be as compatible as you can without compromising the style they describe, and use HTML style attributes to take up the slack if possible/necessary
• If you require javascript for navigation, add in an HTML equivalent (eg, a form with drop-down menus and a submit button), and use body.onload to hide (or empty) it for those that do support javascript; also provide both href and onclick attributes for javascript popups - compliant browsers should hit 'onclick' first.
• Use <noframes> and <noscript>.
• Test your site in different text sizes. Consider specifying everything's size in 'em' not 'px'.

And of course there are a handful of near-zero-impact workarounds for minor lack of capabilities, eg provide XHTML files as text/html and don't include any <?xml ?> type tags.

...all of which largely covers accessibility rather than compatibility. It's not too important that your project be compatible; it is critical that your project be accessible. On the same subject, see the W3Cs take on accessibility

Saying all that, I have in the past compromised on certain bugs in *current* browsers, eg MSIE6s mishandling of <button>, 'fixed' by on-the-fly conversion to an <input type='hidden'><input type='submit' onclick=''> pair. I really hate browser bugs.

In any case never, ever compromise on standards or you'll quickly find that others (browsers) aren't supporting you (your site) any more.

[theorbtwo]

Consider that the population of web browsers is both gaining features and loosing it. It's gaining featues in that more people are running newer browsers, yes. But more people are browsing the internet over cell phones, PDAs, and other devices that may have spotty or no support for thigs like js, frames, tables, and even images, and may be on connections all the way down to 14.4kbps or so.

---

Warning: Unless otherwise stated, code is untested. Do not use without understanding. Code is posted in the hopes it is useful, but without warranty. All copyrights are relinquished into the public domain unless otherwise stated. I am not an angel. I am capable of error, and err on a fairly regular basis. If I made a mistake, please let me know (such as by replying to this node).

[Zaxo]

How does it do in lynx?

What does not degrade gradually?

After Compline,
Zaxo

[fglock]

I always have Netscape 3 around for testing my pages. It is a lot more difficult, but I'm sure they will display anywhere. Testing in Lynx is a good idea, too.

[grinder]

That reminds me of something Jamie Zawinski wrote about web design. Each time I read it I go "Yay jwz!".

In his own words:

" Too-clever-by-half sites that don't work at all. Usually these sites come up with a completely blank page, and if I do ``View Source,'' I can see the nature of their evil. [...] But that's just fine -- because sites that do this invariably ALSO DON'T HAVE ANY CONTENT ON THEM."

It's a rant well worth reading.


print@_{sort keys %_},$/if%_=split//,'= & *a?b:e\f/h^h!j+n,o@o;r$s-t%t#u'

[Ryszard]

In my opinion it depends on your pholosophy.

One one hand your users are the stakeholders in your application. If they find it too hard to use your application, they wont, or they'll make life difficult. The end game in this scenario is generally lost time due to extra time spent working with the minority.

OTOH, it is impossible to please everyone, and using the latest "reasonable" technology often means your project will come to fruition quicker, and be more maintainable due to the absence of "legacy" code.

OTOH programming at the lowest common demoninator will cover everyone, but may not be as sexy as it could be.

In my experience, the people who scream teh loudest are the people who are in their own little rut and dont want to change. In these cases I personally (as the developer) coach them thru' the "difficult times". It makes them happier, and the devel/support team happier.

I'm generally of the opinion of surveying the users of your system, being careful to get a broad cross section, and get each department to sign off the design. In cases where a consensus cant be reached, careful thought is given to the design, which is then documented (outlining the reasons "why not") then mandated to the users via management. I have to say I'm lucky enuff to have strong management to support decisions reached...

Two words(tm): careful planning.

[George_Sherston]

I recently completed a fairly small job which should have been straightforward, but which took a lot longer than I wanted it to because the client uses NS4, and out of some masochistic aspiration to professionalism I set out to write a site that would look good, and more-or-less the same, in NS4, NS6+ and IE5. It was more of a pain in the neck than I thought, particularly because I like CSS. I was working with a pretty standard format for each page in the site, though.

A thing I thought of doing, but too late for it to make sense to change horses midstream, was to have two or more sites, and a js browser-sniffer to send users to the right one. That would have been great because then I could have optimised the design for each individual browser - as it is, different aspects look not quite right depending on your platform. This would also have been a good fit because the content site (http://www.cookeassociates.com) gets managed through a MySQL db (which, as well as backing up, generates the content tree you see on each page), so it would have been easy to output the site through several different templates, one per browser. Maybe next time...

§ George Sherston

[iza]

know that phrase : "simple is beautiful" ? i mean, people go on the internet to get INFORMATIONS - not to see blinking text, not to watch flashy colors, not to have to download the latest plugin, the latest browser, the latest this or that .... i've personnaly made quite a few web site, that are both BACKWARD & FORWARD compatible, cross browsers (totally, i test on lynx as well !), and that don't require any redirection, and that people are pleased with (coz they quickly find what they are looking for).
The point is to make that understand from the marketing department. They always feel like : the more colors, the more different fonts & text size, the more new plugins ... is the best. A trick i found is to make customers testing the web site. You'd be surprised how they prefer clear and simple design. Then you can go back to the marketing dept and prove them that simple is the way to go, else customers don't even know where to click. It worked (for me at least !).

[Wally Hartshorn]

I strongly recommend reading To Hell with Bad Browsers and A Web Designer's Journey. This two-part series at A List Apart discusses how they redesigned their web site to take full advantage of CSS (entirely eliminating layout tables), while still keeping the site usable by those with old browsers.

Here's an excerpt:

IF THE DESIGN OF THIS WEBSITE looks relatively coherent, congratulations! Your browser does a good-to-excellent job of supporting web standards like CSS-1, HTML 4.01, and scripting languages.

If this site is readable, but looks as plain as an Amish coat, your browser does not support web standards. Fortunately, you can easily upgrade to one that does.

Before you start shrieking, perhaps you'll hear us out.

Note that old browsers can still display the content, just in a plain fashion. This completely eliminates the need to maintain a separate version of the web pages (a sure recipe for disaster).

Wally Hartshorn

[toma]

The problem of deciding what to do for a few vocal customers is a tough one. The best thing to do is to recruit them to do testing work for you, and to try to make the system work for them. That way you get some free help in exchange for your extra work, and they become advocates of both you and your work.

I think that the site has a few browser-related problems that are in the content, not the appearance. In at least one case, the content is much easier to find in the text-based version, so people with the new browsers will not be able to find it.

Use Netscape 4 and go to the alumni page. There is a link for awards. In the page for the modern browsers there is no corresponding link to the awards. This leads me to believe that the site has two different sets of content, not one set of content with multiple views.

The site also has some common design problems that some people find quite annoying. The back button doesn't always work, for example. More user testing would help find this type of problem.

In general, I prefer to use sites that cater to the lowest-common-denominator, and I design them that way. I use a wide variety of messed-up browsers, and I have noticed that many of the sites that are important to me do a good job of handling them. The sites that don't work typically have CSS or JavaScript problems.

It is a slippery slope from "Netscape 4 is broken" to "this site will only work on the latest Microsoft browser."

Update: Fixed a few typos.

It should work perfectly the first time! - toma

[Aristotle]

Mostly I agree - except that I've long stopped caring about NN4. Personally, I try to design for the "standard denominator", that is, to do all the layout and presentation work in a stylesheet and keep the markup in the content to a minmum. I avoid .*script like the plague.

The initially surprising result of this dogma is that not only do the pages look snazzy in a standards compliant graphical browser, they are actually very readable in Lynx as well because the markup is tidy. So I can have my cake and eat it, too. The markup passes all W3C validators perfectly so if someone's browser has trouble it's broken, period. If someone's system is too limited for a modern graphical browser they can always use Links for a much better experience than NN4 can offer. My pages will work fine with that.

C'mon folks, the HTML4 standard was finalized in '97 and CSS1 isn't much younger. You'd think vendors would have gotten a grip on those over five years later, but no. If we keep writing twisted¹ or outright invalid HTML to cater to software that was broken from the onset, vendors will keep slacking. They would have to shape up sooner or later if webmasters rigorously stuck to the standards. Strict standards compliance on all sides would make life easier for everyone involved - including the dev teams at the vendors who wouldn't have to laborously teach their software how to react sanely to insane input.

You can tell the topic is a pet peeve of mine..

¹ HTML was never meant to be carry layout instructions, after all.

Makeshifts last the longest.