Jun 25

Dear Internet Explorer users ;-)

2005 at 06.48 am posted by Veerle

Here is just a short announcement that you, Internet Explorer users, can now scale the text of my blog. Well, since I reckon your patience has been tested long enough, I thought I owe you one.

Not sure but it could be that my stubbornness of using px for my fonts in the CSS stylesheet had a bit of influence to a lot of I.E. users that decided to switch to a smarter browser :-) These stats are not really surprising to me (anymore), but maybe to the 32% I.E. users reading my blog (from the past 2 months, on an avarge of 40 to 42 thousand unique visitors).

Mozilla (Gecko) 50%, I.E. 32,6% (vs 6.x 31.1% - vs 5.x 1.5%), Safari 13.1%, Opera 2.3%, Netscape 0.6%, Camino 0.3%, Mozilla 0.1%

Needless to say that the nature of this site is the main reason why I.E. is losing such a big share of the cake.

Anyway I hope this is an improvement and that I made some of you happy.


32served

gravatar

1

permalink this comment Raven Sat Jun 25, 2005 at 08.54 am

I’m happy and a bit sad at the same time.... Happy that my favorite browser (Safari) is in the top 3, but also sad that it only holds 13%. Nevertheless, all in all nice to see that “good’ browsers are clearly on the rise and, to some people at least, IE is no longer the only player. Look out, M$, we’ve got some new kids in town.


gravatar

2

permalink this comment Roger Johansson Sat Jun 25, 2005 at 11.36 am

The browser stats for my site are pretty similar to yours, but slightly “better”: 55% Gecko, 24% IE ;-)


gravatar

3

permalink this comment Dileno Sat Jun 25, 2005 at 11.57 am

66.7 % of my visitors are Firefox users, IE 6 only holds 25 % and Safari only 3 %. That’s strange, cause nearly 10 % of my visitors are Mac users and I thought Safari was used by most of them.. ;)


gravatar

4

permalink this comment Static Sat Jun 25, 2005 at 12.02 pm

it’s simply because firefox rulez!

Dear Veerle can you tell me how did you’ve done the pie graph? illustrator? any tutorial for that?


gravatar

5

permalink this comment Simone Merli Sat Jun 25, 2005 at 12.13 pm

Hi veerle my stats are:

Safari No 6793 43.2 %
FireFox No 4856 30.9 %
MS Internet Explorer No 3289 20.9 %
NetNewsWire No 324 2 %

I’m really happy about IE losing share…


gravatar

6

permalink this comment Dileno Sat Jun 25, 2005 at 12.26 pm

And as Raven states, “IE is no longer the only player”. That’s true, but the majority of the Internet users in Sweden (and probalby world-wide too) don’t even know Firefox, Opera or even Safari.

And something tells me the browser stats we have are not at all like the stats “normal” (read not web development or similar web pages) web pages have.. :(


gravatar

7

permalink this comment Veerle Sat Jun 25, 2005 at 12.58 pm

@Raven, well just FYI about 20% of my readers are Mac users, Mac OS X that is (more then Windows 2000).

A website like www.habitus.be Firefox is around 5% a month ago (around May) and now it’s 5,3% already. So it’s climbing. Safari climbs too (now at 1,3%) and it’s not me since I’m excluded. FYI Opera 0,2%. Habitus is a Belgian construction company (houses). So visitors are as you can describe as ‘mainstream’.

@Static, yes indeed in Illustrator (CS2).  I’ve added it to my todo/ideas list :-)

Thanks for sharing your stats with me, interesting stuff.


gravatar

8

permalink this comment Static Sat Jun 25, 2005 at 06.08 pm

Veerle are you going do make a tutorial about that? :D


gravatar

9

permalink this comment Veerle Sun Jun 26, 2005 at 04.55 am

@Static, patience my friend ;-) Stay tuned!


gravatar

10

