No announcement yet.

James Battersby Tutorial 04: Web Browsers and Plugins

  • Filter
  • Time
  • Show
Clear All
new posts

  • James Battersby Tutorial 04: Web Browsers and Plugins

    A few of these tutorials feature specific products and opinions. I do not work for any of the mentioned companies and these opinions (although shared by many) are my own. Take them as you will (visit my website for more information on my background).

    04: Web Browsers and Plugins

    The browser war of the 90s may be over but it does not mean there is a clear winner now. There are hundreds of different browsers out there but there are a principal 5 that you need to take note of.... and install.

    Internet Explorer (IE)
    This browser is from Microsoft and comes built into Windows which makes it the most popular browser by default. However it is by no means the best one out there as Microsoft don't fully comply with international web standards (you'll often hear web developers complain about it, especially between versions). Versions to worry about are 6, 7 and 8.

    Mozilla Firefox (FF)
    In my opinion this is the best browser available not only for casual users but also for web developers. Its origins can be found in the Netscape archives as a team broke off to form Mozilla to make the Mozilla browser where another team broke off to form Firefox. Its fast, robust, reliable and conforms to the W3C standards which makes it an ideal tool for development. It is also open source which means a massive community provides additional tools, changes and fixes for it.

    Open Source
    Programs termed as open source mean that the code that makes the program is freely available. This allows the software to be free and be supported by thousands of volunteers.

    Opera (O)
    Opera is a web browser from the Nordic region which a small percentage of people use. It used to come with adverts that you had to pay to get rid of but it is now going from strength to strength. Its even packaged with a BitTorrent client for larger downloads. This browser also conforms to W3C standards. Its not a bad browser - its just a lot more people prefer Firefox.

    Safari (S)
    Safari is to Apple Machintosh as Internet Explorer is to Microsoft Windows. Since about 20% and above of people use a Mac we need to consider their needs. Its a fast browser that conforms to most standards but Apple does like to make the display a little fuzzy for some reason.

    Google Chrome (GC)
    By early 2008 the above 4 were the main browsers to worry about and then suddenly Google decided to jump into the mix. Its new browser made such an impact that web developers couldn't ignore it anymore. For a first attempt it is a fantastically good browser but I've noticed a few strange quirks during development.

    Cross Browser Issues
    You may be wondering why you need 5 different applications that do more or less the same thing. The answer is Cross Browser Issues. Different browsers interpret code differently which means that you are not guaranteed that while a site presents itself properly in one browser that it will in another. Since everyone is different you can expect many different web browsers to view your website. The old (and VERY wrong) solution made by lazy developers was to detect what browser the user was using and if it was the wrong kind they would be abruptly told to go and get the right one. The best practice is to build a site using one browser, keeping to W3C standards as closely as possible, and then view your work in other browsers, fixing accordingly. You'll often hear the phrase, "Build in Firefox, test in IE" and thats exactly what you should do.

    Firefox Add Ons
    One of the reasons Firefox is the browser of choice for web development is the amount of extra tools that can be plugged into it (called plugins or AddOns). These will help you identify errors in your code, highlight the structure of a document and much more. The AddOns below are ones I use regularly and recommend you do too.

    Web Developer
    This aptly named plugin is a must have. It provides a vast list of useful functions such as highlighting specific elements, providing CSS and Javascript error catchers and even allows you to validate your code against globablly recognised standards.

    HTML Validator
    This is another must have as it points out to you where in your code (that it sees at least) where you are going wrong. You can set it to just look for HTML errors or also include Web Accessibility standards as well. It has two message levels: error and warning. An error means there is something that should be fixed immediately otherwise it won't display or be interpreted properly. A warning indicates that something is incomplete or in the wrong place (it will work in most browsers but its best to fix it anyway). You want to aim for zero errors and warnings.

    firebug.pngThis is a debugging tool that allows you to look and edit the code temporarily on the fly, highlighting the appropriate areas.

    screengrab.pngThis addon is useful for presentation issues as it saves a picture of your web page (in its entirety, visible portion or selection) to your computer. This is useful when trying to show people what your web page looks like.