The list of browsers and platforms to verify against keeps getting longer, and as designers, our tempers are getting proportionally shorter; IE6 will probably feature in nightmares for years to come!

Yet doing our work in an ever-widening range of situations is becoming increasingly important.

This article highlights the most common issues that arise when testing with “the usual suspects” and explains why a change in tactics may soon be needed. Your entire perspective on compatibility testing could change.

The Fantastic Five

Back during the browser wars, designers had to suffer through constant bickering between Internet Explorer and its rival (some things never change). The turning point came when newer browsers committed to supporting web standards, which gradually eroded Internet Explorer’s dominance of the browser market.

Times are changing. The increasing relevance of mobile browsing devices and new rendering engines has led to a desire among designers to curb the need to test on every device imaginable.

Designers now resort to playing a numbers game, usually by testing their work in the five or six most common browsers, then claiming coverage of the rest. While this seems like an easy fix, it presents a few problems, because unlike in print, one size certainly doesn’t fit all.

Although the market is dominated by five browsers, designers shouldn’t disregard the orange “Others” slice. Visitors on other browsers still need to be accommodated.

The key to accurately presenting your website’s lovely design to the end user is the rendering engine. One might assume that if you tested a website in the most popular browser for each of the Trident, Gecko, Commit and Presto rendering engines, then you could safely ignore other devices that share the same engines because you would have covered the vast majority of users.

I generally agree that testing in these browsers alone would catch any problems that are visible to the user, but testing in a broader range of browsers, devices and systems has its benefits. It’s worth examining potential problems and deciding whether further testing is required in order to give visitors the best possible experience.

Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome and Safari) and Presto (Opera).

Beyond the Breaking Point

An obvious issue these days is device (or plug-in) dependence, which affects browsers not only at the browser level but at the rendering level. The Apple faithful are surely aware of the iPhone and iPad’s issues with Flash—and because Adobe and Apple started boo’ing each other, we’re still hearing about it.

While Flash does indeed handle the general rendering of content all by itself, testing only in the most popular browsers wouldn’t necessarily show problems with it. While mainstream technologies (both open and closed) are at risk of exclusion, expanding your test base can be critical.

Flash renders outside of the browser, but not every web browser can make use of the technology.

Another issue is the versions of rendering engines. While having the latest and greatest browser is key to taking advantage of new technologies, the continued use of older versions (especially the various devil-incarnate versions of Internet Explorer) requires that we limit ourselves not only to the latest builds of a renderer but also to those that can still function in environments where upgrading software would be either unsuitable or impossible.

Even in compatibility mode, testing in current browsers does not account for old versions of the browsers that use earlier versions of the rendering engines.

Internet Explorer 6.0 uses an older and buggier version of the Trident desktop browser rendering engine.

Rendering issues might also occur if there are differences between the device and platform being used. It goes without saying that testing your website on a range of mobile handsets and pocket surfers may drive you to the brink of insanity, particularly given how different everything can appear.

Designing for such a small screen can be quite a task, especially because conventions for mobile devices are still in their infancy. But this issue applies to desktop platforms, too. It’s not uncommon to see minor rendering issues crop up between Windows and Mac versions of Firefox, for example—a worrying thought indeed.

A List Apart cares so much about rendering differences that it has a separate design for mobile devices.

Another key component that might differ from browser to browser is the JavaScript engine. In the early days, the only question about JavaScript was whether to use it.

These days, browsers with the same visual rendering engine often have different JavaScript engines (Chrome and Safari are a perfect example). Using multiple browsers to benchmark your website’s ability to render those gorgeous jQuery scripts is of equal importance, especially if your design has a lot of functional interactivity.

Chrome Experiments showcases the rendering performance of Google’s browser.

And finally, a topic that gets some people cheering and others groaning: accessibility! In many people’s eyes, accessibility and the way a browser renders a website aren’t related. But it’s worth noting that when people visit your website, their accessibility software might force them to use a particular browser, one that supports the computer’s screen reader or their accessibility device.

In such cases, minority browsers may be overlooked entirely. Remember that your design should also work for these people whose needs are often forgotten.

Opera may have a small market share, but its voice options can be a lifesaver for those with special needs.

The Long-Term Cure

Given all of the accessibility needs, different JavaScript engines, cross-platform issues, display differences, technology dependencies like Flash and the mobile revolution, one could be excused for resenting how much testing is needed. Still, have a look at your target audience’s needs to see whether expanding your current testing workflow would yield long-term results.

