Rebreaking The Web

It’s happening again. Once upon a time, browser vendors started adding their own features without consulting with each other and agreeing upon standards. What they created was a giant mess of inconsistencies across browsers and platforms that is still in effect today. Ask any web developer and they can tell you of the pains that they have suffered trying to make seemingly trivial things work everywhere consistently. It’s no easy task. Before IE 7, even an ajax required something along the lines of:

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, …
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

That’s right, IE 6 didn’t support the native xmlHttpRequest object (more here). This is just one of many examples in JavaScript and CSS. document.all anyone?

The end result of this problem became to be known as the “Web Standards” movement. Simply put it’s an idea that code should follow a standard that results in consistent output across all browsers on various platforms. Write once, run anywhere. While it’s taken years for this to manifest, it’s slowly become a reality. Firefox, Safari, Opera have fairly consistent rendering (at least in comparison to the mess of just a few years ago on the browser scene. IE 6 was fairly poor in terms of modern web development, but IE 7 made progress, and IE 8 is Microsoft’s greatest effort to date to bring their browser up to speed.

Continue reading

A Standards Based Future

I wrote a few weeks ago about Microsoft’s plan to require a meta tag to use standards mode rendering in IE8. There was a ton of backlash. I can’t remember the last time so many browser and web developers publicly spoke out so quickly on an issue. It was pretty obvious to everyone that it wasn’t a good thing for the web.

Microsoft has had a change of heart, and will now use the new standards mode by default, and an IE7 compatibility mode via a meta tag. This is a much better move as it will mean more rapid adoption of standards. The point in which we will be able to develop on a more level playing field moved much closer thanks to this move.

As everyone around the web is noticing, this little nugget in the press release is pretty interesting:

“While we do not believe there are currently any legal requirements that would dictate which rendering mode must be chosen as the default for a given browser, this step clearly removes this question as a potential legal and regulatory issue,? said Brad Smith, Microsoft senior vice president and general counsel.

Most seem to think that’s a reference to Opera’s antitrust complaint with the EU. I would agree.

Go Standards Campaign?

I wonder if it’s worth some sort of cross-vendor campaign (Mozilla, Microsoft, Opera, WebKit/Apple) to get users to adopt modern browsers in a much more rapid pace. IE6 is hanging around for much longer than one would like. I suspect IE 8′s adoption won’t be very quick either. Perhaps it’s necessary for it to be combined with a GoPHP5 style campaign where older browsers are unsupported as of an arbitrary date. While Microsoft may have some obligation to provide security patches until the apocalypse, there’s no reason why websites must support it.

This is of course hard to implement as nobody wants to jump on this train unless all their competitors join in. It would take coordination on the level of Google, Yahoo, Facebook, AOL, Amazon, Adobe sized sites. Odds of something like that working are <5%, but I could be wrong. As a web developer dropping IE6 is a dream I can’t wait to see happen. It would however be interesting to see what innovation would take place if browser support suddenly became much more level.

Give Us Milestone Builds

It would be nice if Microsoft would start shipping milestone builds in a somewhat regular interval (weekly, monthly) so that developers can constantly test and evaluate how their websites behave in IE 8. It would be nice to know up front what we are looking at. Of course this is best when your bug database is open, but even when it’s closed, it’s still helpful to know where you stand at all times. I regularly test websites I work on in WebKit, Opera, Firefox nightlies. Why do I do this? So I know exactly what’s coming. So I can track issues I may have to fix, or the vendor may need to fix. I also can make a time estimate on how long it will take until I’m ready for browser x. Generally with those browsers the time estimate hovers around 0. Every so often an issue worth looking into arises.

I think this would really help the web ease into a fully standards world.

The new generation of browsers including Firefox 3 and IE 8 are really shaping up.

Meta Stupidity

As Robert O’Callahan, John Resig, Anne van Kesteren all point out, this idea of using a meta tag to select a rendering engine is bad. Here are my personal thoughts on the issue. Not as a browser developer but as a web developer.

Essentially the argument by the IE team is this: Rather than fix the problem, lets create a larger problem so the smaller one isn’t very noticeable.

Yea, that’s how I parsed the blog post. For anyone who disagrees, perhaps I interpreted it wrong because they didn’t select the correct parser because they didn’t include the following:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;raccettura=serious;OtherUA=4" />

All joking aside it’s an insane idea guaranteed to set things back.

Continue reading

Tab Impact On Total Time Spent

As everyone in the industry knows, Nielsen/NetRatings no longer relies on page views instead preferring total time spent. This makes sense since ajax applications can have 1 page view, but keep a user for an hour. Not to mention other things like video or Flash. The use of time spent is likely much more accurate. In my mind “time spent” is time actually spent on the site (I’m a literal guy).

This of course raises an interesting question. How do tabs influence this metric? Take the following situation as an example. A user visits a home page, and opens a link in a new tab. Then finds another link and opens it in a new [background] tab. That’s 3 tabs in 1 visit (assume visit to be 30 minutes).

Before tabs, most browser sessions would look like this:
Linear Pathing

There’s now an increasing number that will look like this (gray is a tab not in view):
Tabbed Pathing

If we assume total time on the site is time between the first and last page, we potentially undercount the total time on sites that list information (for example Digg). The total time to make those clicks could be < 10 seconds, but the time spent reading those two page alone might be > 10 minutes. Many tab power-users from what I’ve read around the web over the years essentially use them as a way to bookmark their “to read” list (including myself). It also undercounts sites like Gmail which are ajax based (1 page) but can be used for several minutes.

If we use javascript to “ping” (call back by placing a tracker gif) the analytics service every x seconds to see if the page is still open, we potentially double count since a user can’t be in 3 tabs at once. The clock would be counting 3 seconds for every 1 second the user is actually looking at the page.

This raises the question: are sites that are heavily used by Firefox, Safari, Opera and IE7 site underestimated or overestimated because of the way users browse the site? How do you accurately tell how long a view is when a user can have multiple tabs?

Another example is someone who keeps their webmail open in a tab all afternoon for easy access. They may only check it 1x measuring no more than 1 minute in actual attention. But it’s open for 5 hrs. What is the real time on the page? You can measure my interaction (opening/closing mail). But what if I’m reading an email for an hour (it’s a really complicated one)? How does that compare to just leaving it open in the background?

This is really no different than using new windows, the difference being that most people seem to have found windows to be annoyance, while tabs are a “feature”. The increase in usage and popularity in a time where visit length matters raises an interesting question. How do you measure it?

One assumption is that it’s just a small percentage of the population, which is likely true. The problem with this assumption is that it’s one subject to change as the browserscape matures and users learn about new features. Another assumption is to just account for all time a page is open, even if it’s not visible. The downside I see here is that it’s pretty inaccurate. As a content producer I’d like to know if my content is used, or just loaded on a users computer. If I were an advertiser I’d care even more.

I’m not sure how analytics firms approach this. In a sense it’s similar to the “hotel problem“. Perhaps just something you need to decide upon and live with.

Benchmarking And Testing Browsers

When people talk about open source they often talk about the products, not the process. That’s not really a bad thing (it is after all about the product), but it overlooks some really interesting things sometimes. For example open source tools used in open development.

A few months ago Jesse Ruderman introduced jsfunfuzz, which is a tool for fuzz testing the js engine in Firefox. It turned up 280 bugs (many already fixed). Because the tool itself is not horded behind a firewall it’s also helped identify several Safari and Opera bugs. It’s a pretty cool way to find some bugs.

The WebKit team has now released SunSpider a javascript benchmarking tool. Something tells me this will lead to some performance improvements in everyone’s engine. How much will be done for Firefox 3.0 is a little questionable considering beta 2 is nearing release, though you never know. There’s been some nice work on removing allocations recently. So just because it’s beta, you can’t always assume fixes will be minor in scope.

Another test that many are familiar with is Acid 2 which essentially is checking CSS support among browsers. Ironically this one too was released when Gecko is somewhat late in the development cycle.

Efforts like this really help web development by allowing browser developers to have a baseline to compare their strengths and weaknesses. Having a little healthy competition as motivation can be pretty helpful too ;-) .

