Introducing HTML5 - Choosing a Browser to Interpret HTML5

12/3/2012 2:34:36 AM
If you want to start a lively discussion with other HTML5 developers, just ask, “What’s the best browser?” You should be most concerned with what browser those who will be viewing your Web site use — not which browser other developers use. In general, developers use the best browser until another best browser comes along, so they may actually use more advanced and better browsers than the average Web user. If you want the people who visit your site to have the best experience possible, try to find out what browser they’re most likely to use. An even better idea when developing software for yourself or a client is to test your Web pages on all major browsers and on at least the two major platforms — Macintosh and Windows. The major browser developers also make browsers for the Linux OS, but very few people use their Linux box for browsing the Web.

In looking at the major browsers that support HTML5, most can be used either by Windows or by Macintosh operating systems, but sometimes a browser will require a newer OS. So if you have an older system, be sure that the requirements for the browser you use work with your OS.

Several years ago, Microsoft quit making Internet Explorer (IE) for the Macintosh. However, Apple does make a version of its browser, Safari, for Windows. Three browser developers — Google, Mozilla, and Opera — do not make operating systems for computers but make browsers. In this section, I review Firefox, Chrome, Opera, Safari, and IE9.

Keep in mind that browsers’ features change all the time. What’s here is current as of this writing, but it may have changed by the time you read it.

Mozilla FireFox

Mozilla has its roots in the original browser by Netscape called Netscape Navigator, which was introduced in the early 1990s. It featured a mascot resembling the movie creature Godzilla. Mosaic was a browser developed at the University of Illinois; it later became Netscape Navigator. The combination of Mosaic and Godzilla resulted in Mozilla, which is currently a nonprofit company, the Mozilla Foundation. Firefox is Mozilla’s primary browser that supports HTML5.

Besides supporting both Windows and Macintosh operating systems, Firefox also supports the Linux operating system. Linux is not considered a primary OS for home computers, but it is for servers. Firefox is available free for all the supported operating systems. Figure 1 shows a screenshot of an HTML5 application in Firefox.


Figure 1: The Mozilla Firefox browser.

Notice that in the URL window (the window where you put the HTML address) the reference is to file:///Volumes/Macintosh HD/ instead of an http:// address. That’s because the page is sitting on the computer’s desktop. Also, you’ll find that things looks differently if displayed in a Windows environment than they do in a Macintosh one — even for the same browser. (The example page is just for illustration and does not select browsers for you.)

Google Chrome

Google, famous for its search engine and maps, created its browser, Chrome, from the ground up with HTML5 in mind. It has browsers for Apple, Windows, and Linux operating systems — all available for free. Figure 2 shows the same exact Web page on the same computer as Figure 11 — see if you can detect the differences.


Figure 2: Google Chrome displaying the same HTML5 page as shown in Figure 1.

Other than the different styles of the two browsers, it can be difficult to see the differences in the page. With a simple page, subtle differences won’t affect how your Web page looks. However, as your pages get bigger and more complex, small differences can grow.

One Web page development tool, Adobe Browserlab ( lets you see how a Web page looks in different browsers at the same time. Browserlab can be run directly from Adobe Dreamweaver CS5, or you can visit the Adobe Browserlab Web page. To get a little more dramatic difference, let’s compare the sample Web page in Firefox on a Macintosh with one in Windows 7 running Google Chrome. Figure 1-6 shows what the side-by-side comparison looks like. (Graphics are not displayed.)


Figure 3: Comparing browsers in Adobe Browserlab.

Part of the difference is due to the ways in which Windows and the Macintosh operating systems display text and user interfaces (UIs). Another view that Browserlab provides is called an onionskin; it superimposes one over the other and you can see more precisely where text and UIs appear. Figure 4 shows this difference.

The blurrier an onionskin appears, the greater the differences in the way the Web page materials are rendered. In Figure 3, you can see that the view is very blurry, indicating that some key differences exist between the browsers and operating systems.


Figure 4: An onionskin view of superimposed browsers.


When I was examining the Opera browser at the time of initially testing the different browsers, it seemed to have the best HTML5 features actually working. Plus, Opera has a special browser, Opera Mini 5, that you can download free for your mobile devices. HTML5 works fine on mobile devices, as you can see in Figure 5, which displays the sample Web page on an iPhone using Opera’s mobile browser.


Figure 5: Opera Mini 5 browser.

Full-size Opera browsers are available for Windows, Macintosh, and Linux operating systems as well. When creating Web pages, you should plan for different size devices. As you can see, the sample application we’ve been using can fully fit in a mobile device as well as on large screens.

Apple Safari

Apple makes Safari browsers for Macintosh and Windows as well as for mobile devices. For comparative purposes, Figure 7 shows how the sample application looks on Apple’s Mobile Safari, developed for the iPhone. Compare this with Opera Mini 5 in Figure 6.


Figure 7: The Mobile Safari browser.

Just as there are few differences between the appearances of the Web pages as viewed on a desktop or laptop computer, you shouldn’t see many differences between what different browsers show on mobile devices. That’s a good thing! Web developers waste a good deal of time trying to make sure that all their pages look the same on different browsers and platforms. With a common implementation of HTML5, that shouldn’t be a problem. Other unique features on browsers, such as having tabs, or other characteristics that make Web browsing easier, are fine as long as the browser’s implementation of HTML5 is implemented according to the specifications defined by the World Wide Web Consortium (W3C).

Microsoft Internet Explorer 9

At the time of this writing, Internet Explorer 9 (IE9) was still in beta stage. According to Microsoft, its IE9 browser will be fully compliant with HTML5 standards. Where possible,I’ve included examples showing the IE9 at work with HTML5 Web pages using the IE9 beta browser. Figure 8 shows the test page in the IE9 beta browser.


Figure 8: Internet Explorer 9.

Previewing different displays

As you’ve seen, Web pages can be viewed on a number of different browsers and operating systems. Web developers need to consider the characteristics of the devices that their pages are to be viewed on, such as a desktop computer or a mobile phone. Suppose you develop for an iPhone and iPad (or some other mobile device and tablet); if you can preview your work side by side, you’re better able to make comparisons. Adobe Dreamweaver, a Web page development tool, allows the developer to view multiple dimensions simultaneously, as shown in Figure 9.


Figure 10: Multiscreen preview in Adobe Dreamweaver.

You can change the device dimensions. For example, a Motorola Droid displays an 854 x 480 screen and a Sony VAIO UX displays a 1024 x 600 screen. The multiscreen preview helps you decide how to set up your page to optimize it for your viewers. Finding the best compromise is an art and one that can be made less onerous by knowing as much as possible about your audience and the devices they’re likely to use to view your materials.

Top 10
Review : Sigma 24mm f/1.4 DG HSM Art
Review : Canon EF11-24mm f/4L USM
Review : Creative Sound Blaster Roar 2
Review : Philips Fidelio M2L
Review : Alienware 17 - Dell's Alienware laptops
Review Smartwatch : Wellograph
Review : Xiaomi Redmi 2
Extending LINQ to Objects : Writing a Single Element Operator (part 2) - Building the RandomElement Operator
Extending LINQ to Objects : Writing a Single Element Operator (part 1) - Building Our Own Last Operator
3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular Tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Exchange Server Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe Photoshop CorelDRAW X5 CorelDraw 10 windows Phone 7 windows Phone 8 Iphone