Take some time to communicate with your visitors. Perhaps you could run a poll asking which browsers and devices they’re on, and then examine your statistics to see whether they’ve mentioned ways you could improve or expand the interaction on your website.

You may find that you need a mobile design, or maybe there is enthusiasm for an iPhone app, or you may simply get more bug reports for minority browsers. Encouraging feedback is paramount in the evolutionary process of design.

Statistics packages can give a clear idea of which devices have been used to visit your website.

Reaching customers on an increasingly broader scale is something every website owner should consider in the context of usability. Good communication creates an emotional connection with visitors; they feel like their interest is being validated and their time well-spent, and this can turn clicks into customers.

Staying on top of things at the testing stage, then, goes beyond fixing visual flaws. A wider testing field could lead to new features and unique ways of navigating the website. One reward could be a deeper bond with your website’s regular visitors and fans.

Start Your Engines

How you would expand the testing process is beyond the scope of this article, but the simplest way to improve your website’s appearance and the user experience is by ensuring that everything looks presentable on screen.

Below is a list of a wide range of browsers, both mobile and desktop, which might help you widen your horizon as you test. While some will render your design the same, these browsers should help you ascertain the scale of the tests you will need to perform.

More browsers will no doubt be created (and some may already exist), so consider the future as well.

Both desktop and mobile platforms have a broad range of rendering engines.

While browsers built with Trident, Gecko, Webkit and Presto are included (along with their older variants Tasman, Mozilla and KHTML), other rendering engines with a user base have not been included here because of the very limited range of devices that support them.

Devices and browsers with unique rendering engines (text, visual and mobile) that are not mentioned here can be tested individually and could potentially increase the compatibility of your design.

I recommend the browsers highlighted below for each platform. With the exception of the Mac, which uses Tasman, all of these use the Trident rendering engine:

All of these use of the Gecko (previously Mozilla) desktop rendering engine:

All of these use the Webkit rendering engine (or the KHTML fork in Konqueror’s case):

Because Presto is a proprietary platform, it’s no surprise that it is limited to Opera projects:

Over the Rainbow

Perhaps your website is entirely free of errors. Perhaps it looks great in every situation. But if you consider the sheer scale of the requirements for compatibility across platforms, no longer do the big five give you an accurate picture of web users as a whole.

If you take away only one thing from this article, then understand the value of spending more time analyzing your visitors’ needs, because that will help you re-evaluate the testing phase to encompass a wider range of scenarios.

Spend extra time going over browsers for each rendering engine, and don’t forget about the following: other operating systems, which might have differences; other types of devices (such as mobiles), which might render very differently; unique JavaScript renderers, which have implications for speed; older versions of web browsers; and in general the wider scope that is needed as code evolves and changes the web itself.

Summary

In a world where people are willing to invest time, effort and money into making their websites as friendly as possible by catering to search engines and social media, ensuring that your design works (rather than focusing on pixel perfection—remember, the web is not print) can be more valuable to the hundreds or thousands of people who access your website in different ways.

It certainly could mean the difference between attracting customers and having frustrated “Hi and goodbye” visitors.

Written exclusively for WDD by Alexander Dawson

How do you go about testing your carefully crafted designs so that they perform flexibly? Do you plan to optimize your testing workflow so that it is less restrictive? Could your website encourage more visitor feedback on its design?

Never Ending WordPress Business Bundle – only $14!

Thanks to the awesome team and service of Mobify, we were able to easily deploy a mobile version for WDD, which loads extremely quickly and makes it easy to browse our content when you’re on the go on your mobile phone.

Why did we create a mobile version? Mobile access is growing 30% every year. While WDD was optimized to load quickly on your desktop, the same format is not best suited to a mobile device. A more streamlined version was needed, and that’s when Mobify came to our rescue.

The mobile version now carries specially optimized images that load quickly on your mobile phone as opposed to loading the full sized images which are better suited for broadband connections.

Mobify is a service that makes WordPress, Drupal and other websites mobile-friendly. Supports iPhone, Android, BlackBerry and 5000+ other devices. It includes some great features such as Google Analytics, custom domain and branding, CMS plugins and SSL security.

The basic service is free and there are paid plans available for advanced options. How does it work? Mobify doesn’t like ‘complicated’ – the process is kept simple and easy.

To get started, you’d simply click on the different elements of a live website to make them a part of the mobile layout.

Then, deploy one of the mobile device detection plugins provided by Mobify.

Whenever a mobile user visits, Mobify generates a real-time mobile version, optimizing images, styles and advertising for the small screen.

Designing for mobile used to be difficult, requiring style hacks and support for many screen sizes.

Mobify allows web designers to reuse existing CSS, working with familiar classes and elements.

It’s also possible to add content just for mobile, like maps or contact information.

Mobify stores the mobile layout and optimizes content in real-time for devices used by the visitors.

The service integrates with the full site, capturing mobile traffic originating from Twitter, Google and social networks. Since every page gets a mobile version, users get exactly the content they were looking for.

JavaScript, WordPress, Drupal, ExpressionEngine and Apache device detection plugins are provided.

For more information, take the tour below:

Although Mobify is barely a year old, its success speak for itself with many leading websites in the web development industry adopting Mobify’s technology. Check out some of them below:

Here are some testimonials from well known webmasters:

“Extremely impressed with how easy it was! The entire process has been incredibly enjoyable and I have already begun recommending Mobify to my friends and colleagues.” Matt Bango, The New York Times.

“It looks sharp and still feels very light. Everything fits perfectly on the iPhone’s screen, and it feels very true to the original. It’s brilliant!” - Veerle Pieters, Duoh.com

“OH MY HEAVENS TO GOD, IT’S FREAKIN’ GORGEOUS. And works perfectly. And it’s so damn smart! AWESOME!!!!!!!!!!!!!!!!!!!!!!!” - Jeffrey Zeldman, AListApart.com

It was really easy to set up the mobile version of JustCreativeDesign through Mobify’s dashboard… the interface behind the scenes of Mobify is quite easy to use and I had the mobile version customized within 20 minutes of signing in to their site. – Jacob Cass, JustCreativeDesign

I worked extensively to customize everything for the best possible results.

A very special thanks to the Mobify team: Igor Faletski, Nick Foster, John Boxall and Peter McLachlan. Thanks guys for helping us out to deliver WDD in the best possible way to our mobile users!

To check out the mobile version, simply point your mobile phone ‘s browser to www.webdesignerdepot.com and it will redirect you automatically, or you can enter the mobile version directly by going to m.webdesignerdepot.com on your phone.

I highly recommend Mobify’s service to port any of your websites to the mobile world, I couldn’t be happier and I’m sure it will do the same for your sites.

What do you think of WDD’s new ‘mobified’ version? Share your comments and questions below…

Never Ending WordPress Business Bundle – only $14!

There are many ways to test a website before launching, and these include having multiple browsers and operating systems installed, running virtual machines with different configurations or using a hosted image service where a screenshot is produced for a given browser version and operating system to be used for comparison purposes.

Starting today, there’s a new way for testing browser compatibility developed by Microsoft and it’s called SuperPreview. In this article, I’ll be giving you a brief review of SuperPreview as well as comparing and listing alternate systems for testing your website designs.

Overview

SuperPreview is a new free standalone application from Microsoft (still in beta) which enables you to see how your websites will look across different versions of Internet Explorer making migration from IE6 to 7 and 8 much easier than before, without have to start up a Virtual Machine to run IE6, or have a separate computer dedicated to running IE6. They’ll also be releasing a paid version which will handle the non-IE browsers. In this review, I’ll be discussing the free version only. I should mention that this is a very early preview release, so more features and fixes should be coming in the future.

Availability

The beta version of SuperPreview will be announced today at the Mix09 conference and will be available for free download to the general public shortly after that. [UPDATE] Software was released today prior to MIX09, and earlier than originally expected and is now available: Download Microsoft SuperPreview

I was approached by Microsoft to test an early beta version and I’ve been working with their development team over the past few days by giving them feedback and suggestions.

The release version of SuperPreview for Internet Explorer will be available in the summer of 2009.

There’s also a full version which includes support for Firefox and Safari. This is a PAID version which will be part of Expression Web 3. You will have the option to enable it from Expression Web or as a standalone. Estimated release date is also summer of 2009.

SuperPreview

SuperPreview is a pretty cool idea and it’s the first time that I’ve seen this kind of browser testing functionality available as a standalone application as opposed to a hosted service. You basically enter the URL (or local file) that you want to test and it shows you the preview in two versions of IE at the same time, in a split window. It comes with the IE6 rendering engine built-in and requires you to have IE7 or IE8 in order to compare them.

A major drawback is that, at this time at least, they have no concrete plans to release a Mac version, although this may be added in the future. I had to test this on my Mac using Parallels which produced a few bugs, such as slow response time and flickering on some of the loading screens. Also, the user interface is pretty unattractive and not very user friendly in my opinion, although they claim to be fixing this for the final release.

Also, there’s no hosted solution available yet, which would be especially useful for those of us on Macs who cannot install IE for testing purposes.

Key Features:

• Pointer Modes: Allows you to click on individual page sections for comparison. The section’s HTML tag name, its class or ID name, size and position attributes are displayed in the status bar.
• Image viewing: Compare Photoshop comp against the baseline browser to ensure that everything lines up in the browser to match your original design.
• Dom Highlighting: You can highlight specific DOM elements to see which where there are alignment differences between the browsers. It displays the positions of  the rendered elements and their CSS properties.
• Positioning Guides/Rulers: Use rulers to measure the layout differences between browsers. When you position a ruler in one browser window, the ruler in the second browser moves with it.
• Layout views: View side-by-side either horizontally or vertically, or overlay mode.
• Zoom: To select the level of magnification.
• Multiple resolutions: Not yet available in this beta release, but will be included in future releases.
• Thumbnail display: Previews a thumbnail at the bottom of each panel with a miniature map like view of the entire site so that you can quickly click on a different area of the page.

Examples:

The toolbar showing the different guides and rulers

Guides and rulers with DOM highlighting show the differences in rendering in IE6 and IE7

Choosing local browsers, remote browsers or images (screenshot of full version with non-IE browser support)

Pros:

• No need to install IE6.
• Side by side comparison and choice of layout views.
• Can compare Photoshop comp against baseline browser.
• Guides and rulers to measure positioning differences between browsers.
• Overlay mode will show if there are many discrepancies.
• DOM highlighting is useful to find and identify differences quickly.
• Zoom capability.
• Free for IE browser previews.
• Displays PHP and ASPX pages (provided that you have PHP installed on your system).
• Supports whatever the native browser supports, including Ajax and JavaScript.

Cons:

• Currently it works with IE8 in IE7 emulation mode, which is apparently about 90% good. They’re working on making true built-in IE7 and IE8 rendering.
• No version for Mac yet.
• Resolution option not currently available in the beta version.
• Free version only compares among different versions of Internet Explorer and paid version only compares among browsers that you have installed.
• Unattractive UI and icons (at least in the beta version).
• Overlay mode is confusing to identify which browser is which.
• No hosted solution available yet.
• No support for ActiveX (including Flash).
• Cannot compare with Mac browsers.
• Cannot click on links to navigate the site.
• Slow refresh/loading time (at least running XP in Mac with Parallels).
• Thumbnail preview is useless for very long web pages.

Other Testing Methods

A common method for testing a site (besides installing a number of browsers and operating systems) is to use a hosted service that takes screenshots of your web page as viewed in different browsers and operating systems. Here are a few of the most popular ones:

BrowserShots

Supports multiple browsers, Java, Flash, Javascript and screen resolutions. Easy to use and free.

Browser Photo

Supports multiple browsers and versions as well as Windows, Mac and Linux. From 800×600 up to 1024×768. Price: $15 for one time use, or $150 per domain/year for unlimited use

CrossBrowserTesting

Supports multiple browsers and operating systems. You pay per minute of usage. Requires Java. Free trial.

Browsercam

Supports any browser, any operating system. Includes JavaScript, DHTML forms and more dynamic functionality. Option for remote access and mobile page development. From $19.95 for one day usage for browser capture.

BrowsrCamp

MAC OS X browser testing using screenshots. From 800 px resolution up to 1600. Free for Safari 3.1.2 screenshots. Paid service from $3 per day.

NetRendered

Checks how a website is rendered by Internet Explorer 7, 6 or 5.5. Free.

Litmus

Checks every browser and any platform and includes bug tracking. 50 test a month is free but only for IE7 and Firefox 2. 23 Browser support starts at $24 per day.

Finally, you could install multiple browsers, or use virtual machines for further testing.

Virtual Software:

Allows you to install multiple operating systems on the same computer

• VMWare
• Microsoft Virtual PC

Further reading:

http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml
http://css-discuss.incutio.com/?page=BrowserTesting

Disclaimer from WDD’s editor: This post is a personal review of SuperPreview. I was not compensated in any way by Microsoft or any other company for reviewing this product or the others. The opinions expressed here are solely my own.

Please post below what other systems you use for testing your website designs across different browsers and different versions.

Never Ending WordPress Business Bundle – only $14!