Mitcz.com : Official blog of Rev. Mitcz, the demented devilish comedian from Hollywood, CA.

For the first entry of the newest AMF category (DesignMF), I’m starting a mini-series of article about issues that one must deal with when designing (whether it be for print, the web, or other mixed media). For this first segment (dedicated to Web Design this time), I want to tackle what I consider the biggest Web Design issue to date – Browsers, and more specifically – their incompatibilities and what to do about them.

As of this writing, their are about 5 major browsers (not including their version numbers). These include Microsoft’s Internet Explorer, Mozilla’s FireFox, Netscape, Opera and for the Mac-only crowd, Apple’s Safari. Beyond that, their are several browsers based on Mozilla’s code, some based on the “KHTML” rendering engine (as used in Safari, for instance) , text-based browsers, and about million other rarely-ever-used browsers. This still doesn’t include the differences amongst various Operating Systems, and the differences between the various versions of each of the aforementioned browsers. What’s a Web Designer to do?

Up until quite recently (and I mean in the last 2-3 years, at best), the general rule was “design for IE, hope it works everywhere else”. A quick look at W3Schools’ Browser Stats Page shows IE as the kingpin of browsers, even to this day. Taking into account both IE 5 and IE 6, Microsoft powered the browser used by an average of 88% of users on the web for quite some time. Further stats can show that if all flavors of Windows were taken into account, damn-near 90% of those browsing the web were doing so using a Windows-based machine running Internet Explorer. Mind you, stats don’t tell the whole story, but when you’re pumping millions of dollars into a website, you have to figure out pretty quick how the world at large is going to view your megaultraniftysite.com homepage. The easiest way to do that, of course, is to check browser statistics. The story of the stats was pretty much the same for many years, WinIE was king and the rest were just a minority of the web that few people ever worried about.

Recently, however, there’s been a major shift in browser usage and while IE is still king – it’s not the only browser one needs to worry about and doing so would leave some 25-30% of the web out of the loop. Some might argue that to worry about every version of every flavor of every browser is not only tedious and difficult, it’s time wasted. I couldn’t disagree more, of course, and I’m not the only one. There’s been a major shift in web design, in how we as a collective design community build and maintain our sites, and this shift was more-or-less spearheaded by an organization called the World Wide Web Consortium (or W3C, for short).

Over 10 years ago, the W3C began drafting specifications for interoperability between browsers and trying to ensure that if something looked a certain way in one browser – it should follow that look/functionality in another browser. It’s a lofty goal, and one that Microsoft seems to just want to shit all over by continually ignoring W3C specs in their releases of IE. We’re much closer to standards-compliance in the latest release of IE6 SP2 than ever before, and with CSS/XHTML becoming more popular than ever before, designing with standards in mind should yield almost identical results in almost all browsers released in the last 4-5 years.

Honestly, I don’t worry about every single browser in the world. I design for about 8-10 different browsers/versions, and I have rules about each one of them. Those rules are as follows:

Microsoft’s Internet Explorer

Basics : It’s the browser we all love to hate. Different not only from version to version, but from OS to OS (the Mac version of IE 5, for instance, has an entirely different set of bugs than it’s Windows counterpart, making it the only current browser that functions differently across OS’s) – this browser is a constant thorn in the side of any designer looking to stay standards-compliant. Personally, I run Virtual PC with Windows 2k and use/design for IE 6. While I can’t test anything that requires speed (*ahem* like Flash), it will show with perfect accuracy what the average IE user will see – and for that, it’s worth a lot to me. On the Mac side of things, I use/design for IE 5.2

Version(s) : 6.0 for Windows, and 5.2 for OS X.

Special Exceptions : I’ll let you in on a dirty little secret – I just barely give a fuck about IE 5 for the Mac. Seriously. The user-base is absolutely tiny, and those using it have many other, more viable options at their disposal. Because I know people like my mom, who uses IE 5 and doesn’t have OS X, I realize that a whole new browser is a scary thing. So, I try to be nice to IE 5 in that I want to make sure all the functionality is there. Beyond that, I just don’t want the design to look like total shit, but I’m not concerned with the pixel-precision in my Mac IE 5 designs. I design for my mom, basically. For IE 6 – I know the majority of people visiting any site I make is going to be using that browser, I make sure it looks pixel-perfect. However, CSS rollovers give me some issues, so I use a number of workarounds to make sure there’s not too much flickering. Thankfully, this flickering is almost non-existant in Windows XP, so again I don’t spend too much time worrying about the specifics in CSS rollovers. My advice to you – make sure IE 6 sees what everyone else does. If you leave out IE 6 – you’re fucked. End of story. As for IE 5 – there’s not a great deal of differences between IE 5 and IE 6, so far as CSS is concerned. The few that exist, there are many workarounds for. In any case, there’s only about a 5% marketshare for IE 5 anymore so you’re not going to go bankrupt if you fuck up the Box-Model Hack, for instance.

