Browser statistics – time to wake up!

Usage_share_of_web_browsers_(Source_StatCounter).svg

Hello World! Time to wake up and smell the browser statistics of 2013! All of those sites and developers who still claim that you need Internet Explorer for viewing or using their site needs to wake up.

According to several sources Chrome is now the individually largest web browser at roughly 35% market share. Noteable exception from this statistic is tracking done by NetApplications that pegs Chrome at only 19% (and Internet Explorer at 54%). Still, 19% market share means almost one in five visitors use Chrome!

It’s time to let go of the past. Reverse your conditions and say that this site is best view in ANY web browser EXCEPT old Internet Explorer versions. Adhere to standards instead of individual browser versions. A website can be made to look and work almost identical in majority of web browsers (including the latest version of Internet Explorer) if one simply takes the effort to learn how to do that.

The only case when I can accept shortcuts with limiting testing to a single browser (and even version) is for intranet applications in a controled environment. The rest of the world should head for the future and develop for Chrome, Safari, Firefox, Opera and of course also Internet Explorer!

Installation av Internet Explorer 9

Idag skulle jag installera Internet Explorer 9. I någon form av respekt för Microsoft använde jag Internet Explorer 8 när jag skulle ladda ner den nya versionen. Jag gick till Microsofts hemsida för att ladda ner den men jag fick ett felmeddelande när fil-nedladdningen skulle börja. Då det inte fungerade tog jag fram Firefox 4, då startade nedladdningen direkt…

2009 – the year of the browsers

In 1989 we had zero web browsers as we know them today, allthough just about to be invented around the corner. In 1999 we had two web browsers fighting a death match, Internet Explorer and Netscape Navigator – a fight with Netscape cleverly lost by dying and coming back several open source reincarnations of which Firefox of course is the most well known today. 2009 is turning out to be yet another battle year for browsers, this time many more of them! We have (in no special order) the newcommer Google Chrome fighting Firefox and Internet Explorer (mainly the PC-side). We have Opera who has cut out a piece of the action on several systems but shine mostly in portable devices. Safari is ruling the Macintosh but is starting to get some interference from Firefox.

Well that is now, what is next? I ready a post about current state of browser development, and many of the major browsers have a beta our that will maybe go live sometime during the next year. While this might be very good news for home users I am sure it will mean alot of work for someone like myself who create on-line applications. There used to be a lot of tuning to make web pages and applications look and work the same on the old “two major browsers”, now we have at least 5! Unless the browser developers makes a great effort to follow the rules of the standards each web page have to compensate for how a particular browser parses the data.

In the past Internet Explorer have seemingly intentionally ignored several standards in favour of making programmers like myself forced to make pages look good on their browser. Internet Explorer is afterall the dominating browser and it have to work. The question is if this strategy is allowed to continue. I really hope for the sake of us programmers that while there are five new browser versions about to be released that several of them will render the basic pages using the same rulset.

Google Blueprint CSS tutorial

This is a basic tutorial of the first use of Google Blueprint as a CSS layout.

Download Blueprint CSS
Download the main library att Google Code, at the time of this writing that is the file “Blueprint 0.7.1.zip”.
http://code.google.com/p/blueprintcss/downloads/list

There are three folders in the ZIP-file, first you have the “blueprint” folder which contains the ready to use CSS-files (ie.css, print.css and screen.css). While there are more files in that folder we will only concern ourselves with those in directly in the “blueprint” folder and not subfolders.

I will not go into detail about the two other folders, for your information the “lib” folder contains YAML source for the project and the last folder “tests” contains sample pages you can play around with if you’d like.

Fast reference PDF
There is a nice “cheat page” you can print out from a PDF, this is optional though but I found it very helpfull at least while learning the new classes.

Link the CSS-files
All you need to do is copy the three CSS-files in the “blueprint” folder into a directory of your choice in the main HTTP directory. I assume you put them in a subdirectory simply called “blueprint”. Next you need to link them in the HTML-files where you wish to use them, add the following code:

<link rel=”stylesheet” href=”blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”blueprint/print.css” type=”text/css” media=”print”>
<!–[if IE]><link rel=”stylesheet” href=”blueprint/ie.css” type=”text/css” media=”screen, projection”><![endif]–>

The first CSS defines how to display the page on normal monitors and projectors. The second file is for printing and the last file, surrounded with an IF condition to only be used by Internet Explorer, is specific instructions for the naughty web browsers that do not follow the standards.

Make a HTML file that uses the Blueprint
I assume you know HTML and CSS so I skip the basics and move straight to the new classes that blueprint offers. Simply put you need an outer DIV of the class “container” that will be the parent object of all others. Inside of this you can decleare HTML code as normal. A real simple first page could look something like this:

<div class=”container”>
<div class=”span-24 last”>
<h1>Hello World</h1>
</div>
</div>

The outer DIV is the container of all objects. The second div defines itself as a “span-24” and “last” class. Span-24 is the max width (950 pixels) and will span the entire area inside the container, last is added to signal this is the final column on this row (it’s also the only so in this case maybe a bit overkill).

Now after this it’s very easy to expand the concept, for example to make a “top headline and under menu + content” layout simply write:

<div class=”container”>
<div class=”span-24 last”>
<h1>Hello World</h1>
</div>
<div class=”span-4″>
The menu
</div>
<div class=”span-20 last”>
The content
</div>
</div>

This still doesn’t solve the more complex aspects of CSS-layout when you need everything to be “just right” but with an overall layout made this easy you can focus on the end tweaking instead of re-inventing the basic wheel everytime you need to make a new design.

