Understanding cross-browser compatibility

Cross-browser compatibility is the practice of testing designs across all major browser systems and is important in Web design because you don’t just design Web sites for yourself, but for an entire audience on the Web. Because you have no idea which browser your audience uses, it’s essential that you test your designs in all the different systems to ensure that all the visitors to your Web site have the same experience.
The problem that Web designers run into with Web browsers is that each
browser system uses a different layout engine that renders CSS differently.
The difference in CSS rendering can sometimes make adjusting your CSS
styling to account for the different layout engines a challenge. Additionally,
not every layout engine supports all versions of CSS. Table 5-1 illustrates the
different layout engines, the browsers, and the CSS version it supports to

give you an idea of what you’re dealing with when it comes to the different
browser systems. More information on CSS versions, support, and validation
is in Book VI.

Read More

Safari

Safari (www.apple.com/safari) is installed on every Mac

operating system from the large iMacs to MacBook laptops to iPads and
iPhones. In short, Safari is an Apple product; however, Safari can be
installed on a Windows operating system. Rather than a bunch of add-
ons or extensions that you can download and install for Web develop-

 

ment, Safari has built-in Web developer tools, including

• A Developer toolbar with tools used for Web site manipulation,
testing, and debugging

• A Web Inspector with a wealth of Web development tools, including
an Elements pane where you can inspect CSS and HTML markup

• A Resources pane that displays Web site resources by date, size,
and speed

• A JavaScript debugger

• A Timeline pane that analyzes a Web site’s behavior over time

• A JavaScript Profiler that lists the performance characteristics of
scripts that run on a Web site

• A Console pane for debugging

• A Snippet Editor to test HTML markup

Read More

Opera

The Opera browser (www.opera.com) is available for Windows,
Mac, and Linux operating systems and markets itself as being fast,
secure, and completely in line with open Web standards, including
cutting edge development languages like HTML5 and CSS3. Opera has
add-ons available as well, which you can find on its Web site here: www.
opera.com/addons.

Read More

Google Chrome

✦ Google Chrome: Google developed and released this Web browser
(www.google.com/chrome). You can download this browser only for
Windows operating systems, at this time. Chrome has a smaller devel-
opment community and has add-ons, dubbed extensions, that you can
download and install, just like Firefox — although not as many . . . yet.
You can find Web development extensions for Google Chrome on the
Web site here: https://chrome.google.com/extensions/
featured/Web_dev.

Read More

Editing Files and Testing Performance with WordPress Tools

✦ Firebug: Firebug (https://addons.mozilla.org/firefox/

addon/1843) is an add-on that integrates into the Firefox browser and
provides you with a host of tools for Web development, including the
ability to edit, debug, and monitor the behaviors of CSS, HTML, and
JavaScript live for any Web page you view. We can’t live without this
tool mainly because of the CSS editing capabilities. We can open a Web
page in Firefox, activate the CSS editing tool in Firebug, and do live CSS
editing, which makes our Web site development go much faster.

✦ YSlow: To use YSlow (https://addons.mozilla.org/en-US/

firefox/addon/5369), you have to install the Firebug add-on. YSlow
analyzes Web pages and makes suggestions as to how you can improve
the speed and load time of your Web site by incorporating things like
image size optimization, JavaScript, or CSS, or by reducing the over-
all size of your Web page. We use this tool every time we deploy a
WordPress site to get recommendations on how to improve the site
loading time.

✦ Web Developer: Web Developer (https://addons.mozilla.org/
firefox/addon/60) adds a very helpful toolbar in your Firefox
browser that gives you access to several types of Web development
tools, such as CSS viewing, CSS editing, image information, browser
resizing, HTML and CSS validation tools, HTML viewing and editing,
and more. We use the Web Developer toolbar on a constant basis to
help us develop, test, and debug Web sites that we create.

 

As much as we prefer the Mozilla Firefox browser, many users consider it

somewhat of a resource/memory hog. We’ve experienced this as well, but it
isn’t enough to make us stop using it. However, we have to shut down and
restart the Mozilla Firefox browser at least two times during a normal work-
day to prevent it from crashing our system with its resource use

Read More

Mozilla Firefox

One of the main reasons why Firefox is our personal browser of choice is

because it’s an open source software project with a development community
that releases very helpful add-ons and tools to extend its capabilities beyond
a Web browser, turning it into a Web development tool, in many cases.

You can find Firefox add-ons at https://addons.mozilla.org/firefox.
You can find add-ons for just about everything from the appearance of your
Firefox browser to browser-based games. At the time of writing, Mozilla
reports that 2,139,478,273 add-ons have been downloaded from its Web site.

Obviously, we can’t cover all the add-ons available for Firefox in this chapter
because this is a book, not an encyclopedia. However, here are three add-
ons for Firefox that we use on a daily basis to make our days as full-time
Web designers and developers easier, more efficient, and just more fun:

