X

ie7 Optimisation

When I redesigned this site I made a decision to just do a one line redirect for users visiting on ie8 and below telling them to get a decent browser. I had the attitude that if people aren't willing to spend 5 minutes to get their browser up to date, why should I bother spending 5 hours coding fall backs for them? I think this attitude comes from spending the better part of a year working on websites that were only for mobile devices specifically aimed at Android and iOS. I was spoilt by having the ability to use modern HTML5 markup and CSS3, and although it's great exploring new techniques it got me into a poor position where I wasn't thinking about people who may need to visit my site. I was getting to used to taking the easier modern solutions rather than challenging myself.

I've spent a lot of time re-writing my site's code so that I'm feature detecting using Modernizr and serving the user an experience based on what the browser can do. Even though at times it's been extremely frustrating I've learnt so much about progressive enhancement and now I got a site that is almost half the weight it was at my last update and viewable to a wider audience!

I wanted to make a quick list of shivs, polyfills, and code snippets that I found really helpful:

  • Modernizr

    Create your own modernizr library by selecting the features you wish to detect.

  • Respond.js

    Great polyfill that allows support for media queries on browsers that don't support them as standard.

  • json.js

    Allows you to use json in browsers that don't support it. It's a polyfill so works with the code you've already written!

  • getElementByClassName

    Works for ie.5. and up, I used this along with ie targeted comments.

  • inline-block

    inline-block is an extremely helpful piece of CSS for responsive sites, but it isn't supported in ie7. You can replicate it though by using display:inline-block;*display:inline;zoom:1; Even though it's not a standard coupling it with the "*" allows on IE to use it.

  • min-height

    So that min-height can be supported in ie8 and below there needs to be 3 references to height in your css. min-height:100px;height:auto;*height:100px;.

  • Animation Showreel 2012

  • Motion Graphics Showreel 2012

  • Showreel 2009

  • Moon Pirates

  • Weedy So Speedy

  • Jungle Janet

  • Words Hurt

Choose categories below

Backgrounds
Digital
Games
Jungle Janet
Moon Pirates
People
Personal
Storyboards
Traditional
Websites

Search Categories

Update your choices

Allyn Thomas

All round Animator/Designer, perfect for most any job!

Animator

Designer

Compositor

Developer

About me

Work Experience

Education

Skills and Awards