permalink this comment erwin Sun Jun 26, 2005 at 05.05 am

Hi veerle, i’m glad to see my fav browser is doing so well ;)
One thing that startled me was why the browser is “so slow” when starting it.
I stumbled upon firetune at www.totalidea.com/freestuff4.htm
It turns out to be a quick relief for my minor problem. My mys(t)ery now becomes history…


gravatar

11

permalink this comment Luc Van Braekel Sun Jun 26, 2005 at 05.09 am

Stats for the totality of my blog:

Firefox 23%
IE6 68%
IE5 2%
Mozilla 1.x 1%
Opera 0.x 2%
Safari 1.x 4%

English part:

Firefox 21%
IE6 66%
IE5 1%
Mozilla 1.x 2%
Netscape 5.x 1%
Netscape 3.x 1%
Opera 0.x 5%
Safari 1.x 3%


gravatar

12

permalink this comment Simone Merli Sun Jun 26, 2005 at 05.28 am

erwin, if you want a faster firefox (and you own G4 processor) you can try:

Firefox Community Edition, G4 optimized builds
http://homepage.mac.com/krmathis/


gravatar

13

permalink this comment Stephan Sun Jun 26, 2005 at 07.35 am

I think that because this is a website related to IT/Media/Design/etc you might get a higher number of FireFox users.  But I would not have thought 50%.  That is pretty sweet.


gravatar

14

permalink this comment Michel Vuijlsteke Sun Jun 26, 2005 at 09.17 am

[had some trouble with commeting before, posted this earlier on my own blog]

I was preparing a blog entry about browser stats just yesterday--interesting to see these numbers!

My personal website stats for the 151 164 visitors in the month of June so far tell me:

78.9% IE
15.9% FF and related
1.5% Safari
1.4% Netscape Navigator
0.5% Opera
1.8% Others

The main site at my job has the following for the month of June 2005:

91.8% IE
5.2% FF and related
0.8% Safari
0.5% Netscape
0.3% Opera
1.4% Others

This may sound “bad”, but there is some movement there. June 2004 had this:

97.1% IE
1% Mozilla
0.7% Netscape
0.2% Safari
0.2% Opera
0.8% Others

Interesting to see what browser stats say about a site’s visitors :)

Oh, and for the tutorial Static asked about: most people may not neccesarily associate Illustrator with pie charts, but there’s been quite a competent charting and graphing function in there for ages.

Quick step-through in Illustrator CS2:

1) select the Pie Graph Tool—http://blog.zog.org/images/pie1.png

2) Illustrator creates a black one-value pie chart by default and gives you a simple spreadsheet to enter data— http://blog.zog.org/images/pie2.png

3) Enter your numbers. When you make a pie chart, put your labels in the top row and the values across and press the checkmark apply button at top right to see the chart—http://blog.zog.org/images/pie3.png

4) Select the individual pie slices with the white direct selection arrow and apply colours to taste—http://blog.zog.org/images/pie4.png

Select the entire pie chart and add a white outline to separate the slices (note that this works better if you don’t have as many small slices as I have in this example) —http://blog.zog.org/images/pie4b.png

Now at this point you may be tempted to bring the entire thing over to Photoshop to add the glow effect and any necessary subtle drop shadows. I know I would: I feel I have more control over that kind of stuff in Photoshop and I’m still not comfortable doing what I feel are “pixel” operations in Illustrator.

Still, no real need to do so:

5) Select the entire pie chart and go to Effect > Stylize > Inner glow. Fiddle with the numbers until satisfactory, like so—http://blog.zog.org/images/pie5.png

Note that if you use the direct selection tool and do the inner glow you can get a sort of pillow emboss effect (if that’s your bag :)—http://blog.zog.org/images/pie5b.png

6) Select the elements you want “drop shadowed” and go to Effect > Stylize > Drop Shadow. Click the “preview” checkbo and adjust to taste—I used this—http://blog.zog.org/images/pie6a.png

