Last week I asked the question in a poll How important is it that your pages look identical in every browser?

This has sparked some discussion about the importance of pages looking the same in every browser.

I would like to expand on this idea for a moment. There is a difference between pages looking similar and pages being identical. There is also a distinction between pages that look differently but function and pages that don't function.

I have worked with designers who want their pages to look identical in every browser that they view it in. And by identical I mean IDENTICAL. I'm not talking about the pages having the same layout, logos, and color scheme. I'm talking every pixel matching in every browser that the page can be seen in.

I have seen designers take screen shots of the pages in Firefox and IE and then overlay those screen shots in Photoshop to see where they didn't line up exactly. I have worked with designers who took screen shots on different monitors and then compared the colors to see if the colors matched (never mind that no two monitors have the same color syncronization unless they have both been calibrated to the same settings).

How Important is That Level of Similarity Across Browsers?

That's really what I'm asking. What do you think? Is that level of precision of value to you? Why or why not?

But Then Came Mobile Devices

The reason this comes up for me is because of how users use the web. Most people turn on Internet Explorer, surf the web and then turn it off. They don't open IE, browse a little, then open Chrome, and re-browse the same pages. Web designers do that, but the average user does not.

So, if they are never going to see that IE has the logo 5 pixels closer to the top than Firefox, why are you spending hours “fixing” that? Sure, older versions of IE don't support CSS rounded corners. But does it really matter if Safari users see that and IE users don't?

Of course, as Jimmy Williams pointed out, people do visit web pages with different browsers. Windows users may have Android or iPhone/iPad devices that they use to browse when they are away from their desktop. So the argument that people don't use different browsers is not as true as it once was.

But I would argue that trying to keep web pages identical as I described above in this situation is not only a waste of design effort, it's also a bad idea. A 3-column web page design can be easily rendered on an iPhone or Android phone. But in many cases, the text is so small that it can't be read without zooming. Sure, readers can easily pinch-zoom, but why are you forcing them to?

With CSS media queries you can create a layout that uses the same colors and logo as the regular site, but uses only one column and better fonts for the smaller screen. Your readers will know they are still on your site, because the logo and colors remain the same, but they'll be able to access the content more quickly (without having to zoom), which will make them appreciate your designs even more.

What do you think? Is it still important to you to keep your designs identical across browsers?

Identical pages and browser support originally appeared on About.com Web Design / HTML on Tuesday, July 19th, 2011 at 03:45:16.

Permalink | Comment | Email this