Read More

Mozilla Firefox

Firefox,  is the second most popular browser on the Web and has emerged over the years to be a solid competitor for IE. Designers and developers tend to prefer Firefox to Internet Explorer because Mozilla (the makers of Firefox) use a solid layout engine that adheres closely to

open Web standards and supports and renders CSS better.

Firefox is available for download and usage on Windows, Mac, and Linux
operating systems in 76 languages. You can download it from the official
Mozilla Web site at http://mozilla.com.

Read More

IE Tester

IETester allows you to test Web site designs across several versions of

Internet Explorer, going all the way back to version 5 (IE5). We highly rec-
ommend checking this out and using it to help test your Web site designs
across different versions of Internet Explorer. Download IETester from
www.my-debugbar.com/wiki/IETester.

Read More

Internet Explorer

Currently, the major versions of Internet Explorer that are supported by the majority of designers are versions 7 and 8, with most designers gradually dropping support for version 6 (commonly referred to as IE6). At the time of this writing, Microsoft has released a version 9 beta, with the final

version of IE9 expected in late 2011 or early 2012.

Trying to test your Web site on different versions of Internet Explorer is dif-

ficult because attempting to install different versions on your computer can
cause some big problems, if you don’t know exactly what you’re doing. We
use a few tools for overall browser testing (see the section “Understanding
cross-browser compatibility” later in this chapter); however, IETester comes
in handy specifically for testing on different versions of IE. In Figure 5-6, the
buttons across the top right are labeled for specific versions of Internet

Explorer: IE5.5, IE6, IE7, and IE8. The WordPress Web site is shown in ver-
sion 7 of the IE browser.

Read More

Internet Explorer

One of the challenges that designers come across is the different versions
of Internet Explorer that are widely used across the Web. With each new
version, Microsoft’s flagship browser comes closer and closer to compli-
ance with open Web standards; however, because Internet Explorer is the
browser present across millions of operating systems across the world,
not every individual user or company is quick to adopt the new versions
as they’re released. This results in several versions of IE in use across

the world, and designers generally make an effort to make sure that their designs render correctly on, at least, the last two to three recent versions of Internet Explorer.

Read More

Internet Explorer

Internet Explorer (IE), owing to the fact that it’s part of all Windows operating

systems, is by far one of the most popular browsers. Over the years, IE has struggled with its reputation of not keeping up and being noncompliant with Web standards and CSS rendering that the development and design commu-

nity has come to love and expect from other browser systems. This is largely due to the layout engine (the method used to display Web sites by translating CSS and HTML markup) in use at the foundation of the IE browser.

Read More

Editing Files and Testing Performance with WordPress Tools

As far as the design and development community is concerned, the choice

over which Web browser to use typically falls on how compliant the browser
is with open Web standards developed by the World Wide Web Consortium
(W3C), an international community that develops Web standards to ensure
long-term Web growth (www.w3.org). As a designer, you need to at least
have a working knowledge of what the W3C is and the standards it supports
and promotes. You can read about the W3C vision and mission statement at
www.w3.org/Consortium/mission.html.

 

Read More

Discovering different browsers and tools

Multitudes of different browser systems are available on the Web. This

section takes you through five browsers that are the most popular among
Internet users. Additionally, you find some helpful tools and add-ons to
assist you with your Web design efforts in the different browser systems,
including some of the must-have tools we use on a regular basis.

Read More

Understanding and choosing a Web browser

Knowing which Web browser to use as your primary browser can be confus-

ing because there are so many browser systems available. Everyone has a
favorite browser, and if you don’t already, you’ll find one that emerges as
your favorite for one reason or another. Each browser system has a different
look and feel, as well as different features and tools that make one of them
your preferred browser of choice.

One thing you need to keep in mind, however, is that it doesn’t matter which
browser you use as your preferred browser for Internet surfing. However,
having access to all major browsers is essential so you can test and view
your Web designs in different browsers to make sure that they render and
look the same.

If you can, download and install all the browsers in this chapter to your computer so you have them readily available to test your designs across them. Some browsers work only on a Mac or a Windows system, so use the ones that are for your system.

Read More

TextMate (Mac)

TextMate is an Apple product and, as such, can be used only on a Mac; it’s

the most popular text editor for Mac users and is referred to as “the missing
editor” for Macs. Like Notepad++, TextMate is a syntax editor that color-
codes the markup and code that you write. Additionally, TextMate can

✦ Easily search and replace

✦ Auto-indent mark up and code

✦ Open several documents, each in their own tab
✦ Work as an external editor for FTP programs

TextMate is not free, however. You can download a free 30-day trial from its
Website: http://macromates.com. After using TextMate for 30 days, you
can buy a single-user license for $56.

Read More