CSSKarma

display your <style>

designing the web since 2002

Archive for February, 2008

|

The Slow Death of IE6

Wednesday, February 20th, 2008

So, I’m a front end developer at NC State University in DELTA (essentially distance education) and we use a learning management system (LMS) called Blackboard, you may be familiar with it. It used to be called WebCT, then it was WebCT Vista, then Blackboard bought it out and I think the official name is “Blackboard Vista” now… not important. The LMS is a place where teachers can host a course online, it’s like a glorified CMS… just for some background.

Anyway, our LMS login page is located at http://vista.ncsu.edu, it’s probably one of the top 2 or 3 most visted NC State web sites for students, coming in at around 25,000 hits per day, everyone uses it to log into their course. I’ve been running Google Analytics on it for about 6 months now, watching the browser habits of all the students. Having so many hits every day I figured this was the best place I could use to gather a good sample; and over the past 6 months or so I’ve noticed an immerging trend.

These are my findings for the 4 major browsers, I didn’t list to others since there’s around 15 used on the site (well, 3 majors and Opera).

Visits Percentage
Internet Explorer 1,371,166 58.18%
Firefox 814,412 34.55%
Safari 151,265 6.42%
Opera 6,845 0.29%

At first glance these stats don’t really say anything shocking, but when you dive into them further you can see what I’m talking about. The trend I’ve noticed lies in Internet Explorer. Here are those stats:

Visits Percentage
IE6 487,335 35.54%
IE7 882,744 64.38%

That’s it! That’s IE7 taking over the market share from IE6. So we have a new order of things:

  1. IE7 (38%)
  2. Firefox (35%)
  3. IE6 (20%)
  4. Safari (6%)
  5. Opera & others

It’s been a very gradual change over the time I’ve been paying attention, but I think it’s finally noticable enough to mention. I know this data isn’t 100% accurate, but it does represent a very Internet-savvy demographic of 18–25 year olds. And just to show that IE7 is still gaining ground, here are the stats for the past month:

Visits Percentage
IE6 76,004 29.20%
IE7 184,091 70.73%

Firefox has been holding strong around 34%–36% market share throughout this whole dataset.

This news actually makes me a lot less weary of the upcoming release of IE8. My initial reaction when I heard about it was “oh great, now we have to deal with IE6, IE7 and IE8 compatibility”. With the slow death of IE6 it gives me some hope that maybe Microsoft will push IE8 hard and get it out to canabalize the IE6 market share even further. If this trend continues, let’s say IE8 comes out around December (I think that’s a fair assumption, although I really don’t know how far along they are in development, since I haven’t even heard about a beta yet), version 7 adoption should be around 80%-85% (within IE, not global market share). That’s very managable and with the CSS advancements in IE7, I can deal with it until IE8 takes over even further. We can only hope that it doesn’t take as long as IE7 to overtake its predecessor.

It’s not that bad, the web is cleaning up its act!

with ease,
Tim

Posted in Browsers, Web Standards | 3 Comments »

Reseting Browser Defaults (reset.css)

Wednesday, February 6th, 2008

I’ve heard a lot of arguments for and against the CSS reset file and most recently had a short conversation with Jonathan Snook about it. He’s seemed to be avidly against the use of a reset file due to the extra code you need to make it happen. As a CSS person, I like dumping as much stuff as I can into my CSS rather than javaScript, so I’m all for reseting the crappy browser defaults.

After I read Andy Clarke’s Transcending CSS about 6 months ago I started using the one he has in the book. And then Eric Meyer released a version on his blog. Ever since then I’ve been using a hybrid of the two and I added a little extra in there for myself.

Eric and Andy’s reset files don’t include reset rules for the HR element, rightfully so; it’s damn near impossible to get it right since IE treats it weird (try it, you’ll see). So I added the HR into my version of the reset file, it’s not perfect, but I think its better than the default value… and really…how often do you use a horizontal rule? I rarely do.

So today I was poking around my reset file and decided to remove some of the absurd elements that I’ve never used but somehow found their way into my reset file, like q, var and dfn. I have never once used those elements; so I took them out, slimmed down the file a little and thought I’d FINALLY release it. So here it is:

/**
* reset browser defaults
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td          {margin:0;padding:0;}
body                      {line-height:1;color:#121212;background:#fff;}
h1,h2,h3,h4,h5,h6,p       {font-size:100%;font-weight:400;}
ol,ul                     {list-style:none;}
caption,cite,code,th      {font-style:normal;font-weight:400;}
fieldset,img              {border:0;}
caption,th                {text-align:left;}
:focus                    {outline:1px dotted #eee;}
table                     {border-collapse:collapse;border-spacing:0;}
hr                        {border:0;border-top:1px solid #555;margin:0;height:1px;}

You can also download it at: http://www.csskarma.com/css/reset.css

with ease,
Tim

Posted in Browsers, Web Development, Web Standards | 8 Comments »

CSS Gradient Text

Monday, February 4th, 2008

CSS Gradient Text demo

It’s been a really long time since I’ve seen someone do a CSS technique and said “wow, that’s actually really cool”. I was hanging out at David Shea’s Mezzoblue today, and in the sidebar was a link to an article called “CSS Gradient Text”. I thought to myself, “great, another stupid CSS trick that ruins markup and CSS”. So I click it, read through, and my eyebrow raised (not really, I can’t do that). So I looked at the CSS and XHTML; it’s actually not that bad.

The technique uses a < span > inside and < h1 > to put a transparent PNG gradient. Now, as a semantic markup person I VERY rarely use a < span > because it really doesn’t mean anything so I might substitute it with something else, wrap the text and rework some of the CSS. But I like this a lot, I’m all for things that piss off graphic designers and show off how powerful CSS can be (like my css shevles & css arrows).

It’s very cool, check it out: CSS Gradient Text demo

here’s the full article

Posted in Web Development, Web Standards | 3 Comments »

Web Directions North – Vancouver (Day 2)

Sunday, February 3rd, 2008

It’s the end of day 2 up in Vancouver at WDN08, another really great day, some good talks. The Keynote Matt Webb was really interesting, looking forward to the podcast. Anyway, here are my notes from day 2:
CAMERON ADAMS – THE FUTURE OF WEB-BASED INTERFACES

  • dynamic interfaces
  • you can’t make design that’s perfect for everyone

Flexibility

  • font size
  • font availability
  • page width
  • javaScript

Why not flexible layouts?

  • currently, there’s a narrow range of interface

Approaches

  1. user-driven
  2. developer-driven

USER DRIVEN

  • identity management with customization (twitter, myspace, etc.)
  • make it easy (using Ajax for immediate customization feedback)
  • there’s still a need for constraints
    • preset layouts
    • modular applications
  • widget-based interactions (drag & drop – iGoogle)
  • moving widgets into content
    • collapsing and moving menus around
  • desktop apps using draggable panels (ExtJs)

Beyond HTML, but not really (?)

  • canvas
  • flot
  • yahoo pipes

How?

  • Ajax
  • Regular old forms
  • increase the range of interface

keep layers separate:

  1. data
  2. behavior
  3. style

DEVELOPER DRIVEN

  • Client side analysis
  • print.css
  • changing css based on browser width
  • handheld css
  • alternate style sheets and using CSS3
  • fill in the gaps with javaScript
  • Server-side analysis
  • removing a welcome message after a certain number of visits

www.poetpainter.com

CLOSING NOTES

  • Dynamic interfaces are useful in high traffic websites
  • Technology is never a barrier for very long
  • The hardest thing is changing how people think

ERIC RODENBECK – INFORMATION VISUALIZATION

  • http://index.blogspot.com
  • data visualization
  • starting with the data & forming a map from it rather than overlaying data on an existing map

JOHN ALLSOPP & DAVID SHEA – WHERE’S YOUR WEB AT?

They’re essentially talking about all the different places you can access the internet now-a-days and how you shouldn’t assume that your site is going to be viewed in a certain way.

http://mezzoblue.com/presentations/2008/wdn/

DESIGN (Shea)

  • Screen size varies greatly from a 128×128 cellphone to a 52″ HDTV
  • css media can with this
    • iPhone media code: media=”only screen and (max-device-width:480px)”
  • Adaptive layouts based on screen resolution using javaScript
  • generally speaking, mobile devices only have 1 system font and a couple of font sizes to work with
    • rendering (clear-type & anti-aliasing)
  • control your design by using semantic markup
  • embrace the type-face limitations
  • UI elements that get messed up on mobile devices
    • tabs
    • breadcrumbs
    • transitions (on screen changes)
    • icons (turning images off so you need alt & text labels)

USER EXPERIENCE (Allsopp)

  • assumptions
    • everyone has fine motor skills
    • typing/clicking assumptions
  • Text input strategies (things to do to make inputting text easier for the user)
    • short URLs
    • using ECML for form fields
    • ECML is a standard for naming form fields to help with auto-complete
    • openID for faster and easier account sign up

DANIEL BURKA – UI CASE STUDIES

  1. Digg story format
  2. Digg comment system
  3. Pownce

DIGG STORY FORMAT

  • started designing in the story level pages since it was the main focus area of the site’s service
  • describing the evolution of the digg button

DIGG COMMENT SYSTEM

4 versions

  • ver1 -> original comment system
  • ver2 -> problem with nested comment
  • ver3 -> current -> hiding nested comments, using ajax to lighten HTML on pages, comment increased 30%, scales to thousands of comments
  • ver4 -> coming soon (UI changes, pulling META data out of the content line for easier page scanning)

POWNCE DESIGN

  • starting from scratch
  • “sencha” – original Pownce name
  • logo “down arrow” is integrated throughout the site to break up hard lines

CONCLUSIONS

  1. starting focus
  2. echo design language
  3. be prepared to iterate & react to many types of user feedback
  4. there’s nothing wrong with making mistakes
  5. 2 release cycles
  6. normal cycle
  7. guerilla cycle – faster iterations

Posted in Web Development, Web Standards | 5 Comments »

|

New from the blog

Are My Sites Up? authenticjobs.com