There’s a lot of misinformation out there about various web browsers. Opera can/can’t do this. Firefox can/can’t do that. There’s only so much you can do to promote one product when you only know rumors or outdated facts about another.

Opera users: If someone told you that Firefox was better than Opera because it doesn’t have ads, you wouldn’t take them seriously. You’d know the ads have been gone since last year, and you’d wonder what else they have wrong.

Firefox users: If someone told you Opera was better than Firefox because Firefox won’t let you reorder tabs, you wouldn’t take them seriously. You’d know that Firefox 1.5 did just that, and you’d wonder what else they have wrong.

And neither of you will convince an IE fan that Opera is better because of tabs and a built-in search box because they’ll tell you that IE7 has both.

When you’re trying to convince someone that X is better than Y, and they know Y very well, you’d better know Y well enough not to make statements that the other person knows are false. When you do, you’ll lose credibility, and the rest of your argument — the part you do know well — will suffer for it. (I suspect a lot of software flame wars get started this way!)

So here’s my suggestion: If you want to promote Opera, go and download Firefox 1.5. If you want to promote Firefox, go and download the Opera 9 beta. Either way, try out the IE7 beta (if your Windows version will run it) or fire up Safari (if you’re on a Mac). Mess around with them enough that you’re familiar with how they work, what you can do with them, and how they handle your favorite web pages. That way the next time you face an IE fan (to the extent that IE has fans), or a Firefox fan, or an Opera fan, or a Safari fan, you’ll be armed with accurate information.

As for the post title — I don’t think it’s necessary for the major browsers to be enemies. I think there’s plenty of room for cordial competition rather than a cutthroat struggle. But “Know Your Enemy” is a better attention-getter than “Familiarize yourself with the competition.” 😉

*This post originally appeared in two slightly different forms on my blog Confessions of a Web Developer at the My Opera community and on my Spread Firefox blog.

Posting an Opera button on your website or blog is a great way to encourage people to try out the browser — but what if the visitor already uses Opera? It shows solidarity, but what if you could show them something else, something that is new to them?

You might want to replace your regular Opera banner with an ad for Opera Mini. Or show them another graphic of your own design. Or maybe not even a graphic, maybe post some sort of message, like “Opera spoken here!” or “Welcome, Opera visitors!”

It’s relatively simple to do this in PHP, or ASP, or some other server-side script…but sometimes you have to stick with static HTML. Well, client-side JavaScript can replace chunks of your page, and here’s how to do it.

1. Put the following script in a file called operalinks.js:

function replaceOperaLink(linkID) {

if(linkNode=document.getElementById(linkID)) {

if ( 0 <= navigator.userAgent.indexOf('Opera') ) {

var newButton=document.createElement('span');

newButton.innerHTML = '<a href="http://www.opera.com/">Glad to see you're using Opera!</a>';

var parentNode=linkNode.parentNode;

parentNode.replaceChild(newButton,linkNode);

}

}

}

For the innerHTML section, you can plug in a new link and banner, or a special message, or anything you want. (Just make sure that you put a backslash () in front of any apostrophes you use.)

2. Put a unique ID in the tag for your regular Opera button. Use the outermost tag that you want to replace. For example, let’s start it off with this:

<a id="OpLink" href="http://www.opera.com">Download Opera!</a>

3. Load the script in your document’s <head> section:

<script type="text/javascript" src="operalinks.js">

4. Call the function in the body onload event using the ID you chose in step 2:

<body onload="replaceOperaLink('OpLink')">

When the page loads, the script will check the visitor’s browser. If it’s Opera, it’ll replace the banner with whatever message you chose in step 1. It’s compatible with both HTML and XHTML, and you don’t need to worry about using <noscript> tags to make sure the banner still shows up for people with JavaScript disabled.

*This post originally appeared on Confessions of a Web Developer, my blog at the My Opera community.

It’s kind of redundant to post a “Get Firefox!” banner to someone already using Firefox, but it’s useful to show them an upgrade banner if they’re on an old version.  It’s also useful to show Firefox users a banner for Spread Firefox.

This can be done easily with PHP or other server-side scripting languages, but sometimes you have to use static HTML files.  That’s where client-side scripting becomes necessary.  Last month I posted some sample code that used document.write, which doesn’t work with XHTML.  (On top of that, the <noscript> blocks I used ended up causing validation errors because of their location!)

I’ve redone everything with DOM scripting, which will work with either HTML 4 or XHTML 1.0.

1. Put the following in a file called sfxlinks.js:

