Internet & Web development (2)/Course materials/Overview/Web Browsers
|Internet & Web development (2)|
|Overview||Web Browsers | Web Development Ecosystem | Web Page Layout | Design Components ( Design Tips | Accessibility ) ||
By the end of this overview you will be able to:
A Web-browser is a computer program that accepts HTML (Hypertext markup Language) and displays it on the device, and may be on many different platforms: Windows, Apple, Unix, and Mobile devices. The most popular Browser has changed many times and depends on many factors including: Company policies (Microsoft bundling Internet Explorer with Windows), Devices being used (Mobile devices) and this is commonly referred to as the Browser Wars. For a quick introduction go to 20 things I learned about browsers & the web
Browsers that you need to consider when developing Web Applications
- Microsoft Internet Explorer
- Google Chrome
- Apple Safari
- Mozilla Firefox
Which one to use?
Browsers are continually evolving, however a basic rule of thumb is if you are using a web application from a particular company use their web browser for maximum functionality. For example, if you use Microsoft's Web-Outlook use IE, if you are using the Cloud based Google Documents use Chrome, and so on.
- Based on IE engine (thanks Davood)
- Epic Browser (n.d.)
- Based on mozilla. (thanks Abdul), Web browser for India and has built in anti-virus detection
- For a good analysis of Web Browser Market share use (based on individuals rather than visits) http://netmarketshare.com/
- For example:
- Desktop (Feb 2014): INTERNET EXPLORER 58.19% FIREFOX 17.68% CHROME 16.84% SAFARI 5.67% OPERA 1.23% OTHER 0.40%
- Mobile Safari (Feb 2014) (53%) Android (23%)Chrome (12%)
- For example:
- A little history to demonstrate how Browser usage has changed over the years
- Jan 2009: Internet Explorer (68%), Firefox (22%), Safari (8%) and Chrome (1%). (Wikipedia, 2009)
- Jul 2010: Internet Explorer (51.15%), Firefox (31.03%), Safari (4.9%) and Chrome (8.3%). (Wikipedia, 2010)
- Jan 2011: Internet Explorer (43.8%), Firefox (29.7%), Safari (6.1%) and Chrome (13%), Mobile (4.3%). (Wikipedia, 2011)
- Dec 2011: Internet Explorer (39.35%), Firefox (24.9%), Safari (6.2%) and Chrome (24.4%), Mobile (deleted). (Wikipedia, 2011)
Activity: Go to http://en.wikipedia.org/wiki/Usage_share_of_web_browsers and see what Browsers a Developer needs to consider.
Common Browser issues
- Don’t expect a page to look the same in every browser
- Cascading style sheets go some way to solving this .. but.. not all browsers display them the same way.
- Don’t expect a perfect solution
- Design for the one you expect the users to use (and your favourite hopefully), then modify to meet different browsers
Microsoft Internet Explorer
- 2009: (March) Version 8
- 2008: Version 3
- 2009: Version 3.5
- 2011 (Jan): Version 3.6 Features
- 2011 (Aug): Version 6
- 2008: (Dec 11) Version 1
- 2009: (May 24) Version 2
- 2010: (May 25) Version 5.0, first stable release to support Windows, Mac OS X and Linux.
- (Aug 9) Version 13
- January: removed support for H.264 video codec for its HTML 5 player.
- Chrome Experiments (Google, 2009) http://www.chromeexperiments.com/ . Naone (2009, March 18) reported that
- Chrome Experiments showcases the applications that require significant data processing using multiple Web pages simultaneously
Testing web browsers
And concluded that IE9 64 bit was the slowest, while the rest showed no real speed advantage.
The ability of a Web Browsers to conform to current standards is based on Browser engines.
- Microsoft IE uses a proprietary engine (Trident),
- Firefox (Gecko) and,
- Google Chrome and Safari (WebKit)
A comparison of layout engines can be found on Wikipedia(2009) 
- From The Web standards project: http://www.webstandards.org/action/acid3/
- An interesting way to see how good your web browser ( it produces a rating out of 100%) is it to open http://acid3.acidtests.org/
- The page "should" look like… http://acid3.acidtests.org/reference.html
- 2008: IE7 rated around 13% Firefox around 50%
- 2009: IE (8.0) 20%(Compatibility view=13%),Chrome (1.0.154) 78% (220.127.116.11) 100%, Firefox (3.06) 71% (3.5) 93%
- From futuremark. A browser testing service. Retrieved May 26, 2011 from http://clients.futuremark.com/peacekeeper/index.action
- For HTML 5 try http://html5test.com/
- For a slightly more extreme test Google engineers decided to show visually the speed of Chrome downloading a page against some physical events (like a potato cannon!!) Check out the YouTube video Making the Google Chrome 5 Speed Tests
The first popular GUI browser was NCSA Mosaic, which was developed at the National Center for Supercomputing Architectures at the University of Illinois by Marc Andreessen, Eric Bina and a team of staff and students. When Mosaic was released onto the Internet in 1993 the WWW really took off since its friendly point and click interface was so easy to use. Mosaic gained 2 million users within a year.
Marc Andreessen left NCSA, and formed Mosaic Communications with Jim Clark of Silicon Graphics. They quickly renamed their company Netscape Communications. The first version of their browser, Netscape Navigator 1 was released in 1994, and was available free to private or educational users. Commercial users had to pay. Companies like IBM licensed it and distributed it under different names. The main advantage over Mosaic was multithreading, the facility to allow images to be transferred simultaneously. It also had the ability to display text and pictures before the complete document was transferred. This made it more useable on systems that have slow network connection to the Internet.
Netscape Navigator 2.0 was released in 1995. By June 1996 it had surpassed 38 Million users, (according to Netscape).
Netscape continued to release new versions of their Navigator browser, and each has been a huge success with millions of downloads. The majority of WWW users tended to switch over to the new version within months of it being released. However a significant minority of people tended to stick with whatever browser they first used and not update, so web pages must always be designed with users of older browsers in mind. For example these people may be less confident users who do not know how to download and install software, or they may have older computers which do not have enough memory to run the newer bigger software.
1995 Internet Explorer
Microsoft Introduced Internet Explorer in 1995. Surveys indicated that by Jan 1996 IE held about 2% of the Browser market! By September 1998 usage of IE overtook Netscape Navigator.
Another popular web browser that has appeared is Opera. Its small size (initially it would fit on a floppy disk) meant it gained a dedicated following.
- 1994 - Jon S. von Tetzchner and Geir Ivarsøy develops a Web browser while working for Norwegian telecom Telenor.
- 1996 - Opera browser 2.1 is launched on the Internet. Shareware version of Opera made available to the public for the Windows™ platform.
- Before the release of the free version of Opera 5.0 in December of 2000 (the browser was Ad sponsored), between 1 and 1.5 million people worldwide used Opera.
For a history and downloads check the opera web site.
- 2004: Opera 7. Small amount of advertising
Browsers and standards
As the WWW became popular designers began to complain about the inability of HTML to format and layout the information on a page. Consequently the browser manufacturers began to add new features to their products to improve the design of web pages. These features were browser-specific, meaning that the HTML tags could only be understood by one company’s browser. When Netscape was the only popular browser on the WWW this didn’t matter, but when Internet Explorer was launched with a different set of browser-specific tags, it became an issue.Around 1996 it was very common to see signs on websites reading "this site is best viewed with Netscape" or "this site requires Internet Explorer". Often website designers would create two versions of the same website! The features were also ahead of the HTML standards, meaning that the HTML tags were not part of the current protocol. The best of the new tags, for example tables or frames, both first introduced in Netscape 2, were eventually added to the HTML standards. For a while Netscape actually drove the standards along.
2004 (Nov) Mozilla Firefox 1.0 & Mozilla
Firefox is a free, open-source web browser for Windows, Linux and Mac OS X and is based on the Mozilla codebase.
What is Mozilla?
Mozilla is an open-source web browser and toolkit, designed for standards compliance, performance and portability. The Mozilla Foundation coordinates the development and testing of the Firefox browser by providing discussion forums, software engineering tools, releases and bug tracking
What’s the difference between Firefox and Mozilla?
Mozilla (Application Suite, also known as SeaMonkey) is a complete suite of web related applications, such as a browser, a mail/news client, a chat client and much more. Firefox is just a browser, which makes it a better choice if you already have a mail client for example. Also, since Firefox is smaller than the whole Mozilla suite, it’s faster and easier to use.
Ref: Mozilla (2005) Firefox FAQ. Retrieved February 22, 2005 from http://www.mozilla.org/support/firefox/faq
The battle between Netscape and Internet Explorer for the title of most popular browser was termed the web browser wars. For most of the early history of the WWW, Netscape was the most important browser. Around September 1998 Internet Explorer overtook Netscape as the most used browser. This was because millions of people were connecting to the Internet for the first time, and they had a free copy of Internet Explorer as part of their computer’s operating system, so why would they bother to download new software. However user studies show that older users of Netscape didn’t tend to change browser. Over time this has changed, with Internet Explorer holding the majority share of the browser usage.
Browser war IE and Netscape 1996-1999
The chart shows the rapid rise of IE.
2006 (Jul) Firefox gains vs I E
Jul 2004 Internet Explorer's first-ever drop in browser market share. At the time, IE usage had dropped from 94.8 percent at the beginning of 2004 to 93.9 percent a few months later. As Firefox approached the big 1.0 milestone, its market share continued to soar, and it passed the 10 percent barrier in October 2005.
Web analytics firm OneStat.com is now reporting that Firefox grabbed almost 13 percent market share worldwide, while IE dropped to just over 83 percent.(Bangeman, 2006)
- Table: Global browser market shareBrowser share
- IE 83.5
- Firefox 12.93
- Safari 1.84
- Opera 1.0
- Netscape 0.16
The following diagram shows the distribution of web browsers in 2007. Which ones have disappeared? Which are not there?
(Net Applications, 2007) 
2008 (Dec) Google Chrome released
Based on the WebKit engine (same as Apple's Safari) Google chrome introduced its own web browser. Each Browser Tab was separated so if one tab "crashed" the others should remain unaffected.
As Browsers evolve features that assist accessibility are being developed.
- Text size
- Zoom options are available in the browser menus
- Keyboard/Mouse: On Windows use [Crtl]+ [Mouse Roll wheel] to zoom in/out
- Speech to text
- On many mobile devices (such as the iPad/iPhone) there is the option to search using text to speech (most engines work by sending the speech to a Web based server and sending the results back to the client)
- Chan,M. L., Holznagel,F., & Krant, M. (2010) 20 things I learned about browsers & the web. Retrieved November 20, 2010 from http://www.20thingsilearned.com/en-US/home
- TheWorldBrowser. Retrieved July 25, 2010 from http://www.ioage.com/en/
- Epic Browser (n.d.). Retrieved July 15, 2010 from http://www.epicbrowser.com/
- Wikipedia (2012, Jan) Usage share of web browsers. Retrieved February 31, 2012 from http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
- Google (2009)Chrome Experiments. Retrieved March 24, 2009 from http://www.chromeexperiments.com/
- Naone, E. (2009, March 18) Browser Coders Make Chrome Shine. Technology Review. Retrieved March 24, 2009 from http://www.technologyreview.com/web/22315/?a=f
- Google Chrome. (2011, August 13). In Wikipedia, The Free Encyclopedia. Retrieved 21:02, August 13, 2011, from http://en.wikipedia.org/w/index.php?title=Google_Chrome
- Tools and Resources to Test Cross Browser Compatibility of Your Websites (2011). In PelFusion Design Magazine. Retrieved http://pelfusion.com/tools/tools-and-resources-to-test-cross-browser-compatibility-of-your-websites/
- Kingsley-Hughes, A. (2011, March 21) IE9 vs Chrome 10 vs Firefox 4 RC vs Opera 11.01 vs Safari 5 - The BIG browser benchmark! Retrieved from http://www.zdnet.com/blog/hardware/ie9-vs-chrome-10-vs-firefox-4-rc-vs-opera-1101-vs-safari-5-the-big-browser-benchmark/11890?tag=content;siu-container
- Wikipedia:Comparison of layout engines(2009). Retrieved August 4, 2009 from http://en.wikipedia.org/wiki/Comparison_of_layout_engines
- Bangeman, E. (2006)Firefox continues gains at Internet Explorer's expense. Retrieved July 17, 2006 from http://arstechnica.com/news.ars/post/20060711-7234.html
- Net Applications (2007) Market share for browsers, operating systems and search engines. Retrieved July 20, 2007 from http://marketshare.hitslink.com/report.aspx?qprid=0&qptimeframe=M&qpsp=101