Pages Designed on a Mac and Viewed on Windows

Approved on one screen, used on another

A new design is usually made and presented on a Mac, and the owner often approves the final pages on a MacBook or an iPad.

Many customers will see those pages on something else: a Windows computer at work, often a few years old, with a plain monitor and Internet Explorer or Chrome.

There the same page can look noticeably different. Elegant text turns thin and ragged, scrollbars appear, and a one-line heading takes two.

None of it shows up in the approval meeting, because nobody in the room is looking at a Windows screen.

What changes between the two

• Text rendering, which makes light fonts thinner on Windows.
• Scrollbars, hidden on a Mac and always visible on Windows.
• Installed fonts, which differ between the two systems.
• Line breaks, which move when letter widths change.
• Colour and contrast on older office monitors.
• The browser, which at work may still be Internet Explorer 11.

The third is the one that produces the strangest results. A design that names a Mac font with no sensible fallback can appear on Windows in Times New Roman, which nobody chose.

Thin, ragged text

Macs and Windows draw text differently. A Mac smooths letters generously, so light weights still look solid. Windows snaps letters more tightly to the grid of pixels, and the same weights come out spindly.

Windows also relies on hinting, instructions inside a font file about how to sit on those pixels. Some web fonts carry little of it, and look fine on a Mac and rough on Windows.

The usual culprit is body text in a light weight, and switching it to the regular weight of the same font solves most of the problem.

Scrollbars that appear from nowhere

A Mac with a trackpad hides scrollbars until you scroll. Windows shows them all the time, and each one takes up width the design did not allow for.

A box set to always scroll shows two empty scrollbars on Windows, even when its contents fit. A section set to the window's full width ends up slightly too wide, and the page gains a sideways scroll.

Both come from code that looked harmless on the designer's screen. A developer can fix each in a line or two, once someone has seen it.

Fonts that are not installed

A style sheet lists the fonts a page should use, in order of preference, and the browser uses the first one it has.

Designs made on a Mac sometimes name Helvetica Neue or the Mac's own system font with nothing usable after it. Windows has neither, so the browser falls back to its own default.

Web fonts loaded with the page avoid this, provided the list of fallbacks ends in a font Windows has, such as Arial or Segoe UI.

A worked example

An industrial supply company selling fasteners, abrasives, cutting tools and safety gear had its site redesigned last winter. The designer worked on a Mac, and the owner approved every page on an iPad.

Its customers are purchasing staff and shop foremen, ordering from Windows computers in offices and on shop floors.

The week after launch, the counter staff looked up a product on the store's own Windows computer. The category headings, set in a thin weight, looked broken, and every specification table carried two scrollbars.

The request-a-quote button had wrapped onto two lines, and because it had a fixed height, the bottom of the second line was cut off.

The causes were the ones above: a light weight, tables set to always scroll, and a font whose letters ran wider on Windows than on the Mac.

The developer moved the headings to a regular weight, let the tables scroll only when needed, and let the button grow with its text. New pages are now checked on a Windows computer before sign-off.

Line breaks and buttons

When the font or the rendering changes, letters change width slightly. A heading that ended neatly on the Mac wraps a word onto a second line, and everything below it moves down.

The menu is the usual casualty: seven items that fit one row on the Mac become two rows on Windows, overlapping the page beneath if the header has a fixed height.

Designs that leave a little spare width survive this. Designs that fit exactly on the designer's screen do not.

Pale grey on office monitors

Many Mac screens are bright and sharp; many office monitors are dim and old.

Light grey text and the faint tints that separate sections can vanish on them, so text people must read should be dark enough to survive a poor monitor.

Internet Explorer at the office

Windows 7 is still common on office computers, and Internet Explorer 11 remains on many of them, sometimes as the only browser staff may use.

Newer layout techniques, such as the CSS grid layouts that arrived in Chrome, Firefox and Safari in March, are handled differently or not at all by Internet Explorer.

If your customers order from offices, ask your developer which parts of the design depend on newer features, and what Internet Explorer shows in their place.

Checking without buying a computer

The simplest check is a real Windows machine: an office computer, a colleague's laptop, the one at the front counter.

Microsoft also offers free, time-limited copies of Windows for testing websites, which a designer can run on a Mac. Paid testing services show a page on many combinations at once.

Start with the pages that earn the business its work: the home page, the busiest product or service page, and every form.

The counter-case

Not every business needs to worry equally. One whose customers mostly arrive on phones should test on phones first, and treat Windows as the second check.

Many designers already test on Windows as part of their process, and a site built on a well-tested theme will have fewer surprises.

But a business that sells to other businesses should see its key pages on Windows before approving them, because that is where its customers will see them.

Before approving a design

1. Ask which screens the design was checked on.
2. Open the key pages on a Windows computer.
3. Read the body text at a normal distance.
4. Look for extra scrollbars and sideways scrolling.
5. Check headings, menus and buttons for new line breaks.
6. Try Internet Explorer 11 if customers use it.
7. Fill in every form before sign-off.

Step two is the one that catches almost everything else. Ten minutes on a Windows computer before approval costs far less than the same problems found by customers after launch.

Another design choice that looks right on the designer's screen and fails on the customer's is covered in ghost buttons on top of photographs.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.