The result—http://blog.zog.org/images/pie6.png

This could stand some tweaking (add the gradient in the legend, order the legend in descending order instead of ascending, tweak the colours and the glow/shadow effects to taste, add the percentages, etc.) but all that is easily done.

Just remember that you can find all the things you did to the different objects in the Appearance tab (Shift-F6 to toggle it, BTW). Select the entire pie chart and you’ll see the Inner Glow; double click that and you can adjust it. “Direct select” one slice and you’ll see its colour, etc.

Have fun!


gravatar

15

permalink this comment Veerle Sun Jun 26, 2005 at 10.18 am

@Michel, damn you :-P What do you think I’ve been doing today? ;-) Besides enjoying the nice weather a bit on my bike ...  It’s as good as finished but not online yet. It will be online tomorrow.


gravatar

16

permalink this comment Michel Vuijlsteke Sun Jun 26, 2005 at 10.22 am

Erm, what can I say?

In my defense: my original comment / blog post was made before you said you were going to do a tutorial :)

Feel free to remove (the relevant part of) my comment; if you prefer I’ll remove it from my weblog too.


gravatar

17

permalink this comment Veerle Sun Jun 26, 2005 at 10.38 am

@Michel, just kidding you of course ;-) The more the merrier! :-) But hey, I just notice your visitors number now, OMG! That much? Did you know that this amount traffic is as much as the site of HUMO gets, K2 etc. 


gravatar

18

permalink this comment Michel Vuijlsteke Sun Jun 26, 2005 at 11.02 am

I get an average of 5000 visitors/day on my various websites. Not by virtue of interesting content or anything but merely (a) because there’s quite a lot of text in those sites on an extensive range of subjects and (b) because I’ve been around relatively long (since 1994 or thereabouts on the zog.org domain).

The vast (vast!) majority of visitors arrive at those sites via the most obscure Google queries, don’t stay for more than one or two pages, and never come back.

It’s quite sobering when you see that visitor numbers keep going up (steeply!) even after you’ve stopped updating your website for months: http://blog.zog.org/2005/05/lessen.html


gravatar

19

permalink this comment Veerle Sun Jun 26, 2005 at 11.16 am

@Michel, aha cool! :-) Not that I will stop updating now hehe :-)

I once used ‘Peek inside Duoh!’ as window title for my first business site (back in 1997, it showed an illustration of a clickable cabinet that contained my portfolio) and I saw that a lot of people used ‘peek’ as a search term ... ha! You can guess why. People thought my site had something to do with voyeurism :-D


gravatar

20

permalink this comment Static Sun Jun 26, 2005 at 12.16 pm

Michel that’s awesome tutorial!

*Static starts illustrator*


gravatar

21

permalink this comment Anup Sun Jun 26, 2005 at 04.22 pm

Nice, but how about not fixing the width in pixels and defining that in ems, so as the font sizes increase, the design proportions remain the same. Bit harder work, but more flexible, accessible design!


gravatar

22

permalink this comment Jason Berry Sun Jun 26, 2005 at 08.54 pm

@Raven: You gotta remember that most people aren’t on macs. I’m surprised Safari even made up 13% quite frankly!

Tho I would be interested to see Veerle’s stats for the PC/Mac ratio here…


gravatar

23

permalink this comment joel Sun Jun 26, 2005 at 09.43 pm

fyi: it’s “loses”. not “looses”.

sorry to be a stickler :)


gravatar

24

permalink this comment Veerle Mon Jun 27, 2005 at 12.40 am

Nice, but how about not fixing the width in pixels and defining that in ems

Anuk, Jezus didn’t shape the world in one day remember ;-) It is all about decisions and mine is that I only invest little time in this site design so I can concentrate in the very little time that is left on a new look. I don’t get paid to do all this so it has to be in balance. Making posts and tutorials costs time too you know. You’re hard to please as it seems!

