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?
Anybrowser.org is another good one if you need convincing.
Nothing irritates me more than having a webpage not display properly in opera when I have chosen to let opera identify itself as opera, but renders correctly when I tell opera to identify itself as IE6.
This Quote probably sums it up best
"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
-Tim Berners-Lee in Technology Review, July 1996wang33
PAGERANK++ Robsell.com
I do not belive I have seen any of these "Mozilla hacks." Most of the "hacks" I have seen are for things that every browser except IE works properly with, such as the so-called "IE Box Model Hack" that I hear talked about a lot. Can you provide an example of one of these nessicary Mozilla hacks please?
I have found that as long as you code to standards, and test your page a bit in different browsers, you should be able to code up a page that looks the same, or at least acceptable in all browsers. I suggest coding for Mozilla, as it is more standards compliant, then testing for IE, and applying the (very few) IE hacks that are nessicary to get it to look right. You would be suprised at how similarly they work, unless you are doing some very complex CSS.
/usr/games/fortune
As late as what, 1998? a web developer might have asked the same question about Netscape. It had such a large percentage of the market share that it was a pointless crusade to code for anything else.
Look where it got them.
There's also somethign about the question that's slightly reminiscent of the Y2K problem--I've said this myself on occasion, and know plenty of others who've echoed the sentiment: "Oh, i'll get around to updating that page long before another browser takes over." Yeah, right.
Bottom-line: code to the standards. IE 6 is fairly decent about most of them, though not as good as the Lizard, so you're probably safe for the future as well that way.
I used to code for Mozilla due to its strong adherence to standards and support for transparency in PNGs. However, now that I've added an Apple G5 to my collection of Linux machines, I find myself developing my website content exclusively for Safari. As long as it works perfectly in Safari, I'm satisfied.
The sole reason is that Safari's output is immaculate. The output (specifically the fonts) is so perfectly rendered that the HTML almost looks like it is typeset in LaTeX. Thus, to answer your question, I recommend Safari over other browsers for the same reason I recommend LaTeX over word processors. It's one step up.
Michael.
Linux : Mac
PHP is a server side technology; it doesn't matter WHICH browser you code to, because the PHP doesn't care. CSS, ok, CSS is different: but here's the problem with coding to IE6's CSS model: you don't know how it's going to change in the future. You have no idea how Microsoft is going to change its support of the CSS features whose behavior is peculiar in IE6. With W3C standards, at least you have a target that stays (relatively) still - the other browsers at least are all going to keep backward compatibility to the W3C recs.
Unless you're doing a lot of weird CSS hacking, making a standards-based page look good in IE6 is a lot easier than making an IE6 page work in Safari or Mozilla.
Now, if you said JAVASCRIPT, well, that would make more sense; the object models are significantly different between IE6 and Mozilla and Safari and Opera. There the smart thing is to write separate pages for both browsers and use those PHP programmer skills to serve up the right page for each.
Okay, here's what you should do, IMO. Design for HTML 4.01 transitional. Or XHTML 1.0 Transitional. Use tables for layouts, and CSS for font specifications and a _few_ other things that are all commonly supported, _exactly the same_, on all major browsers. This is called "lowest common denominator." Don't use _anything_ that's not standard, mind you, but use that which is _correctly implemented_ from within the standards, and you'll be alright. When XHTML came out, browsers didn't stop supporting the older standards - they still work, and honestly, they work more reliably across the modern browsers than ANY of the newer standards. That's just the way it is until MS decides to actually FIX their LAME-ASS browser.
:)
Is it your job to push people into installing a decent browser? No.
Would it work, even if you tried? Hell no!
Is developing _ONLY_ for the latest standards going to magically make everyone who comes to your site, or even a reasonable percentage, _want_ to upgrade? Another hell no.
You need to get real - the MS IE browser dominance is going to stick around a while (another few years, most likely), and by that time, hopefully Longhorn will be here, and will bring with it a browser that supports standards. One can only hope.
So there ya go!
Oh, another option: develop the whole site in Flash - pixel perfect on every browser that supports Flash!
The fact of the matter is that you will need to do browser workarounds, even if you only design for IE. The IE 5 box model is wrong and there are a lot of people using that browser. So just get the standard right and then go back and compensate for broken browsers.
And yes, I know that I'm not stnading on very solid ground with the way SongBuddy looks in IE. I'm more interested in getting the features going than in supporting a browser I haven't used in quite some time.
Why can't I moderate something "Wrong" or at least "Grossly Misinformed"?
If you want to make sure your page looks the same in each browser use valid HTML. It is when you start doing things that are not valid and incorrectly nesting tags that things go wrong.
Decide which standard to code your page in (HTML 4.01 Transitional or XHTML 1.0 Transitional are good), put the right doctype on the page and then code according to the standard. Check your page using the W3C validator and fix any errors. Check your CSS document for errors too.
I do not use CSS for layouts since they never render the same in each browser, I still use tables. Just us CSS for fonts, sizes and general formatting that is accepted by all browsers.
(\(\
(^.^)
(")")
*This is the cute bunny virus, please copy this into your sig so it can spread
Code to standards but make sure that your code is happily displayed without any quirks in a range of browsers and on a range of platforms.
Browsers you should be worried about (in no particular order, so don't start flaming me about ranking): MSIE, Opera, Mozilla, Netscape Navigator, Safari.
Platforms you should be worried about: Windows, Linux, Mac.
Of course, if you're intending your content to be viewed on the move, make sure you've got WAP/portable browser friendly pages too. Oh, and remember resolution: you might have a 1600 by 1200 desktop but the average web user doesn't. 800 by 600 is as high as you should design unless you want to alienate the majority of surfers.
If the various combination of browsers and platforms scares you, don't worry. There are various apps out there (and websites) that will show you what your pages will look like in several browser/platform configurations. Someone more immediately familiar with them them than I am will surely (hint, hint) provide you with some useful URLs.
"Accept that some days you are the pigeon, and some days you are the statue." - David Brent, Wernham Hogg
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."
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
Several people here have already said "code to standards, not to a specific browser," a comment with which I agree completely.
But I also want to add this. Many people with whom I've had this conversation reply with "yeah, but I like the MS-specific extensions; and given that IE users comprise 95% of the visitors to the site I'm working on, why not use them?" This response has always amazed me, and I wonder if it works with the executives at the firms for whom they design sites: "We're gonna deny access to 5% of your potential customers, and thus cut your web-generated revenues by 5%; but your site will have this cool funky-looking formatting! OK?" More likely, they don't tell the web design customer that they're throwing away 5% of their revenues.
For lots of companies, 5% of revenues is the difference between profitable and not.
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
What specific browser to code for? Well, since you can't possibly code for all of them, code for NONE of them! I hate going into a store that has a sign saying "whites only", so why should I put up with the equivalent on the web?
If you can put in stuff for one browser and still have it look good on the others, then do it. At the minimum, the site should be fully functional and not ugly under any browser. It doesn't have to be fancy, but it should be navigable without damaging the users' eyes. If you start querying what browser the client is using, you're heading down the wrong path.
But you still have to test on all of them. At least IE, Mozilla/Netscape, Safari/Konqueror, and Opera, at the minimum.
Don't blame me, I didn't vote for either of them!
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.
I think someone doesn't understand what HTML is for. The purpose of writing web pages is not to code for a specific browser, it's to code standards compliant so all browsers (that are also standards compliant) can use it. I don't see any reason why any proprietary extension to HTML should be used on any page.
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
You're not any type of fanboy. You're just dumb.
His point was that he used to code for Mozilla, because Moz is very standards-compliant. Now he uses Safari to preview things in, since Safari/KHTML pretty much renders things just like Mozilla does (namely, according to standards)--that's why they made Safari User Agent string:That's because it's so freaking much like Gecko (Mozilla) when it comes to rendering pages according to standards.
He's not trying to cater to one browser--he's using standards-compliant browsers like the excellent Mozilla and Safari to make sure all browsers can render his pages. Just because MSIE has the best market share doesn't mean catering toward it would be a good idea.
Audience that can view a site designed specifically for MSIE 6.0, assuming general public viewership: 95%
Audience that can view a site designed specifically to follow standards: 100%
See the benefit now?
Show me a website that renders properly in Safari that doesn't render useably in MSIE, and I'll consider removing your dunce cap.
ActiveX, VBScript...random BHO's and hijacking exploits. Oh, yeah. Let's use that browser as the gold standard.
Just to repeat what everyone else says first: its very important to design to standards. Its the only way to be sure that things will continue to work.
But a second point: many browser statistics are misleading. As well as it being easier for non-IE users to block webbugs and fake user-agent strings, sites that are designed for IE only suck in other browsers, and arent 'sticky' for non IE users. Non IE users will be consistently under-reported on many sites as a consequence.
So, if there are 10% of users using non-IE, and you are only getting half of them, should you care? Well, yes. Non-IE users are more likely to be technically savvy - they've got as far as changing their browser!.. and are thus more likely to be educated, employed and able to pay for stuff (especially small shiny expensive stuff). So you lost 50% of one of the best market sectors, while keeping 100% of the deadbeats. Nice move.
Knowing your market sector is more important than knowing what your browser shares have been. E.g. we work in on sites which are largely browsed by architects, and guess what - they largely use Macs. But we didn't get them until we spent time making the site Mac friendly.
-Baz
And if a site does this, I'll hit the back button, go back to my search results and move on to the next page. Its not that difficult to code for various browsers AND stick to the standards, without detecting which browser everyone is using.
Then either you're serving your pages with the wrong MIME type, or they can't be seen in IE at all.
You're not supposed to serve XHTML 1.1 as text/html: you should use application/xhtml+xml. See the W3C's XHTML Media Types. If you're labelling your XHTML 1.1 as text/html, then your browser isn't treating it as XML (note that Mozilla is using Quirks mode, for instance).
Snag is, Internet Exploder (to IE6SP1) doesn't know what to do with application/xhtml+xml, even though there's been a built-in XML parser since IE5, and application/xhtml+xml was defined in RFC 3236 over 2 years ago (and was presumably floating around the standards track for some months before that). But don't worry: just remember that Internet Explorer 6 SP1 gives you the freedom to experience the best of the Internet. At least, that's what it says on the box.
Assuming you're not prepared to be held hostage to the Great Beast, the best workaround at the moment seems to be to use Apache's content negotiation (MultiViews) to lie to IE (and anything else that doesn't know about application/xhtml+xml) that you're giving it text/html.
There's more on this here and here.