Safari

Basics :This is the browser I design for primarily. Like many Mac users, I’ve got about 6 browsers installed on my machine (both at home and at work), but Safari is my preferred/default browser.

Version(s) : I use and design for 1.2.4. Earlier versions of Safari were lacking many advanced CSS implementations, and few Mac users are utilizing a Safari version earlier than 1.2. It’s a small number to worry about, and they can always upgrade their browser to 1.2 (or use something like Mozilla’s FireFox).

Special Exceptions : Thankfully, Safari has few issues with it’s implementation of CSS/XHTML, so I never need to make Safari-specific workarounds and there’s nothing I would put on a site that couldn’t be implemented because Safari didn’t support it.

Mozilla’s FireFox

Basics : FireFox is fast becoming the browser of choice “for the rest of the web”. With a sustained 17-20% market share, this is definitely a browser you should take into consideration when designing sites. The only major issue I have with FireFox is that because it’s still in pre-release form (as of this writing we’re at 1.0 RC2, meaning a final version isn’t far off), I’m not sure how often its users are upgrading their browser and new features/bugs are being added and worked out with every version, so it’s hard to say “this works with FireFox” or “this won’t work with FireFox”.

Version(s) : Again, it’s hard to say. But, I keep my FireFox up-to-date as best I can. I’m currently using and designing for 1.0 RC2, since it’s so close to the final candidate that also makes it the safest version to design for.

Special Exceptions : Like Safari, there are few (if any) things that FireFox will fuck up, so there’s nothing I specifically avoid doing if I know FF users will be viewing the site at some point. However, because I know that anyone using FF also has another browser (like IE or Safari) installed – I know that if there were feature FF couldn’t support that made a site I was working on useless without, I’d just put a note to FF users to temporarily use another browser. It’s not a pretty thing, and certainly not something I’d prefer to do – but it’s my best advice to those of you doing things that for some reason FF won’t support and your site won’t otherwise function without.

Netscape

Basics : I’ve never been pleased by Netscape. Even when it was my default browser back when it was everyone’s default browser (like 1997-98), I always thought it was clunky, buggy, and ugly. Even to this day, in it’s latest version (7.2 as of this writing), it’s still the slowest, buggiest, most problematic browser out there. I can’t fucking stand it and the sooner it goes away, the happier I’ll be.

Version(s) : 7.2

Special Exceptions : My rule is this – if it doesn’t look right in Netscape, try to fix it. Make sure it’s at least useable and not an eyesore, then move on. You’re never going to get perfect pixel-precision, and perfect functionality in Netscape. Almost never. But it doesn’t matter. The few people who use Netscape as their default browser are using it in a corporate environment, and probably shouldn’t be fucking around with your latest CSS madness while at work anyway. Again – you should only really worry about functionality (meaning they should be able to get to every place on your site than everyone else can, nothing should be impossible for a Netscape user to use/see/interact with) and making sure there’s no glaring design mistakes. Netscape’s CSS implementation is such that it will pretty much adhere to most standards without much issue. If your user-base is Netscape 4.02, get a new user-base or encourage them to upgrade immediately.

Mozilla 1.0

Basics : This is basically Netscape + FireFox, but a little bit faster than Netscape and a lot slower than FireFox. If your site works in Netscape, it’ll work fine in Mozilla.

Version(s) : 1.0

Special Exceptions : Pretty simple – if it works in Netscape, it’ll work in Mozilla. If it doesn’t work in Mozilla, it almost definitely won’t work in Netscape.

Chimera

Basics : This was my default browser just before Safari came out. I liked its speed, features, CSS implementation, and interface. However, it’s basically just a slimmed-down FireFox (before FireFox existed), which is in itself a slimmed-down Mozilla, which is a work-in-progress version of Netscape’s next version (Netscape is the final result of any work done to Mozilla).

Version(s) : Doesn’t Matter

Special Exceptions : See the rules for Mozilla. I never work about Chimera because it’s got a very small user-base, and it’s going to display things almost identical to most other flavors of Mozilla-based browsers..

Opera

Basics : I think Opera sucks. Badly. I think it actually surpasses Netscape in the suck department. Not just because it’s the worst looking, and slowest browser I could find (at least as far as I’m concerned) – it’s also a Shareware browser. For those of you who don’t know what that means – it means you have to pay for it, or put up with ads. No other browser now or in the past has ever done that, why start now? Opera is used mostly by designers/developers as a test browser because it’s got really good error reporting and it’s not at all lenient about mistakes. Opera, as a company, also likes to complain about companies like Apple who use a similar rendering engine in Safari but don’t charge for it. That makes Opera mad. Well boo-fucking-hoo. The only thing Opera as a company does have going for it is that they made a damn good cellphone browser. They should stick with that, and stay the hell out of desktop-computer-based browsers.