function replaceFirefoxLink(linkID) {
   if(linkNode=document.getElementById(linkID)) {
      var newLink=document.createElement('a');
      var newImg=document.createElement('img');
      var change=0;
      if ( 0 <= navigator.userAgent.indexOf('Firefox/0') ||
         0 <= navigator.userAgent.indexOf('Firefox/1.0') ) {
         change=1;
         newLink.setAttribute('href','YOUR_UPGRADE_LINK');
         newImg.setAttribute('alt','Upgrade to Firefox 1.5!');
         newImg.setAttribute('title','Upgrade to Firefox 1.5!');
         newImg.setAttribute('src','PATH_TO_BANNER');
      } else if (0 <= navigator.userAgent.indexOf('Firefox')) {
         change=1;
         newLink.setAttribute('href','YOUR_REFERRAL_LINK');
         newImg.setAttribute('alt','Spread Firefox!');
         newImg.setAttribute('title','Spread Firefox!');
         newImg.setAttribute('src','PATH_TO_BANNER');
      }
      if(change) {
         newLink.appendChild(newImg);
         var parentNode=linkNode.parentNode;
         parentNode.replaceChild(newLink,linkNode);
      }
   }
}

2. Use your regular Spread Firefox affiliate link and add a unique ID — let’s use id="FxLink" as an example — to the <a> tag.

3. Load the script in your document’s <head> section:
  <script type="text/javascript" src="sfxlinks.js">

4. Call the function in the body onload event using the ID you chose in step 2:
  <body onload="replaceFirefoxLink('FxLink')">

When the  page loads, the script will check the visitor’s browser to see if it’s an old version of Firefox or a current version of Firefox.  If it’s an old version, it’ll replace your standard button with your upgrade button.  If it’s a current version, it’ll replace it with a Spread Firefox button with your referral link.  Otherwise, it leaves the button alone.

This has a lot of advantages over the old version, including XHTML compatibility, no need for <noscript> blocks, easier validation, and it still degrades gracefully (if JS is unavailable or old, it leaves your normal button in place).

You can see it in action on my website, Flash: Those Who Ride the Lightning.

Originally posted on my Spread Firefox blog.

Woke up early (well, early for me) so we could get out and hit the polls before work. I was amazed that there was only one person in line ahead of us. Not only that, but there was only one line, not three or four broken up by last name.

Well, it’s a mid-term election. Plus it’s morning, and the last few years we’ve gone in the evening. (There was one year that I voted at lunch, but I had to drive Katie to the poll after work anyway, so it’s easier if we just both go at the same time.) It must have been last year that the line was so long that we got there at 6:30 or 7:00 and didn’t finish until after the polls “closed” — meaning they didn’t let anyone else get into line. (Sensibly, they allowed anyone who was in line by 8:00 to vote.) And there were a lot of people waiting behind us!

Now on to programming for a few hours until Microsoft kicks their patches out the door.

Current Music: Gettin’ Ready Rag (in head)

OK, so you want a web anyone can use, whether they’ve picked Windows, Macintosh, Linux, or whatever came on their cell phone or PDA. What can you do? Here are some ideas:

Web Users

Try an alternative browser. Use it exclusively for several days. Get used to what it can do, and how it differs from Internet Explorer or the browser you’ve been using.

Better yet, try two. If you already use Firefox, try Opera. If you already use Opera, try Firefox or Chrome. You can always switch back if you like the other one better. The goal is to see what’s out there.

If you find a web browser you like, tell your friends and family. Get them to try it out, or give them a demo.

If you really like the browser, and would like to spread awareness, consider joining a promotional group like Firefox Affiliates or Choose Opera.

Bloggers and Content Providers

Write about your favorite web browser. Encourage your visitors to try it out. Post links or buttons pointing to the download site.

If you agree with the Alternative Browser Alliance‘s goals, feel free to link to us.

Web Developers

Base your design on web standards whenever possible. Take a look at sites like the CSS Zen Garden and A List Apart for ideas. The Mozilla Developer Center and Opera Developer Community are also good resources.

Validate your code. Learn which rules are safe to break. Where you have to use proprietary features, use graceful degradation so that other browsers at least get a usable experience. Some tools for validation include:

Try not to make assumptions based on browser detection, which is often wrong by the time the next version of a program rolls around. Where you have to check, detect capabilities, not browsers.

Start a collection of web browsers. When designing a site, check the layout with as many browsers as you can early in the process. Check critical parts of the site before you go live. Sites like Browsershots or BrowserStack can help you with browsers and platforms you don’t actually have.

Do your development on Chrome or Firefox. Both have extensive tools to help you test and debug your websites.

Conclusion

These are just suggestions. You can do as much or as little as you want, as much or as little as you can!

