Coding in school vs. for schools: Browser support

A few years ago, I graduated from a master’s program in learning, design, and technology. I was excited and eager to apply my engineering and design skills to create products for education that looked clean and cool, and had a slick user experience. With this mentality, I joined Goalbook.

Within the first few months, I had a painful realization.

Remember when CSS3 was new?

At the time we were creating Goalbook Toolkit from the ground up, which offered me the opportunity to really explore and shape the development and design of the product. I was ready to put in some nice rounded corners, subtle gradients, and other neat CSS tricks to make the product look aesthetically pleasing (CSS3 was still relatively cutting edge). I pushed these changes in and felt really good about helping teachers and making the world a better place.

Soon after, we started incorporating analytics to track what pages people were viewing. One day I logged into Google Analytics and started poking around to see who was using our site. There was a piechart of users by browser, and I felt a sinking feeling inside me.

The biggest piece of that pie was Internet Explorer.

I clicked on that piece to drill down to what versions of IE people were using and it only got worse. The majority of users were using Internet Explorer 8 (which doesn’t implement CSS3 at all)!

“No one is seeing my beautiful gradients and round corners!”

I couldn’t believe it. Why are people using Internet Explorer??! But the more I thought about it and talked with my team, the more it made sense.

Our users are teachers. Teachers are in school most of the day. Schools have their own computers. Those computers are probably really old, running Windows XP, and with Internet Explorer 8 as the default browser.

Just for kicks, I loaded up Goalbook Toolkit on a really old and fat Dell Inspiron running Internet Explorer 9 (even THAT thing didn’t have 8). It looked kinda janky but overall okay. Then I toggled quirks mode to simulate what it would look like in Internet Explorer 8, and my jaw dropped.

This is what most of our users are seeing, and it looks like garbage.

Lessons learned

Coding for educational or interest/enrichment purposes is fundamentally different from coding for production, and in this case specifically, schools. When we’re learning, we’re coding for ourselves and our own growth, and chances are we’re keeping our software up to date (and shunning Internet Explorer like print designers do Comic Sans). Because of this, we take it for granted that all the cool tricks we learn from tutorials, videos, and classes will just work.

But when we code for production, we’re coding for other people. And those people may not be developers or tech-enthusiasts with top-of-the-line hardware. It takes a lot for schools and districts, like any large organization, to update and upgrade their technology infrastructure and equipment which may be very old. It doesn’t matter if our code works on our shiny Macbooks in [insert modern browser here]; will it run on potentially clunky desktops that haven’t had software updates in years? That may very well be the environment in which it needs to work.

Fortunately, modern browsers are becoming more and more ubiquitous and the days of getting stuff working on ungodly outdated versions of browsers are numbered. Still, when we’re picking up new tricks in web development, it’s important to be mindful of whether they will work for the majority of our users (if even applicable to their needs), or whether they will primarily benefit our own growth.