Web Design for Wide Displays and Cross-Browser Support

In ancient times — about 1995 or so — we early Internet adopters were promised that all the inflated costs and redundancies of Web use, like multiple browsers, expensive monitors and competing standards, would be settled issues by The New Millennium. Well, “TNM” arrived a while ago, and we’re still seeing poor Web design for wide displays and cross-browser support. That’s a direct result of more, not fewer, redundancies or, as customers might call them, “choices.” Today there are big and small monitors, monitors with 4:3 and 16:9 aspect ratios, stripped-down and bulked-up browsers, and all sorts of designers who don’t know how to make one Web page look the same on all of them.

Clearly, cross-platform, cross-browser and wide-display compatibility are hugely important. If you design Web sites, or want to know how it’s done so you can properly oversee a designer’s work, a few key concepts and some simple techniques will help a lot. You can keep your site looking good “in all the right places” with the help of this article, and continuing efforts on your part to keep up with Web standards and best practices. Here’s how.

Paint the canvas that people will see

If you design a site with a modest width of 700 pixels and a nice top navigation pane, it should display pretty well (all other things being equal) on any monitor. A much-told story on the Internet concerns a designer who did just that, then visited the client at her office for some page edits and such, and saw the site displayed on a widescreen 22-in monitor — set to 640×480 resolution! Ouch! A snowstorm wouldn’t look good on that big display at that low resolution.

To attract and please the widest possible range of site visitors, your design needs to look good no matter what people do to cripple their monitors’ abilities to display good color and proportion. At the extremes, of course, are a few people you simply must leave out of the discussion (like the lady in the foregoing example, perhaps). Still, it doesn’t take a lot of research to determine what size monitors people are using and what resolutions most are viewing. Keep up on these metrics.

Tables are control devices

Tables in your design are great for assigned fixed widths in pixels or window percentages. When the relative vertical placement of objects in the table doesn’t much matter, the fixed percentage method gives you the most fluid layout approach. When you want to keep some text copy wrapped around an image consistently, this approach can cause major incompatibilities. Text wraps differently in cells of varying pixel widths, so in this case you’d use fixed pixel width — and this may be where you start making some compromises.

If you design a site to look good at 640X480, you should set that table width to 600-620 at the most, and center it for a decent look when wider windows (and/or wider monitors) are being used. Once again, though, if a visitor has her monitor resolution set to 1600X800 and “maximizes” the browser window, the page will show 500 pixels of blank space on both sides of that table. With widescreen monitors gaining ground in the marketplace, issues of size and ratio become more important than ever.

Browsing the browsers

If you thought there were too many choices of browsers in 1995 — AOL, Internet Explorer, Netscape — there are literally dozens today. Many share underlying “engines” (AOL is a rebranded and revised IE, Firefox comes from the former Netscapers) so the proliferation of varied behaviors has slowed down somewhat. Still, among the major players — IE (6, 7 and 8), Safari, Firefox, Chrome, and Opera — there are still issues with display incompatibilities. Many of these are related to the display, wrapping and hyphenation/justification of text, although there are also issues with CSS (Cascading Style Sheet) handling, media streaming and occasionally even color rendering.

As true Web standards emerge for cross-platform and cross-browser typefaces, many of the text-related issues will be history. Right now, Mac-based designers make a point of using the Microsoft Web Collection of typefaces, and designers on both sides of the OS divide can use “Web-safe” colors. The World Wide Web Consortium (W3C) is pushing ahead on new Web 3.0 standards, many of which are attempts to settle, once and for all, bothersome and irrational weaknesses that have survived from year to year since the dawn of the Internet. It’s way past time to get these standards defined and distributed.

Check layouts every which way

If you want your sites to look good on AOL or Safari, on a 10-inch netbook or a 30-inch cinema-style monitor, you really need to work on both platforms (Mac and Windows), or work on an Intel Mac that also runs Windows. Then, too, you should have multiple monitors and change the resolutions to cover all the bases. Finally, you need the major browsers installed on both computer platforms, perhaps even on Linux, as well. Comprehensive “pre-flighting” is not an option, so if you don’t have everything you need, use friends and colleagues to get all the alternative views.

If you’re going to do this work regularly, you need to get yourself set up correctly. If you are a working designer, you are likely doing all of these things. If you are a hobbyist or Do It Yourself’er, or have a small business where you have to wear all the hats, you need to get up to speed — and fast. Time waits for no one, and neither do Web visitors. If your site doesn’t display, they won’t stay, play — or pay!