Feb 16, 2010

What are browsers, and how do they affect my website?

If you’re new to the web and you’re undertaking the development of your first website, you’ve probably been hearing the term “browser” a lot lately. And most likely you’re confused.

Browsers are one of the most important parts of a user’s web experience; which browser you are using can have a very large effect on how the websites you visit look and behave.  So clearly, understanding how browsers work will be important for you so you can understand fully how your customers will experience your new website once it is complete.

Below I present an introduction to browsers, with the purpose of helping a business person better understand what their designers and programmers are talking about when they start mentioning things like browsers, browser compatibility and cross-browser testing.

What Is A Browser, Anyway?

According to Wikipedia, a web browser is:

…a software application for retrieving, presenting, and traversing information resources on the World Wide Web.

Pretty important stuff… essentially, without a browser no one would be able to visit websites. The internet as we know it would not exist.

There are primarily 5 major web browsers, and you are probably using one of them right now to read this article (though you may not know it). They are:

  1. Internet Explorer
  2. Mozilla Firefox
  3. Apple Safari
  4. Google Chrome
  5. Opera

And just to complicate matters, there can be several versions of each browser currently in use. I’ll discuss how this affects website development a little later in this article.

Typically, a browser is pre-installed on computer systems, and the person or program that set-up your internet connection automatically tied a browser to your internet connection.  That’s why most new users don’t know what a browser is; their browser is working silently in the background without user intervention.  However, several browsers can be installed on a computer if a user chooses.

To determine what browser you are using, check out the top left corner of this application window, then use the figure below to match the program icon displayed to the name of your browser:

Major  Browsers

It is worth noting that if you can’t find one of the icons above in the top right or left corner of your application window, then you are likely browsing the internet using AOL’s built-in browser which is actually an old version of Internet Explorer. I can’t recommend strongly enough that you download and install the latest version of one of the listed browsers above if that is the case. You might also be a power internet user, browsing this blog using a specialized browser or RSS reader… in that case, you probably are already familiar with browser basics.

All Browsers Are NOT Created Equal (or “Why your website looks different on your mom’s laptop.”)

Don’t worry. I’m not about to launch into a discussion of which browser is the best. That’s a topic for another day. Instead, I want to briefly explain how browsers do their job – delivering websites – and in the process help you understand how the internet in general and your website in particular works. The most important thing for you to understand though is this: all browsers do their job differently.

Your website exists as code, written primarily in a programming language known as HTML with additional information conveyed using languages like CSS, ASP, PHP, XML and more. When someone visits your website using a web browser, your web server (the computer that is hosting your site), sends a file that looks a lot like the figure below.

code

It is the job of the browser to translate that computer language into a visual presentation that is attractive to the website visitor, hopefully as the web designer intended, with images placed just so and text displayed at just the right size and color. But just as there are dozens of translations of “War and Peace” by Leo Tolstoy for sale on Amazon.com, the different browsers will translate the basic code for every website differently. Most of the time these differences are very slight – spacing and kerning differences in the font or tiny layout and display differences.  But sometimes entire functional features just won’t work in one browser, while the other browsers work just fine.

Cross-browser Testing

The differences in the major browsers’ display of websites is the reason for what’s called cross-browser testing. After a website is completed (and typically at intermediate stages during development), a web designer will test the new pages in the major browsers to make sure everything is working correctly.  As of the writing of this article, the browsers that NetSource Media and most other development companies will test include the following:

  • Internet Explorer, versions 6, 7, and 8
  • Mozilla Firefox, version 3.5+
  • Apple Safari, version 4+
  • Google Chrome, version 3+
  • Opera, 10+
  • AOL 9.0 Security Edition

While it is possible that a website visitor might use a different browser to view your site than those listed above, unless you have a specialized target audience it is likely that such visitors will account for much less than one percent of all traffic.

Accepting Limitations (or “Websites Are Not Brochures or Flyers.”)

Even with testing, most times it is impossible to present a single website in the same exact way in all current browsers. In particular, older versions of Internet Explorer have many limitations in regards to newer web innovations. However, keep in mind that web designers have user experience as their guiding principle when building and testing a website.  Unlike print designers who have rigid control of the layout of their designs down to the pixel, web designers must work within the fluid limitations of their medium to ensure that each visitor can interact with a website without it breaking.  For instance, that fancy rounded corner and text drop shadow might not be visible to visitors who are using Internet Explorer 6.0, and cool fading transitions that other browsers render beautifully might be gone, but as long as site clarity and function does not suffer a web designer can sleep soundly.

It is the immutable fact of a web designer’s existence: no two computers will ever display your website the same way. With browser differences, along with screen resolution, monitor settings, operating system differences and more, our goal is to make a website usable and enjoyable for as many visitors as possible. If that means only 80% of visitors see the cool Gallery transition, but everyone can easily browse the Gallery pictures, that means we’ve created a cross-browser compatible website.  People with older browsers and technology are delivered an optimal site for their browser, while people using newer technology enjoy some icing on their cake.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>