How Much of an Effect Can Different Operating Systems Have on Displaying Web Pages

How much of an effect can different operating systems have on displaying web pages?

There are essentially 4 categories of cross-OS bugs that can occur in website (unintentionally; ignoring things like the web developer sniffing the user agent and screwing with unrecognized results, or using a plugin that can only work on one platform, such as Silverlight). Ordered in the most-common to least-common, from my personal experience

1. Assumptions about fonts and kerning -- If the user's operating system does not match your own, and you specify a font that your system has that theirs does not, the text will not have exactly the same length and possibly height, even when specifying a specific point size (the lowercase 'm' should match, but all other characters can differ, like the height of the capitals). This can wreak havoc on fixed-sized layouts, especially with headings that are expected to be only one line long. Lately, this can be mitigated by buying a "webfont" (usually both old IE and the new modern standard web font are included) and using that in your CSS, hosting the font for the user to download. This can produce a "flash" as the rendering is switched to it once downloaded, though, so you definitely need to specify a long caching time.
2. Assumptions about form elements -- Since these HTML elements are created by the operating system directly, rather than by the browser, even for the same browser they can look different, have different sizes and behaviors, between operating systems. Styling these elements reduces the variability, but some of the form elements (like the <input type="file">) cannot be styled. Just give them a large buffer in your layout.
3. Buggy plugins -- Even if the plugin exists across all operating systems, like Flash, generally they work best on Windows, and then Linux and Mac fight it out for second place (usually more effort put into the Mac port, but on Linux there may be Wiki guides to get it working better, and the distro packagers may use these tricks when auto-installing the plugin for you). The only solution I know is, if you're a Windows dev, to have a VirtualBox image of a Linux distro like Ubuntu or Fedora that you test your site on, and see how poor the plugin performs when you add all of your bells and whistles, then assume that Macs are roughly the same performance.
4. Actual bugs in the HTML renderer -- These can happen, and as the pace of browser development is increasing, the feature/bug parity gap is widening between platforms. Generally, the "native" OS of the browser does the best, followed by whichever platform uses it the most after that. I rarely see regressions, so once something is working across all OSes for a browser, it basically stays that way. You have to be doing something real special to run into this.

CSS appears different on Windows than Mac

The problem is the different default styles that browsers have. Neither way of displaying your page is wrong, they are just different.

You have compensated for the default styles of one browser, which makes it look quite different in all other browsers. As long as you compensate for the default styles instead of overriding them, you will have that problem.

For example, for the .slogan style you should set the top and bottom margin to zero, instead of using relative positioning to compensate for the default margin. You can use line-height to center the text vertically in the element, instead of moving it up or down to place it in the center.

Example:

.slogan{
  width: 960px;
  line-height: 30px;
  margin: 0 auto;
  color: white;
  font-size: 1.3em;
  font-family: 'Aldrich', cursive;
}

How to detect the OS from a silverlight application?

There are two ways.

From Silverlight:

string os = Environment.OSVersion.Platform.ToString();
string version = Environment.OSVersion.Version.ToString();

From ASP.NET and send it to Silverlight:

StringBuilder sb = new StringBuilder();
sb.AppendFormat("UserAgent={0}", Request.UserAgent);
Xaml1.InitParameters = sb.ToString();

I realise OS specific browser testing is necessary but what about the specific OS's version?

The only browser that's an issue IMO is IE as running multiple versions takes some setup and is not completely decoupled from the OS. The Developer Tools in IE 8/9/10 let you choose the rendering mode of earlier versions, but there are sometimes differences in the rendering between the simulated and "native" browser. Users of the other browsers (Firefox, Chrome, Opera, Safari) tend to upgrade quickly and in addition, even early versions of those browsers were fairly compliant (aside from CSS3 capabilities that were codified after they were released, but those usually degrade gracefully)

Great article in Smashing Magazine about setting up testing for IE using virtual machines.

Print designers moving to web ... what do they need to know?

Fonts and Text

• You are limited to a small subset of
  fonts
• Fonts are viewed at different sizes
• There is a readability limit for how
  wide paragraphs should stretch (in a
  fluid layout)
• Write for readers of all types - Some
  will skim, others will read in detail

Images

• Sites are viewed at different
  resolutions and screen sizes - Design accordingly
• To achieve transparent backgrounds in
  IE6, use PNG8 with alpha (IE6 doesn't
  support varying levels of
  transparency, it's either 100%
  transparent or it's opaque)
• Use CSS sprites
• Images should not be used in place most of text
• The img tag should be used for images
  with semantic value and all layout
  images should be CSS images
• Every img tag needs to have the alt
  attribute to validate

(X)HTML and CSS

• Browser rendering varies greatly
• Validate CSS and (X)HTML for a
  greater probability that the design
  will be cross-browser friendly
• Don't use CSS hacks
• Use the proper semantic markup
• Pages should be able to work without
  JavaScript enabled
• Read Yahoo's guide for
  performance and use YSlow
• Dreamweaver's design mode doesn't
  reflect how a page will appear in
  real browsers

General Design

• Simpler is often better in terms of
  usability, accessibility, design, and
  download size
• Lists of greater than five or six
  items should be broken up visually
• Consistency is important - Don't
  change your navigation, etc without
  an extremely good reason
• When choosing colors, keep those with
  color-blindness in mind. This will
  affect how you choose to convey
  meaning by color.
• Place the most important information
  above the fold (the part of the
  screen that shows without scrolling)
• The web is interactive. This
  drastically affects how you consume
  and display information. You can hide and subsequently display information using tabs, accordion, and similar methods.
• Think in terms of primary and
  secondary calls of action. What do
  you want the user to do? Where do you
  want them to go next?

What could cause the same browser on different PCs to render the same HTML differently?

Since we can't take a look at the site in our own browsers, here is the process that I would use to try to nail down the issue:

• Start removing code blocks piece by piece until the two browsers look the same.

• Whichever block of code you last removed that made everything line up perfectly (even if you are missing a chunk from the body), that's near where the culprit is.

• Since you've found the culprit, place all of the code back. Start messing around with the fonts first off. Change fonts, sizes, remove text, etc. until you can find a condition under which the browsers are the same. If it's not a font issue, start messing around with other parts of it until you've found the condition that matches it up.

• Once you've done that, you will know your issue and you can work around it.

---

Related Topics