Browser Wars On Google

If you search for Firefox using Google you’ll see this ad towards the top:

Firefox Adwords Campaign

Look over to the right side and you’ll see this:
Microsoft Adwords Campaign

Here’s a larger complete screenshot for anyone interested.

Interesting eh? They aren’t threatened though. Here’s another tidbit. A search for “Safari” brings up a Microsoft ad as well. A search for “Opera” or “Opera Browser” does not. A search for “Browser” will. A search for “linux” will bring up a few Microsoft ads as well as a Firefox ad.

Wii Browsing

Now that the Wii Browser is available, I’m really thinking I should check it out. It’s based on Opera. In my mind they needed to have a few things in order for this to not suck:

  • Fairly good HTML/XHTML support – Opera has that
  • Good support for CSS – Opera has that as well, but available for all small-screen versions
  • JavaScript Enabled – Opera has pretty good JS support, but not always available for small devices.
  • Support for Macromedia Flash – Especially with the popularity of YouTube, it’s needed

Apparently it meets these requirements. I really need to check this out. As a web developer, seeing something like this after years of crummy non-PC based browsers could be impressive. Screenshots so far have not disappointed.

Opera 9.0 Tech Preview 2

For those interested (if you’re into browsers, you should be): Opera 9.0 Tech Preview 2 is out. The widgets look rather good. Very Apple like in quality, I’ve only looked a the ones by Opera. I assume we’ll see more soon. I really hope XULRunner will be used for such a purpose soon. With the new Cairo backend, <canvas/> and SVG it would be very cool to see what people could come up with.

There’s lots of interesting fixes/features to obsess over, not sure what my favorite would be. (though CSS 3 opacity is eye catching).

Curious how hard it would be to port Apple Widgets, or Yahoo Widgets. Hopefully that will all be somewhat standard one day, and you can use a widget with any platform you want (I hope Apple, Yahoo, and Opera all realize that would be to their advantage as well, granted rendering engines would cause some platform specific things).

Could it be a better time for the web? So many choices, great products all around.

Confusing Cross Browser UI Design

Most have heard by now that Internet Explorer is adopting the Firefox RSS icon to standardize and help users who hate having to remember what equivalent icons are. Of course this is great for users. Though I wish they were a bit more consistent with their practices. UI design cross browsers is important simply for security purposes (as I will demonstrate). IE has apparently made some great strides in combating Phishing. What I disagree with, is how they implemented the UI. I think it’s confusing, and could easily be fixed, should they decide to do so.

Their scheme essentially works by coloring the URL bar based on how suspicious the website is. Known scammers get red, suspected get yellow, and a potential good site would be green. This is obviously modeled after a traffic light.

What I dislike is how that can be confusing to the end user. Right now, the colored URL bar technique is used by Firefox and Opera to distinguish a secure website (since it’s more obvious than the little lock). Take a look at the little demo I have here:

Good Site Opera 9

Opera 7

Good Site Firefox 1.5

Firefox 1.5

Bad Site Internet Explorer 7

Internet Explorer 7

Screenshot from IE Blog.

For an end user, who doesn’t follow browser changes, and perhaps first encounters IE 7 at work, or in a public terminal. Seeing the yellow bar is familiar. We know that as being safe. I think many wouldn’t even notice the “Suspicious Website” text on the right side. The shield even looks a bit like the Lock icon in Firefox. Very confusing.

My suggestion is to use another color, in particular, one that I call “orange”. I release the color “orange” under a Public Domain License. Anyone may use it, however they may wish, no need to credit me ;-) (though I’d appreciate it).

Bad Site Internet Explorer 7 + My Solution

Internet Explorer 7

This would distinguish the site as a possible fraudulent website, but still avoid using Yellow, which many users now view as “secure” aka “safe”. This solution solves the problem of conflicting UI design between browsers.