This article originally appeared on the Alternative Browser Alliance in 2005. This is the latest version before I retooled the site a decade later.

The main reasons are innovation and security.

The intense competition between Netscape and Internet Explorer in the late 1990s ended with the World Wide Web dominated by one browser. At its height, Internet Explorer was used by an estimated 95% of people online.

There were many reasons IE took over: it came free with Windows, the most common operating system. Many webmasters would rely on Internet-Explorer-only features like ActiveX, leaving their sites inaccessible to people using other web browsers. As time went on, webmasters would write their web pages without checking for errors, except by testing them in Internet Explorer.

One Browser, One Web… One Target

You might think this is acceptable: One vision, leading the web forward. Unfortunately, once Internet Explorer’s dominance was secure, Microsoft did very little to update it. There was almost no innovation from 2001 through 2004, either in the front-end or the back-end, until Windows XP Service Pack 2 redesigned security. Many aspects of the languages that make up the web, particularly in the core languages of HTML and CSS, remained unavailable or buggy in IE until the 2006 release of version 7—5 years later—and even IE7 still has a long way to go.

Also, not everyone could or wanted to use Internet Explorer. Die-hard Netscape fans clung to their browser or shifted to Mozilla. People using Linux-based or Unix operating systems didn’t even have the option of using IE. Macintosh users could use Internet Explorer, but their version had different quirks than the Windows version everyone used for testing.

Two things happened.

First, the smaller browsers started innovating. While the heavyweights battled for dominance, a tiny Norwegian company called Opera began to re-think the way people used a web browser. Long after Internet Explorer and Netscape were free, Opera was still shareware…and still getting paid customers. (Today Opera’s free too.) Mozilla, a spin-off of the old Netscape, made an effort to implement as much of the web standards as possible, as correctly as possible. A small project called NetCaptor combined MDI with tabs to create “tabbed browsing,” which made its way into Opera, Mozilla, Firefox, Safari… and has finally appeared, years later, in Internet Explorer 7.

Second, the Internet ceased to be a friendly neighborhood and was flooded with viruses, trojan horses, and spyware. With a single program accounting for more than 90% of users, and a design that tied that program directly to the operating system, that meant one set of security bugs could attack most of the users on the internet. Alternative browsers and operating systems have long promoted their security over Windows and Internet Explorer. In 2004, people who used a Mac, Linux, or an alternative browser on Windows didn’t even need that extra level of protection because they weren’t even targets!

The Solution

Competition keeps innovation going. If several products have to fight for market share, they have to continually one-up each other. End result: all browsers improve, everyone wins.

It hardly seems a coincidence that Microsoft stopped developing Internet Explorer when they trounced Netscape, then started again as soon as Firefox started making gains.

Security may be easier to manage when you only have one place to look, but it’s also easier for the bad guys to crack. In 2004, they could get 90% of the web just by targeting Internet Explorer on Windows. In 2008, they can still get 75-80%, still aiming at one target. Now imagine that spread out among IE, Firefox, Opera and Safari on Windows, PowerPC Macs, Intel Macs, and Linux. They’d have to settle for 10% or try to crack every combination they could. Web developers, on the other hand, designing for the common language of the web, would have no more trouble than they do today.

And who knows? You just might find yourself liking another browser better than you thought!

This article originally appeared on the Alternative Browser Alliance in 2005. This is the latest version before I retooled the site a decade later.

The ridiculous Firefox/Opera rivalry (it’s software, not religion) has given rise to one annoyingly persistent meme: the belief that tabs are just MDI (Multiple Document Interface).

They’re not.

MDI, as implemented in many Windows applications and eventually abandoned by Microsoft, involves having a mini-desktop inside your application, with its own windows that you can minimize, maximize, and rearrange. If you have a taskbar-like interface it can look a lot like tabs, and you can certainly use it the same way as tabs, but it’s a different UI paradigm.

A tabbed interface is very specific. You have only one view at a time in your application window, and you switch between them based on a row (or column) of tabs along the window’s edge. You can look at it as a proper subset of MDI, but it is not the same thing.

Additionally, classical MDI uses one master window for the application. All documents appear in that window. Tabbed interfaces often (though not always) allow you to have more than one window, each with its own set of tabs. This makes it possible to group documents, web pages, etc. by category in a way that you can’t with a single-document interface or classic MDI.

So when people claim Opera had tabs first, they’re thinking of MDI—which Opera did have before Mozilla did. Tabs were showing up in browsers like Netcaptor and Galeon, however, long before they showed up in the Mozilla suite—and long before Opera hid its MDI capabilities under a tab-like veneer.

(reposted from Spread Firefox in response to Asa Dotzler’s post on the history of tabbed browsing)