@ Jason Berry: I did mention before (to Raven) that it is somewhere between 20 and 25%. It fluctuates


gravatar

25

permalink this comment Seba 909 Mon Jun 27, 2005 at 01.19 am

Firefox 45.66%
IE 39.52%
Safari 5.74%

We also have a lot of Firefox users on our website. But unfortunately the main visistors on 909 are people who are more or less specialised people (developers and such). We, as a design company, have to develop sites for IE related browers. And the biggest share of internet users don’t know about Firefox. They all use IE or what’s standard on their pc.

In short, we still have to spread the fox like hell!


gravatar

26

permalink this comment Michel Vuijlsteke Mon Jun 27, 2005 at 01.23 am

...minor oversight or typo?

.webloglink has “font-size: 0.9”. Should probably be “0.9em”: IE interprets unitless numbers as pixels I think.


gravatar

27

permalink this comment Anup Shah Mon Jun 27, 2005 at 02.40 am

Hi,

Apologies for my harsh sounding post—I was VERY rushed for time, so tried to keep it quick.

I fully understand the time issue, so was just suggesting if you can consider doing that.

Your site design is very nice. When the fonts are resized, it would be nice to keep the proportions that you intended, which I believe can generally be achieved using widths in EMs. There are issues to deal with when the width gets larger than the viewing area but that is perhaps another topic!


gravatar

28

permalink this comment Veerle Mon Jun 27, 2005 at 02.55 am

@Michel, thx for letting me know, is indeed an oversight of mine, I’ll fix it asap ;-)

@Anup, no problem ;-) A liquid layout is indeed a nice solution altough it is a difficult one if you want to keep your design in place and in tact when people scale the text. Maybe a Zoom layout would be even better for low-vision users. It is hard to keep everyone happy and to do the ‘right’ thing.


gravatar

29

permalink this comment Anup Shah Mon Jun 27, 2005 at 05.39 am

Hi,

Instead of liquid layout, I was thinking more about elastic layout.

That is, instead of say 800px width, an alternative could be percentage. However, as you note, keeping design in tact may be a problem. Hence, using ems instead of percent, where you test your em until it matches around 800px (or whatever exact pixels you want) in the default font settings may be an alternative. Then, if you scale the font size up, the proportions of the layout scale up too. It may have some other design impacts. E.g. some background images may show white space around them if they are not big enough, so it is easy to say here but not as easy to do sometimes.

To prevent horizontal scroll bars you can use max-width, and for IE (if you want!) you could use a hack such as an expression to calculate the current width, etc.

A list Apart had a good article some time back:
http://www.alistapart.com/articles/elastic/

Accessibility/Usability-wise too, depending on the site, the problem with liquid layout can be that the line length could get very large. With an em-based layout you can maintain your original proportions.


gravatar

30

permalink this comment Hasan Thu Jun 30, 2005 at 01.56 pm

Veerle,

I am curious why you set the body font-size @ 76% but *html body @ 70%? It’s causing text size “normal/medium” to render smaller on IE than Firefox. BTW, 76%? Is that just a typo? Thanks for letting me nitpick :)


gravatar

31

permalink this comment Veerle Fri Jul 1, 2005 at 12.47 am

@Anup Shah, thanks for the info.

@Hasan, like you say it yourself it’s because the text is bigger in I.E. (too big). I try to have it look almost the same size on both Mac and PC and I.E. or other browsers. It’s no typo. Not sure how to make it also smaller only for Firefox Windows but not for Firefox on Mac… That’s why I don’t like about using ‘ems’, you can’t get it look the same cross-browser and cross-platform.


gravatar

32

permalink this comment Verne Wed Oct 5, 2005 at 12.08 am

It just solidifies the fact that Mozilla and its family of browsers are the browsers of choice. IE sucks. Dumped it long time ago. Just so behind in features and standards compliance. Nuff said, really.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist