Do you know what front-end programmers dream about? It is not an answer to the national debt, or if Democrats and Republicans can get along, or even if there is life on other planets. No, front-end programmers dream of something that seems entirely more difficult to attain.
A front-end programmer wants a world where they can do their work one time and be done.
It sounds simple, doesn’t it? Most of us go through life completing a task and knowing that having completed the task, there is nothing more to do.
I am sure there are many different definitions, but at MINDSCAPE, our front-end programmers take the pretty designs from a designer and turn it into the code that displays the website in a browser. It is not enough to take the design, turn it into an image and put that on the Internet. Once upon a time the world was that simple. But it’s not 1995 anymore, and our clients want to be found on the Web by their visitors. So, our front-end programmers must turn the design into hundreds of lines of code so that automated bots can crawl the site and index the content found there.
It may not be simple, but it’s a fairly straightforward process. Or so it seems, until the first time they open up the webpage they just built in Internet Explorer. That is where things start to get messy.
You see, there are a lot of browsers out there. A browser is the program you use to see the Internet. Google Chrome, Firefox and Safari are a few of the modern browsers. They are considered modern because they support many of the features from the latest HTML standards (HTML 5) and CSS standards (CSS 3). The new standards allow our front-end programmers to do really cool stuff. And when not doing cool stuff, it helps them do the mundane tasks very quickly.
Well, Internet Explorer is a bit behind the curve, and that’s sort of an understatement. So our front-end programmers find themselves in a bind. Do they build the website to use the latest and greatest technology, or do they build the website to work in what is somehow still the most popular browser (see stats at StatCounter)? And if they choose to build the website for Internet Explorer (IE), do they optimize it for IE 6, IE 7, IE 8, or IE 9. You see, each version has its own interpretations of the standards. So what you build for one, is not going to work for the other.
Perhaps you begin to see why the ritual of making a site work in IE usually begins with animal sacrifices, pounding drums and incense. It’s another reason they make us work in the Pit.
Alright, so we don’t have to go quite that far. However, there are additional wrinkles to contend with. You see, we want to make our websites so that it is easy to extend them to work on mobile devices. Most new mobile devices, thankfully, use browsers that handle the latest CSS and HTML. That allows us to build a version of the site that works for both mobile and desktop with a minimum of additional effort beyond building the mobile site styles.
In the end, our front-end programmers must build the same site multiple times if we are going to make it compatible with all possible browsers. That means each site must be:
A site for modern desktop browsers such as Google Chrome, Firefox, and Safari. IE 9 handles most of what these other browsers do, so that is a step in the right direction. However, many of the features are supported in different ways by each browser, so we still have to define rules in multiple ways.
A site for IE 8 and IE 7. These browsers are pretty close together, and most of the time standard HTML and CSS will work well with them. Either way, it needs to be tweaked.
A site for IE 6. Microsoft has finally announced that they will be killing off this browser, and the front-end world rejoiced. It’s a nightmare to work with, and for the longest time, it was the most used browser in the world. Check out the Internet Explorer 6 Countdown website. IE 6 usage is less than 1% in the US now! Yay!
A site for mobile. Even though the browsers are standards compliant, we still need to design and style the site differently for the mobile space. It seems easy enough until you realize that there are dozens of potential screen sizes between mobile phones and tablets.
Now, there are ways that we combat this without having to build entirely new sites for the different browsers but it involves trade-offs. For example, IE 7 and 8 will not have rounded borders when we finish the site. To make rounded borders, we have to create many small images to create the corners. On modern browsers, it is a line of CSS to create a rounded border. That saves us time and allows us to concentrate on hundreds of other details that make your site successful.
In the end, sometimes it is important that we fully support older browsers. In that case, we can make it happen but it takes additional time and costs extra money. If you know you need older versions of Internet Explorer to work, be sure to consult with your Web developer before starting the project.
And if you do ask him to do it and you hear pounding drums, see strange flickering lights and smell smoke coming from his room, do not go in. You don’t want to know what it takes to make it happen.