Category: Web Design

Posted on
by

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.

Posted on
by

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.

Posted on
by

So who’s next? Well, Opera 9 beta 1 is very close—there’s a pair of red squares that should be black, but that’s it. Neither IE7 nor Firefox 1.5 will have much in the way of Acid2-related fixes, though the trunk builds of Firefox show improvement, so 2.0 has a chance 3.0 might make it will pass (since 2.0 will use the same engine as 1.5).

Posted on
by

WWW, while convenient to type, is rather unwieldy when spoken (at least in English). “Double-U double-U double-U dot some site dot com” takes a while to say. It’s not like, say, AAA, which can be easily spoken as “Triple-A.” Fortunately, these days most major sites have their servers configured to return the same web with or without the www. prefix, so you sometimes hear a website described with just its domain name.

This morning I caught the end of an interview on NPR’s Marketplace Morning Report, and the announcer explained that the full version of the interview was available on their website, “dub dub dub dot marketplace dot org.”

Posted on
by

Slashdot posted a story about a new web browser called Flock. The source was an article at BusinessWeek. Now here’s the interesting part:

It’s a fairly long article about a web browser, and it mentions a few other web browsers including Firefox, Opera and IE. It also mentions websites Amazon.com and del.icio.us. But the only links in the article are to stock quotes and an earlier article.

I understand that it’s Business Week, and I’m not saying they should have linked to every website that was even tangentially mentioned—but you’d think they could have at least linked to the browser company they just profiled! I had to get that link from Slashdot! (Unfortunately, so did everyone else, so I won’t be able to look at the page until tomorrow.)

Edit: Compare the BusinessWeek article to Wired’s take from last month. Even taking into account that they’re written for different audiences, BusinessWeek still looks like a print article that’s been thrown up on the web.

Posted on
by

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.

Posted on
by

The Web Standards Project has announced a joint task force with Microsoft to promote web standards in products like Visual Studio and ASP.NET.

I imagine this was probably a factor in the decision to divest themselves of Browse Happy last month. Certainly this project is more in line with their core mission—promoting the use of standards on the web—and fits right in with the Dreamweaver Task Force they ran with Macromedia back in 2001.

(via WaSP Buzz)