Conclusion
The absolute best part about the Blueprint CSS is a “small” feature internally namned “rest.css” which is part of the “screen.css” file. This resets all browser settings to one single setting (Firefox, Internet Explorer etc all have slightly different default values for border, margins, padding etc) making cross platform development much much easier. Secondly, and the acctual main purpose, the ability to easily create new columns and layout modifications really improves start up development time of new designs. While the Blueprint CSS just have very basic settings it’s often these basic settings that screw up every new design I make since I tend to aim a little too high everytime I write a new CSS-class.

Small update on Google Analytics

I’ve used the code from my previous post on almost all my sites now a couple of days and all the statistics are still working and I no longer experience any slow loading times using Firefox with NoScript. Until I see either a change in Googles code (that they use a single domain for javascripts) or a new version of NoScript (that makes an exception for Google-related domains if you allow google-analytics.com) I will keep this code as it greatly improves the performance of my website.

Slow loading with Google Analytics

I experienced my pages slowing down when using Google Analytics togheter with my Firefox AddOn NoScript. Since I’m far from the only one using NoScript I found this not acceptable and worked out a possible work around.

The reason for the slow down is likely the timeout of the connection between my domain (where I’ve allowed scripts to run) and Googles domains (where I might or might not have allowed scripts).

Googles code look like this (where “UA-1111111-1” is your tracking ID):

<script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-1111111-1”);
pageTracker._initData();
pageTracker._trackPageview();
</script>

The first part of the code creates an obfuscated loading of the script located at google-analytics.com/ga.js. It picks a prefix of www if it’s a standard connection and ssl if it’s  an encrypted connection. The problem is that NoScript does not recognize this code and ends up in a deadlock of wether or not to allow the script to be run. My guess is that there is another script loaded from another domain called googlesyndication.com which fails to enter the NoScript-test and locks the loading of the page.

A possible fix that I’m still evaluating but which should do the trick is the following (code in bold added):

<script src=”http://www.google-analytics.com/ga.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-1111111-1”);
pageTracker._initData();
pageTracker._trackPageview();
</script>

As you can see I’ve made the obfoscated code clear text code and chosen the http://www-prefix (since I’m not using an encrypted connection for my server). Should you use encryption on your site simply switch http://www to https://ssl instead (this is what the javascript used to do). If you have a page which might be loaded encrypted or normally then you would have to include this choice earlier in a server side script for example.

After this fix Google Analytics works like a charm togheter with NoScript on any script-level setting for me.

Try this at your own risc, this is still experimental to me as well!

Firefox profiles – tips & tricks

With the latest version of Firefox I’ve found myself using more and more Addons for specific purposes. I also started “saveing” open tabs when closing, to easier get back into my blogging / working again. Due to these reasons I found myself wanting a “work Firefox” and a “casual surfing Firefox” (mainly for other people who sometimes use my computer so they don’t “mess” with my work Firefox).

Luckily the profile system in Firefox can solve this quite easily! If you want multiple profiles within the same login on a computer follow these simple steps:

1: access the profile manager

You have to add at least one more profile, or however many you want on the same machine. To do this run firefox with the following argument:  –profilemanager

The easiest way to do this is to change the shortcut destination like so:

“C:Program FilesMozilla Firefoxfirefox.exe” –profilemanager

Please note that the path should not be changed, only the addition of the profilemanager argument.

2: create new profiles

Start Firefox using this command and simply choose “add profile” and name the profiles you want.

3: Create shortcuts to profiles

When you have the profiles you want you can either always use the profile manager (or check the “always ask” checkbox) or you can create custom Firefox shortcuts that opens a particular profile with the -d [profile] argument. For example, to start the defualt profile use the following command:

“C:Program FilesMozilla Firefoxfirefox.exe” -P default

You can now copy the shortcuts and make a shortcut to each profile you want easy access to. Each profile will be totally seperate with own AddOns, History, Tabs and Settings.

Firefox 3.0 follow up

After a few weeks of Firefox 3 usage I must say I now do not miss Internet Explorer at all. With the add-ons available I’ve managed to customize my web browser exactly how I want it (only a few innovative ideas I have myself are missing).

It’s proven it’s stable and fast, I’ve used it on a mixture of laptops and operating systems (Ubuntu 8.04 and several Windows versions) and everywhere it has worked as perfect as could be expected.

As I earlier argued it has several advantages over Internet Explorer and I will now go in depth on one of the advantages: AddOns.

Firefox AddOns are programs that extend the functionality of the web browser and I will rank the best I’ve come across so far.

Recommended addons
Everywhere I install Firefox I always install 2 particular AddOns, Adblock Plus and NoScript. These two make surfing the web safer and faster and despite NoScript requering some interaction when visiting new sites I do not find this bothers me at all. The ad-blocker works fantasticly with the EasyList subscription that contains some standard filters for ads.

After the two “essential” Addons I usually pick up the IE Tab addon.  With this addon you can choose to open sites or links in a tab that is powered by Internet Explorer. You can also write a filter so that some pages (like Windowsupdate.com, Microsoft.com and such) are always opened in IE Tab, this saves you from having to switch browser for sites programmed entierly for Internet Explorer.

If you not only just surf the web but also use FTP the FireFTP addon is worth a look. While being far from the best FTP client I’ve seen it gets the job done and is very easy to use.

Del.icio.us have been a great tool for bookmark handling and the latest installment of a Firefox addon does not dissapoint. Easy interface and installation, though a word of caution: if you run NoScipt make sure to have del.icio.us on the whitelist for scripts or the installation will fail.

Those where my recommendations for now, since I’m soon on a holiday I don’t think I will have time to check out all the developer addons available but I sure will when I get back to work.