Archive for the 'Webdesign' Category

The end of IE6 is soon?

Sunday, February 22nd, 2009

In the light of recent ideas that Web designers should spend less and less time, making fixes for Internet Explorer 6 (this browser is almost 10 years old already), I was curious to compare some browser stats for optimiced.com.

But first, a couple of words about the reasons why support for IE6 should be limited.

The Reasons

Dan Cederholm: How I Might Deal with IE6

Roger Johannson: No more pixel perfectionism in IE 6

Basically, the idea is as follows: Limit the time, which you dedicate to IE6, to the possible minimum. Yes, the design will look a bit different in this old browser, but so what? The important thing is that the design should work, and that there are no problems with the accessibility or functionality of the website.

In certain cases, you can even decide, if you wish to ensure a minimum support for IE6, or completely ignore it, in a similar way that Netscape 4.7x was ignored years ago, using the @import command for CSS styles.

For IE6, you can use IE conditional comments, like in this example:


<!--[if gte IE 7]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

“Translated” to human language, this small piece of HTML code means the following:

If Internet Explorer is version 7 (or higher), the CSS file ‘screen.css’ will be loaded. Otherwise, the file won’t be loaded (IE6 or lower). All other browsers (Firefox, Opera, Safari, etc.) will load the file screen.css quite normally. I have tested this in Firefox 3, Safari 3.2, IE7, IE6, and the code works perfectly.

Here’s the test example

Open this page in Firefox, Opera, Safari or IE7+ — the background of the page should be green, and it means that the ‘screen.css’ file is loading normally.

Open the same page in IE6 (or even older version) — the background should be white, and it means, ‘screen.css’ is not loading for it.

And now about my browser stats.

I decided to check, how many site visitors of my personal blog are using Internet Explorer, how many of them are using version 6, and also, how stand up the numbers for Firefox and a few other popular browsers of today.

The Numbers

As a base for my comparison, I took the last month (Jan. 22 — Feb. 22 2009), and I also compared this period with the same period, but 1 years ago (Jan. 22 — Feb. 22 2008).

Firefox (Jan. 22, 2009 — Feb. 22, 2009): 56.18% of all visits
Firefox (Jan. 22, 2008 — Feb. 22, 2008): 49.79% of all visits
Firefox: +6.39% increase in number of visits, during a period of 1 year

Internet Explorer (Jan. 22, 2009 — Feb. 22, 2009): 33.47% of all visits
Internet Explorer (Jan. 22, 2008 — Feb. 22, 2008): 40.90% of all visits
Internet Explorer: -7.43% decrease in number of visits, during a period of 1 year

At the present moment, Opera is around 5%, Chrome is around 3.2% and Safari around 1.5% (of all visits to my site). All other browsers (Mozilla, for example) have so low numbers, that they can safely be ignored.

The tendency is clear. Firefox slowly, but constantly is increasing its influence, while Internet Explorer makes exactly the opposite. Safari, Opera, and also Chrome, are present in the whole picture, but quite modestly. Firefox and IE are the “big players”, or at least, this is true for my blog visitors… :)

Now let’s see the numbers for the different versions of IE.

IE7/IE8 vs. IE6

IE7 (Jan. 22, 2009 — Feb. 22, 2009): 55.22% from the total share of IE in the stats
IE7 (Jan. 22, 2008 — Feb. 22, 2008): 41.59% from the total share of IE in the stats
IE7: +13.63% increase in number of visits during a period of 1 year

IE6 (Jan. 22, 2009 — Feb. 22, 2009): 43.64% from the total share of IE in the stats
IE6 (Jan. 22, 2008 — Feb. 22, 2008): 57.18% from the total share of IE in the stats
IE6: -13.54% decrease in number of visits during a period of 1 year

The trend here is also clear: IE6 slowly loses grounds, while IE7 is becoming more and more widespread.

IE8 Beta also appears in the stats, but the numbers are very low — around 1%.

The Verdict