Version(s) : Doesn’t Matter

Special Exceptions : Fuck Opera. Seriously. If someone complains that any site I’ve made doesn’t look right in Opera – I laugh at them. I’ve never met a single person who uses ONLY Opera on their computer. Again, the only people who even know about, much less use it for any length of time, are developers/designers. That being the case, they have other browsers that they’re perfectly capable of using, and know that many sites look like shit in Opera so they’ll just kick open another browser if they really want to see the content of a site. My prediction is that, other than on cellphones, Opera will never be mainstream – it’s too clunky, slow, and confusing for the average user and no one likes paying for an otherwise-free service/product.

In case my credentials are being questioned here, and you’re thinking “why the fuck should I listen to this guy?” I’ll give you a quick history of my design life. I’ve been designing for the web for over 9 years now. Up until 2001, I worked either as a freelance designer, or alongside other friends in companies we created in basements and shitty apartments along the West Coast. I’ve never had any college or schooling for design, and in High School I took it upon myself to not only teach myself designing for the web – but I spent the last 3 months of my senior year teaching web design to my Graphic Design class of which I was also a student.

When you’re freelancing, you don’t always have time to try out your lofty design ideals for each and every client. Sometimes they just want it right now instead of done perfectly right. Clients know nothing of other browsers beyond the one that they’re using – so your number one concern for browser compatibility is their browser. From there, follow the guidelines above. My freelancing days taught me to be very quick, thorough, and as bug-free as possible. Any difference of opinion, you will lose. Any issues with their website, they’ll come to you about. If they have a client who calls them to say “I’m seeing a black square in the bottom-right corner of my screen on your site” and they’re using a 10-year old Linux box with a grayscale monitor – guess what? You’ve gotta fix it. And since they know you’re a freelance designer, you’re not gonna sleep until that’s done. I once worked a 14-hour day, until 9am in the morning trying to figure out why one client’s client was seeing an overlapping table on a page and I had to set up a Virtual PC box emulating Windows 95 running Netscape 3.0 just to reproduce the result.

In 2001, I got hired as a web designer at a small niche-fetish porn company in Orange County. There, I learned in great detail how browser incompatibilities affected revenue in a big way. What I’ll write off in my private life as a measly 3%, they can point to and say “that’s $3,000 a month!”. It’s for this reason that almost every pornsite out there is designed with the look and feel of Geocities sites from 8 years ago. Table-based layouts will live on in porn until sometime in the hopefully near-future that we can say “fuck that 3%!”.

I now work for Vivid Entertainment, through a 3rd-party company named WebQuest, Inc. and I’m currently putting the finishing touches on the first-ever fully-standards-compliant, CSS-based adult affiliate program website. This might seem like no big deal to you, and maybe it isn’t to anyone but me – however, being the first to do anything in the adult industry is always a nice thing to be able to put on your resume (or just to use in casual conversation when trying to pick up geeky chicks).

It wasn’t until sometime in the last 6 months (at best) that I finally decided to take the plunge, throw out the tables in my layouts, and use CSS/XHTML when designing. AngryMF was the first full site that I designed using standards-compliant CSS/XHTML and also the first site I ever converted from tables to CSS. Designing sites according to this “new way of web design” has awakened my design senses and given me a renewed sense of excitement when designing websites. I was getting very bored of the whole thing for awhile there, but now it’s like I’m starting all over again.

I know it seems like I’m professing myself to be an expert at this when I’m really pretty new to it myself, but understand that not only have I been designing sites for the last 9 years (irrespective of the methods/languages/layout techniques used) – I’ve also kept up on web technologies and trends for the last 10 years, and I continue to do so to this day. Sites like SimpleBits, MezzoBlue and A List Apart have been an invaluable resource to me, and I visit each of those (and many others like them) on a near-daily basis. I don’t profess to be an expert with CSS or XHTML, or even web-standards. However, I would profess myself to be an expert in web design, and while I can still learn from others – there are many design colleagues of mine that come to me with their troubles of designing sites, especially when dealing with CSS.

Enough digression. The point is – differences in web browsers and their incompatibilities are likely to be a huge thorn in your side for many years to come, whether you’re a seasoned-pro, or a newcomer. However, utilizing the basic principles of which I’ve lived by for my designs in regards to the most popular browsers out there will help you quell your concerns and give you a lot more confidence when you launch your sites, knowing full-well that at least 98% of those viewing your site will have no troubles whatsoever and see your site exactly as you’ve intended them to see it.

If you’ve got more questions, or anything to add – leave your comments below.

Diggin' my shit? Well then..