There are few things that make me really angry. Almost nothing. There are however a lot of things that cause me disappointment, irritation and an urge to send people furious emails. When doing my daily, very short, browsing on the Internet for nice new websites I tend to get all these feelings at once. I am tired of websites not tested with the most common browsers.
Do they expect normal innocent people to switch web browser just so that they can visit a website without messing up the design. If they do maybe it’s time for some reconsideration on that matter, cause most people wont. Few websites offer so much interesting content that a visitor is willing to spend time learning a new program. It’s sad but also the reality, which a web designer as every other person must correct themselves to.
I do not tell you that IE is better than any other browser but too many Internet users use it for you too ignore it. Every website, small or big, must take care of their visitors and not scare them so much they wont return.
I do understand that making a website cross browser compatible can be both difficult and timeconsuming. That is the reason to why I’ve created this article.
Validate your code
Before moving any further you must check if your webpage is built on valid HTML or XHTML code. That means, basically, that you’ve closed all tags properly, included required attributes in your tags and that you have a valid doctype. The easiest way to check this and see what has to be done is to visit w3c:s validator service. Simply enter the address of your site and press check.
Did you get an error? For this to work you must have a DOCTYPE. That is a tag at the top of your page which will tell the validator and web browser what type of code you’re using. One important thing is not to put anytging above your doctype tag. If you do, IE will go insane about it and not render with the right engine.
There are a few doctypes to choose from so you better read this page or this page and pick what fits your website best. Choosing a doctype can speed up your site’s load time since the browser doesn’t need to guess what (X)HTML code you’re using.
When the w3c validator has processed your site you’ll get a list of errors(or not if you’re lucky) that you need to fix. Every error comes with a description and to make it corrected easily they provide you with the line number in your code where the error is located.
Now it’s just to start debugging.
Make good use of CSS
Over the years there has been many articles written on the subject “Crossbrowser CSS“. Some has hacks for specific problems and some has overall tips. I think we can agree on that a good knowledge is required before starting to make your own hacks. And making thing by yourself is the best way to learn something. For those that are beginners there are a few tips though that can be useful and correct errors very easily.
- Remove default paddings
Some browsers have default paddings and margin settings which can mess up your design and make your elements appear in wrong places. A simple fix is to type in…* { margin: 0; padding: 0; }
…in your CSS file to remove them. The
*indicates that the rules entered will apply to all the elements in your code. - Develop for a standardized browser
Instead of starting with building your site for a browser you know have poor CSS you should start of with a browser that has a standards compliant rendering mode. After you have done that you can make hacks and bug fixes for other browsers. There is a test available that you can try with your browser to see if it qualifies as standards compliant. Check it out here. - Validate
W3C has not only a (X)HTML validator but also a CSS validator that you can try. It tests your CSS for errors that could cause issues when rendered. Its a good way to locate small but severe typing errors without manually going through everything. - Search the web
The last real tip I’ve got is to search for CSS bugs on the Internet and read a little about them. This can help you a lot and I would like to recommend a website called Position is Everything.
Solve png problems
I am not much of a fan of Internet Explorer 6. I hate it and it’s in my opinion the worst program every created for home computers. Sadly, there are people that use this browser yet and that causes massive headaches too web designers all over the world. The most common issue with this browser is the png rendering problem. Png is a image format the has fairly good quality, short load time and it can be transparent. It’s a very good format for the web. The thing is that IE 6 doesn’t make the png images transparent while all other browsers does.
Luckily there is a fix available which can be downloaded from this page. Read the page carefully and you should be able to make this problem disappear.
Forum Discussions
I am a member of quite a few web designer forums. Most of them have that very neat forum category called “Website Review” which I like visiting. Basically, it’s a forum for showing off your website and get comments on the design. It’s great, you learn a lot about designing websites when criticizing other people’s websites and see how they solve problems etc. However, every now and then I come across members on these forum that have a very odd attitude to cross browser coding and scripting. They think it’s totally unnecessary and that everybody should have Firefox installed. I don’t like that attitude. People that think like that way wont last very long in the web design business.
After all, what is a website without usability. Nothing, right?
Share This
23 responses so far ↓
1 Rachael // Oct 15, 2007 at 5:12 pm
Well said!
It irks me when people list “requirements” on their webpages. Webmasters should not require anything of their visitors. In fact, the visitors are the one with requirements. As a visitor, I require that you, the webmaster, make sure I can view your site. If I can’t, I’m not going to come back and you’ve just lost yourself another visitor.
Good article.
2 The Dog // Oct 15, 2007 at 7:25 pm
Wow..this comment from another poster blew me away:
“Webmasters should not require anything of their visitors. In fact, the visitors are the one with requirements. As a visitor, I require that you, the webmaster, make sure I can view your site. If I can’t, I’m not going to come back and you’ve just lost yourself another visitor.”
Why should a webmaster meet the ill-defined requirements and demands of some anonymous web-surfer who believes the world revolves around them?
A webmaster must meet the requirements of the majority, not the few who are using alternative browsers or obscure browsers. IE versions 6 and 7 dominate, with Firefox in second place for browser choices. Just because a few nutbars use Opera or still use IE version 3 doesn’t mean a Webmaster has to cater to them.
Especially when most of those demanding types aren’t paying any of the costs of running the site.
3 A Blog about Nothing // Oct 17, 2007 at 5:24 pm
My understanding is if you build it for firefox you’re building to standard? If that’s true then why worry about anything else? Maybe that would start to force the other browsers to become compliant.
4 Calligaris // Oct 22, 2007 at 3:49 am
The number of the website is growing exponentially and so does the competition. Winning the user is what it’s all about now. I like your point and i think you got many important aspects covered here.
5 a user of obscure browsers // Nov 20, 2007 at 1:58 am
And by doing something like * {margin:0;padding:0} you make buttons in camino screwy. I switched back to safari 3 because of that (maybe i’m just whiny)
Test every modern browser latest build, latest stable version, and latest .0 version, and earlier versions of IE and safari (as users of those often don’t update), even if its just a glance before you make it live. some good browsers do mildly screwy things which can be frustrating.
6 Bender // Nov 20, 2007 at 6:29 am
Nice rant, but its up to people to ensure they have the latest browser (they are free you know…) Why should I waste my time coding for i.e. 5? When I write real code I done ensure that it is backward compatible with win 3.1.1, win95…
The browsers that you should check:
IE
FireFox
and as “a user of obscure browsers” mentions, just the “x.0 version”, no need to go overboard.
Things that are important:
Check that you pages can be read by the color blind…in photoshop (like my rant above, if your not using the best, then its your own fault!) view your designs as shades of gray, you will be surprised!
Use alt tag for images (this really comes back to the validation of the main article). Like code, pages are better with comments.
That my 2 cents worth, thank for listening (well ok reading for most…)
7 Niall Doherty // Nov 20, 2007 at 12:23 pm
Great read. Thanks.
I agree with Rachael that you have to cater for people visiting your site. They rule. That said, it’s impossible to cater for every single individual. I usually test in IE6+, Firefox 1.5+, Safari 2 and Opera 9. That seems to cover about 95% of people, which is good enough for me.
Oh, and I used to use * {margin: 0; padding: 0} but I’ve really gone off that. It can slow your site down because you’re applying the rule to absolutely everything. Nowadays I use a more sophisticated CSS reset like this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
8 Belfegore // Nov 21, 2007 at 9:50 pm
I started reading your page but after finding that even the very first, short paragraph is full of very basic grammatical errors and spelling mistakes I gave up on the rest.
I understand that you are not an English speaker, but it weakens your argument about web standards and consideration for the web site visitor if you ignore the most basic rule of any publishing, be it web, print or any other media:
To follow the standard rules the language you are using.
How hard is it to find a proof reader or friend who can look at your spelling and grammar?
Otherwise I am sure you make a valid point, perhaps you should direct your readers to the great web applications that allow you to test their pages in almost every possible browser/platform configuration, such as Browser Cam.
Best wishes, B
9 Browser not supported // Nov 24, 2007 at 4:12 am
[…] When designing a webpage I always test them in different browsers such as IE 6.0, IE 7.0, Firefox, Safari, Netscape and Opera.. Here is a post about the issue of making your sites available to the most common web browsers out there :o) Click here to read article >> […]
10 Jane // Nov 25, 2007 at 4:23 am
Some of the comments are absurd. I use Safari, arguably like the third most popular browser in use, above Opera (seriously), after Firefox. Often times I get linked to websites that Just. Don’t. Work. in Safari, from the busted layout to the ajax buttons that do nothing but spit out errors to outright “Please use another browser” messages that refuse to let you go any further. I’m not even using an outdated version! Pray tell how it makes any sense to just ignore a rather standards-compliant browser that comes bundled with Mac OS X? And before you go on about how “Safari’s a small market”, Apple sold 2 million new computers in the last quarter, all with an OS that comes with Safari. Nevermind all the existing users. That’s one hell of a small market, huh? Oh wait, did I leave out the iPhone users, which are over a million too..
Before you go on spouting more BS about “Why should a webmaster meet the ill-defined requirements and demands of some anonymous web-surfer who believes the world revolves around them?”, why don’t you go read http://developer.yahoo.com/yui/articles/gbs/
The world revolves around the users. It does not revolve around the designer. You lose readers and customers by having a site that doesn’t work in the major browsers. We’re not talking some custom build of some hacked-to-death fork of Firefox. It only makes complete sense to spend a few minutes installing the likes of Safari and Opera to test. Apparently Yahoo thinks it’s worthwhile and explains why. Perhaps you’d care to understand too?
11 Kevin // Nov 25, 2007 at 8:53 am
Rule #1 “Know your customer” -
Check your logs. Roughly 70% of my “users” are browsing with Firefox, with IE7 taking the next big chunk (about 15%). IE6 is below 2%.
I don’t waste my time supporting IE6 bugs, IE7 and Firefox have enough to keep me busy.
Kevin
12 jc // Nov 25, 2007 at 9:16 am
Not a lot of things make me mad either. However the one thing that always does it is when retards say “use the ie6 png fix” as if that was the magical solution to the problem.
Sorry, it’s not a solution. It’s garbage. Having javascript traverse the entire page and find all the tags is about the most archaic hack you can offer. Plus.. any self respecting web developer has figured out that semantic markup means less image tags and more image replacement via css. Therefore, the “ie6 png fix” doesn’t do a damn thing for you. You still have to go in to the CSS and manually map each image with the width+height+alpha transparency.
13 dt // Nov 25, 2007 at 9:28 pm
Hmm, I followed your suggestion and ran the URL for this
blog (http://ejoh.zmolklife.com/2007/10/15/oops-browser-not-supported/)
through validator.w3.org. It claims that there are 113 errors… just thought you might like to know.
14 Emil // Nov 25, 2007 at 9:35 pm
Yea I know dt and I find it a bit embarrassing. I have however been validating the code of another site I run lately so I haven’t had the time.
Thanks for the observation
15 Oops: Phone Not Supported // Nov 27, 2007 at 6:07 am
[…] comments for Oops, browser not supported are a good read. A few quick highlights […]
16 Ryan // Dec 9, 2007 at 4:25 pm
I agree with stated above in regards to web browsers.
Though if you are creating a blog it should not take you too long to have it cross compatible. If you are creating a social network or a large scale project with you and a friend then that’s another story.
Cross compatibility for large scale projects across IE, Firefox and Opera on Windows is a task unto itself. After you have done that you need to make it compatible for FF and Safari for MAC. Also, I have noticed many users using Ubuntu who have requested a invite to our project.
It is sad that many huge companies still have this site only works in X. It’s 2007 get with it.. as my data shows in regards to user OS and browsers it is only getting more spread out.
17 zalifer // Dec 13, 2007 at 2:36 am
Build a website to the latest code standards. If it dosnt work, thats the browsers fault, and they need to fix it.
EG: the rollover button shifiting a few pixels problem has been fixed in the FF3 beta1
18 Jansie Blom // Dec 13, 2007 at 6:20 pm
good post. that’s why keeping it simple is the best way to design!
19 Richard // Dec 15, 2007 at 6:59 pm
There are few things that make me really angry, and that’s spelling errors in web sites telling me there are few things that make them really angry.
Some good comments, now learn English
20 Richard // Dec 15, 2007 at 7:01 pm
Oops, I was a bit tough … didn’t read you were a Swede, my apologies: if only I could speak/type another language.
21 Emil Johansson // Dec 15, 2007 at 7:56 pm
It’s impossible to learn a language if you never use it. I know how you feel about grammatical errors because I feel the same way. I am actually a bit embarrassed about my incompetence. I should be able to perform better even though I am a Swede.
22 Rebecca // Dec 19, 2007 at 3:30 am
To combat most of the validation and IE issues, I check early and frequently if my design validates and looks good in IE 5.5+ and other browsers. Specficially, while I’m designing the thing localally, I test it’s vaildation/looks at many stages during the process. It’s easier than doing the whole thing, then having to go back and start again.
A good place to see if your design will rock IE’s (or any other brower’s) socks: http://browsershots.org/
23 Dwayne Charrington // Dec 25, 2007 at 2:00 am
I agree partially with your post. I like to make my code valid for IE and Firefox mainly. I don’t bother with IE 5 though seriously if you’re still using IE 5 you shouldn’t be on the internet.
But making your XHTML and CSS valid is a big YES in my books. If you’re making a site for a wide scale audience then yes go crazy, but I really just stick to Firefox and IE.
- Dwayne Charrington.
http://www.dwaynecharrington.com
Leave a Comment