Firefox: 56.18% from all visits to the website
Internet Explorer: 33.47% from all visits to the website
— IE7: ~ 55% (of all IE visits)
— IE6: ~ 43% (of all IE visits)

In total, my users, which are using IE6, are less than 15%. All others use Firefox, IE7, Safari, Opera and Chrome.

Is 15% too low a number, so I can apply the CSS “filtering” for IE6? No, it is too early for that, I think.

But I guess that in 1-2 years the share of IE6 will become so low, that there really won’t be any point in trying to fix the XHTML/CSS code for it.

And then IE6 will become history, in a much similar way that Netscape Navigator 4.7x became history a few years ago — something which made me very happy at the time! :-)

Most popular fonts on Windows, MacOS and Linux

Sunday, February 15th, 2009

If you are a Web designer and often write (X)HTML/CSS code, then the following list might be useful for you. In it, I have combined the most popular fonts on Windows, MacOS and Linux systems. The data is drawn from here and the stats are valid as of January 17th, 2009:

Windows:

Microsoft Sans Serif: 99.61%
Arial Black: 97.82%
Franklin Gothic Medium: 97.58%
Palatino Linotype: 97.54%
Verdana: 97.54%
Arial: 97.13%
Courier New: 96.96%
Comic Sans MS: 96.83%
Tahoma: 96.79%
Lucida Console: 96.76%
Impact: 96.49%
Trebuchet MS: 95.97%
Sylfaen: 95.00%
Lucida Sans Unicode: 94.34%
Georgia: 92.97%

Mac:

Monaco: 96.91%
Arial: 96.62%
Courier: 96.48%
Helvetica: 96.48%
Arial Black: 95.78%
Verdana: 94.37%
Georgia: 93.53%
Helvetica Neue: 93.07%
Trebuchet MS: 92.69%
Geneva: 92.41%
Courier New: 92.12%
Gill Sans: 91.58%
Comic Sans MS: 91.42%
Times New Roman: 90.58%
Arial Narrow: 90.44%
Apple Chancery: 90.15%
Skia: 90.15%
Lucida Grande: 90.01%
Futura: 89.73%
Hoefler Text: 88.47%

*nix:

DejaVu Sans Mono: 92.31%
Bitstream Charter: 90.77%
URW Chancery L: 89.87%
Nimbus Mono L: 89.35%
Century Schoolbook L: 89.09%

In bold above I have marked 7 font families in total. They are those fonts, which are found often on Windows and Mac (simultaneously), and these are (in mixed order):

1. Verdana (sans-serif font family)
2. Georgia (serif font family)
3. Courier New (monotype font family)
4. Arial (sans-serif font family)
5. Arial Black (sans-serif font family)
6. Trebuchet MS (sans-serif font family)
7. Comic Sans MS (sans-serif font family)

Unfortunately, none of these 7 fonts can be found among the most widespread fonts on Linux/Unix. Looks like I was wrong, when I assumed, that Verdana, for example, is one of the most popular fonts on Windows/Mac/Linux — the full stats show that Verdana is available on more than 90% of Windows/MacOS systems, but only on ~ 50% of the Linux systems…

More interesting conclusions can be made from the two available lists (short and long), for me it is enough to know that there are at least a few font families, which can be found on Windows and Mac systems at the same time.

Or, at least, your chances are quite high that one of these 7 fonts will be available… :-)

CSS 3D effect

Thursday, March 6th, 2008

Step 1:

Open Silverback.

Silverback app (screenshot)

Step 2:

Resize slowly your browser window (Firefox, Opera, Safari, IE7 are all ОК) and…

Step 3:

…watch the effect. Cool!

There’s a discussion on how the quasi-3D effect was achieved using CSS + half-transparent PNG graphics — to me it reminds me the old video games; and looking at Steve, I instantly think of Nintendo’s Donkey Kong!

CSS rullz! ;-)

xScope for designers

Thursday, March 6th, 2008

xScope 2 iconSmart tools as xScope 2 make me feel sorry sometimes, that I don’t own an Apple Mac! ;-)

