Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryWeb Content Preparation

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Testing Pages in Various Browsers

Following is a response to an Ask-the-programmer question (Possibilities newsletter, July feature): Do I need to test how my website looks in different browsers?

There are differences. But not as many as one might think when considering the plethora of different desktops and mobile devices that are in use, and their various browsers.

In my experience, there are less design-rendering differences (how the page looks, assuming it's a responsive page) than functionality differences (how it acts when the user does things like click on something or fill in a form).

Web pages have flowing content. Unless the web page is composed entirely of an image, it's likely that there will be slight changes from browser to browser and operating system to operating system. Some may default to slightly larger font, more leading, or different letter spacing.

Slight font or form field rendering differences can change the flow from browser to browser — different line breaks or occupying a different amount of space.

Many differences are likely to be inconsequential or an acceptable compromise. Some, however, may require changing things for a more pleasing design or better user experience.

A list of specific differences to look for would stale quickly because browsers are being updated so rapidly. Until recently, for example, Safari on Mac didn't recognize the required attribute for form field tags. The attribute is now fully functional.

Although browser publishers tend to ensure their users know updates are available, it is likely that some people don't update their browsers. The features of the latest version won't be available to those people.

Specifications related to HTML5 functionality and CSS functionality are still evolving. There may be no browser that recognizes the full gamut.

Ways to Test

Functionality tests generally need to be done manually. But it may be sufficient to do design-rendering tests via screenshot services.

Manually —

The more HTML5- and CSS3-specific properties the website has, the more prudent it is to manually test the site on various browsers and devices.

Test form submissions, content movement like sliders or content that's revealed or becomes hidden — any functionality that relies on CSS3-specific properties to work correctly, especially properties that might have only recently been added to browsers.

The Mozilla CSS Reference lists CSS property compatibility for various browsers, both desktop and mobile. Click the property you're interested in to find the page with the browser compatibility table. (Because browsers are updated frequently, it is possible the information in the browser compatibility table has already become stale.)

Screenshot Services —

As noted earlier, design-rendering tests can often be done by screenshot services — although it is prudent to manually do the final tests for important browsers and devices.

Here are two websites that offer web page screenshot services.

Browserling provides a quick screenshot of how a browser you select renders the page you specify. This is good for a quick look at how the specified browser is likely to render your page.

Browser Shots makes a screenshot of the rendering of many different browses operating on various operating systems. This is good for comprehensive review of a web page.

Find more browser screenshot services by doing a search for cross-browser testing.

So, yes, if it's important that the website renders and functions correctly in various browsers, then do test the website.

(This article first appeared in Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC