Slashdot Mirror
Designing Websites - What Browser to Code For?
flyingember asks: "I code up PHP/CSS webpages and recently wondered about who to code for. We know that each browser supports CSS a little bit differently than the others, likening back to the Netscape/Internet Explorer HTML wars. Opera or Mozilla hacks are seen constantly across the net. Looking through two years worth of saved webalizer statistics, 95% of my visits came from IE and the rest from Mozilla, these are the teeming masses of the internet. Even the traffic to my site two years ago resulting from this article sent 50% IE users on Windows XP, and the total was 95% from IE. The numbers have only grown more IE 6-dominant since then. Given the overwhelming Internet Explorer user base, unless your webpage is specifically targeting The *nix or Mac crowd why code for anything except IE 6?" While each browser does support CSS, and even some HTML a bit differently, what functionality seem to be universal across all of the major modern players? Can you design a sharp looking website with such features, without resorting to browser-specific code? If so, how?
I would suggest designing for the minimum browser, as many people may be connecting using modems, carrier pigeons, or other low bandwidth connections. The FSF homepage is a good example.
Unknown host pong.
Code to the standards, but also look at your target audience and the nature of the site....
If you are coding for general site that will attract all kinds of people, code for software that will be up to 12-18 months old. The reason is that it takes a majority of users to catch up to the latest versions and 18 months is the usual timeframe it takes for users. Can you use just CSS for all things, no. CSS-P (for positioning) still isn't exact on all browsers who can do it, so you do run into a few issues here, so a few tables might be necessary to get the desired affect. Should you compensate for all users? That depends on who the site is for. If it's public access/govt site then more acceptance is needed, if it's just a particular niche, then you can get away with being more selective.
If you are coding for an intranet, the answer might be easier to find. Large companies usually set a browser standard so you can code for a particular browser, if you absolutely need to. So for example, if a company standardizes on IE 6, then you can take advantage of all the particulars of that browser.
Now, to put it into more perspective, what's the percentage of users who might be in the odd-ball category... about 5%. Should you care about supporting them, depends on your willingness and cost of doing so.
If you write to IE6 then your markup will be hosed as soon as Microsoft updates. They have a history of changing rendering even in minor updates, and IE7 will certainly be different. Want to retool your entire site when IE7 comes out? Do you really want to play whack-a-mole with Microsoft?
What if you do ever want to make a site that's aimed at Mac or *nix users? You'll be screwed since you only know how to write for IE. If you write to standards, you have a known good base knowledge.
Here's another reason: writing to the standards is easier. They're published, and several good validators exist. You'll need to do very little to get a standards-compliant site to do what you want in IE. Also, any in-depth CSS design help you're likely to find online is targeted to the standards, not how they're broken by $proprietary_corp.
In practice, here's my advice:
- Make your markup as clean and semantic as possible. Avoid all presentation (font tags and the like); put distinct sections in div tags with ids; use the markup the way it was designed.
- Do a first style pass in your browser of choice. I use Safari. It's not the most standards-compliant, but it's easy for me to use. Every browser has quirks, but that's the next step.
- Preview in Mozilla, Opera, IE, Safari and Konqueror. Most of these can be had for any platform. IE is hard on Mac, but I use Virtual PC. Safari is hard if you're on Windows, but you can use Konqeror, which is similar.
Ignore Netscape 4 entirely. It's a broken piece of shit, always has been, and getting something to look good in it is a total waste of time. By ignore it I mean import your styles: If you're desperate, make a simple style sheet using no tricks or positioning and link that, then have your fancier imported style sheet override it.Visit CSS Zen Garden for inspiration; ALA and the WASP for information.
Use the standards. It's better for you in the future, more flexible, better for your users, and just plain easier.
This isn't as much "normalization" as it is "don't take so many drugs when you're designing tables."
Blast it. I meant to unfuck those angle brackets. Here's what I meant:
<style type="text/css" media="all">@import "res/css/base.css";</style>
This isn't as much "normalization" as it is "don't take so many drugs when you're designing tables."
If you're using PHP, the issue can be easily solved. I started doing this lately with some of my own work. I design a site, write all the CSS for Mozilla/Netscape, and make sure it all works. Then I make clone of the stylesheet, and customize it to Internet Explorer 5.0 or 5.5. After I have both, sometimes there's another one for Opera and Safari, if you're feelin craaaazy, I write a simple script to parse what browser they're using from the HTTP_USER_AGENT and import the correct stylesheet. It eliminates javascript, and document just the slightest bit smaller (What's 1k difference you might ask? What if your're server a million pages a month?) I haven't run into any problems with it, the pages looks the same for everyone, and it takes an extra 10 minutes work on my part. Oh, and as far as what to code for? Personally, I code XHTML 1.0 Transitional, and CSS 1, because 2 isn't so popular with the older crowd of browsers.
Code after the standards not browsers, try to make the code as semantic as and always use a proper doctype, i usually recommend a sctrict-dtd.
but when choosing a doctype, you choose you should choose one that triggers the standard compliance rendering mode in the diffrent browsers. see here for a list http://www.hut.fi/~hsivonen/doctype.html
Quirksmode.org is a nice place to check out which javascript and css properties that is supported in the diffrent browsers. this css overview has been very helpfull http://www.quirksmode.org/css/contents.html
Pretty much any recent browser EXCEPT Internet Explorer in any of it's incarnations does CSS sufficiently well, bugless and standard like that you can expect things to more or less work the intended way in any of them - with the notable exception of overflow:scroll or overflow:auto in KHTML (Konq, Safari, maybe it's been added recently though?).
IE is a whole different ball game. In IE there are 3 big problems...
* First is no PNG-alpha support without ugly (and not brilliant as they will break things like links over the top of them) hacks.
* The second is floating, that is, using float:left, and especially float:right - this is simply broken on so many levels, depending on what you are floating where, all sorts of things can happen, from losing all your left margins, losing background colours, losing forground text, losing borders, getting extra space, getting less space. This has got to be the most infuriating problem ever, at least you can work around the PNG issue, but this, forget it - you'll never get it right. Many a time I have made a layout, all fluid for browser size and conforming to standards, degrades brilliantly, only to have a look in IE and find it completely torn to shreds because it decided that a float:right somewhere is far to complicated for it to handle.
* The third is the box-model, althugh it has to be said, I don't really care most of the time if IE displays a box a couple pixels bigger or smaller.
There are many other smaller issues in IE that you'll come across when writing good standards compliant CSS that will take you ages to figure out.
To top it all of, Microsoft doesn't give a sh*t about any of these problems, as far as they are concerned IE does everything it's supposed to, so what if it has bugs people will work around them, because hey, we're Microsoft.
The long and the short of it is, and I hate to say it, you have to develop using IE as your base-reference because it is the lowest-common-denominator, what you do in IE will work fine in the other browsers, but IE simply can't handle the stuff the other browsers can do.
I'm waiting for the day that Mozilla comes up with some whizzy bang dohickey for the browsing world that everybody wants - bring back the browser wars ! At least IE might get some much needed patching then.
NZ Electronics Enthusiasts: Check out my Trade Me Listings
You're obviously not a web designer. Flash is a poor substitute for displaying content and a great method for displaying animations. Here's why:
:-). It's possible to do branch pages in Flash, but it's a waste of bandwidth and slow.
1.) You can't print Flash.
Printing is mucho mucho mucho important, especially in the corporate world. How is someone going to put your product information on file if they can't save your website?
2.) You can't (usually) copy text from Flash.
Quoting is as important on the web as it is with printed text, with one important exception: no one will bother quoting you unless you can copy your text. Web users are laaazy.
3.) Google can't see Flash.
You want to market your website, right? A large portion of your traffic is going to come from search engines. If search engines can't read anything but a bunch of META keywords and a title, then your page isn't going to be very high on the list.
4.) People can't link to subpages in Flash.
How often do you see someone linking you to NYtimes.com when they are pointing you to a specific story? Well, okay, except for slashdot
5.) People don't care about your Flash intros.
Most Flash pages are coupled with flashy animations that prelude the actual content. Who cares to sit and watch all this crap when you're looking for one specific piece of information? Even if you can skip the long intro, you still have to deal with the transitions.
The list could go on. Flash was never intended to be used for content sites, and is NOT a substitute for HTML/XHTML and CSS/JS.
--
Oh, another option: develop the whole site in Flash - pixel perfect on every browser that supports Flash! :)
Yeah, the visually impaired probably didn't want to be able to use your site anyway.
The great advantage of having a reputation for being stupid: People are less suspicious of you.
I bought this great book which explains all about CSS and javascript and the differences between browsers. I keep it near me always.
Dynamic HTML, The Definitive Reference
There are some reader reviews in there so I won't go into detail, check it out and see if that's what you need.
It looks perfect because Safari uses KHTML, Konqueror's rendering engine (apple just 'borrowed' it). The only reason I use any other browser it to make sure my friends, all use IE (with the exception of few that I have gotten to use Mozilla).
:-)
Also gotta love that spell check built into forms
Can you provide an example of one of these nessicary Mozilla hacks please?
Try making a file input type for a form, and using CSS to set its width to 100%. It won't size properly under Firebird (I assume FireFox as well; the bug was still open last time I checked). If you want the box to look like it should you have to manually create two seperate controls, a textbox and a button, and use javascript to get the functionality working.
Just because you're paranoid doesn't mean there isn't an invisible demon about to eat your face
Zeldman is certainly not a table-shunning XHTML-elitist. He is very pragmatic in that regard and, for now, recommends a 'transitional' technique with light use of tables for page layouts for cross-browser compatibility.
See his excellent book Designig with web standards.
JP
Mezzoblue has a post that pretty much answers this question perfectly. Dave Shea outlines which pre-installed and downloadable browsers your website should be supporting.
Very few commercial sites can afford not to support 5% of their users. If you can afford to do so, your site is not important.
I'm working for a company that has to support mozilla in its web based systems because customers demand it. Right now that is giving us trouble because a few years ago we thought like you (i.e. it is our own fault that we are having some maintenance overhead now).
Jilles
3). Your HTML can have meta tags so that google can rank it.
Code for the best first, then add hacks for the rest. That means: get the site looking perfect in the latest version of Mozilla, then add in all the necessary hacks to make it perfect in IE6/Win. After that, you can (if you wish) get it looking good in IE5 on Win and Mac, and if you're a masochist try to make it work in NN4 and IE4. If you use a couple of CSS filters (notably the * html hack and the underscore hack) you can pass commands to IE only, and the various @import and commands will help you serve the right code (or none at all) to other browsers.
.abc { width: 18em; padding: 1em; }
.abc { width: 18em; } .abc * { margin: 1em; }
But basically, once it's right in Moz, it's going to be mostly right elsewhere. Whereas if you get it perfect in IE first, you will inevitably find you've done a whole bunch of things the wrong way and you have to UNDO them to get them to work elsewhere.
Other hints: the box model is only a problem if you use padding, thus:
<div class="abc">
<p>Blah blah blah</p>
<ul>...</ul>
</div>
This will make the box 20em in standard browsers, but only 18em in IE5.x. To solve it, replace the rule with:
Exactly the same effect in standard browsers AND in IE.
For more, read dithered.com's filter table and follow some of Zeldman's and Mezzoblue's links.
: Bat :
I have discovered a truly remarkable