If you work on a Mac and do (web)design, I recommend you to drop a look at Doug Bowman‘s blog, where he wrote a detailed explanation about xScope (in short, this is something like Screen Calipers, multiplied by 10… or even 100!).

Argh! This is called Win-discrimination! :-D

Two or more Google Analytics accounts in one page: How-to

Thursday, October 25th, 2007

Yes, it is possible.

No, it won’t work with a simple “copy-paste” of the two Google Analytics codes.

Read on, if you want to know the solution which I discovered by experimenting! :-)

* * *

Not a long ago I had to play a lot with GoogleAnalytics. I had also the idea of creating one GoogleAnalytics profile for the whole domain, and separate profiles for some of the sections in the website. Thus the statistics for the whole website and its sections could be tracked in an easier way, like if you were watching the statistics for separate websites, while having at the same time an overall look at the traffic for the whole domain. (I believe there are other means of achieving the same goal with GA, but for me the method above was the easiest to implement.)

So, I’ve created separate profiles in Google Analytics (one profile for the whole website and several others for the site sections), copied the HTML codes from GoogleAnalytics on each page, and waited for the results. 24 hours later I discovered that:

1) The first (for the whole domain) GoogleAnalytics profile works and gathers data (the code for it was always first in the html code in the pages).
2) The GA profiles for each section do not work (they show zero traffic), notwithstanding the fact that Google Analytics claims that the GA code is inserted correctly and works (the code for each site section was always after the general profile code).

The things at this moment looked like this:

<!-- GoogleAnalytics code for the whole domain -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-XXXXXXX-X";
urchinTracker();
</script>
<!-- GoogleAnalytics code for a specific site section -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-XXXXXXX-X";
urchinTracker();
</script>

Copy-pasting the GA codes one after the other didn’t work… After some research and googling around, I’ve found the following solution:

(more…)

Apple Safari 3.0 Beta – version for Windows

Thursday, June 14th, 2007

Safari 3.0 Beta for WindowsSafari – with a brand new Windows version! Sounds almost incredible, but it’s a fact…

I saw the news by accident – dropped a look to the new design of Apple (MacOS X Leopard, being the reason for the new design, I guess), and from there clicked the Download Apple Safari 3.0 Beta… for Windows! How can you resist not to click such a link! :-)

Internet Explorer won’t have a version for MacOS anymore (unless Microsoft change their mind at some point). The last version was IE 5.2/Mac and that was ages ago…

And now Apple releases a version of Safari for Windows!

I downloaded the beta [Safari version 3.0.1 (522.12.2), to be precise] — I was curious, of course — I do not have constant access to a Mac, so even only for testing of websites in Safari this version would be of great use for me:)

Three things make impression immediately:

  • Safari on Windows looks like Safari on Mac;
  • some Windows functions don’t work (for example, you cannot scroll the page when you press down the scroll (middle) button of the mouse);
  • font rendering looks very different – Windows doesn’t have any influence on the rendering of the fonts – nor ClearType, nor any other way of anti-aliasing (font smoothing) works…

(more…)

35 Designers by 5 Questions

Friday, April 20th, 2007

Smashing Magazine published today a very interesting article.

35 web designers were asked the following five questions:

  • 1 aspect of design you give the highest priority to.
  • 1 most useful CSS-technique you use very often.
  • 1 font you use in your projects very often.
  • 1 design-related book you highly recommend to read.
  • 1 design magazine you read on a daily/weekly basis (online or offline).

The answers? You can read them in the article itself:-)

CSS is Back

Saturday, April 7th, 2007

Optimiced.com - how it looked for over 48 hours :-)I put again my CSS clothes after stripping them off for more than 48 hours :)

Overall, this year’s CSS Naked Day was fun (my first participation, btw)

Over 1600 official participants this year (see the full list at: http://naked.dustindiaz.com)! But rather less noise than when the first CSS Naked Day came…

But I’m happy I was in :-)


[ optimiced.com is the virtual home of Web & graphic designer Michel Bozgounov | powered by WP & hosted by DreamHost | also available in български ]

1.026 / 37 / 30.25