On the Spot Marketing

Site Consistency Across Browsers

Details Count in Web Design

At a basic level, a page can be made or broken by its graphical and technical design. Effective web site design is more than just coding html and making graphics 'web-ready'. Multimedia plug-in's and scripting issues can further complicate matters.

Below are examples of the same web page using the same html code which will appear different on the same machine using different browsers. Visitors to your site are likely to get many different 'looks' from the same html coded page*. You may want this, you may not.

Below are examples illustrating the differences in display sizes: 13" compared to 21" monitors (17" monitors - not shown).

* Any browser can occasionally mislaid a page, this is not the focus of our discussion.

Designing for multiple viewing environments is crucial because everyone uses different equipment and software. Below are side-by-side comparisons of different browsers and platforms. See how monitor size; the make & version of the browser and platform, can effect the appearance of your website.

Real web design goes beyond the capabilities of over-the-counter plug 'n' play html packages. These examples help to demonstrate the importance of html coding and the impact html has on graphic design.

We randomly selected example pages below while browsing the web. We would like emphasize that we did not develop the web pages below nor are we poking-fun at these sites. We are simply using them as examples to illustrate how your corporate image can be seen differently depending on your visitors computer, monitor and browser.

After you have finished here, check out our OtS Website Portfolio.

Figure 1

Get Different Looks From The Same Html? - It's True!

Below are examples of one site using the same html, same graphics on two different platforms. Mac OS and Windows 98 are shown on three relative monitors. See the importance of planning for platform and browser differences.

Again... we did not work on these sites and we feel confident that TE did not plan for their logo to be 'chopped in half' when viewed on a 13" monitor - shown in Examples 3 & 4.

Example 2 - The whole page on a 21" Mac monitor.

Example 3 - The same page on a 13" Mac monitor.

Example 4 - Viewed a 13" Windows 98 display.

Example 2

Mac 21" display

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 2
Mac
21 in. (1280x1024)
Netscape 4.51
Millions

Example 3

Mac 13" display

Example 4

Windows 13" display

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 3
Mac
13 in. (640x480)
Netscape 4.51
Millions

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 4
Windows 98
13 in. (640x480)
IE 4
Millions

More... Viewing Html on 21", 13" Mac and 13" Windows 98.

A visitor viewing Example 7 below on a 13" PC system loses a portion of the company logo and the overall 'feel' of the page is lost.

The color of the logo is also wrong. Because all user workstations are not capable of reproducing above 216 colors, the visitors browser (Example 7) chooses a web color (red) that is completely different than the intended (blue) color of the company logo.

Same page, same html, different colors.
If you look closely, you may also notice the difference in the size of the type. In a moment, we will zoom in to show you what the user actually sees and how type can change from one platform to another.

Example 5 shows the whole site on a 21 inch Mac monitor.

Example 6 shows the same site on a 13" Mac Monitor.

Example 7 on a 13" Windows display.

Example 5

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 5
Mac
21 in. (1280x1024)
Netscape 4.51
Millions

Mac 21" display

Example 6

Mac 13" display

Example 7

Windows 13" display

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 6
Mac
13 in. (640x480)
IE 4
Millions

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 7
Windows 98
13 in. (640x480)
Netscape 4.51
256 colors

Type Can Look Different...

You Should Care.

Deeper into the same site, two different browsers (Example 8 and 9) interpret html differently when viewed on identical 13" monitors. They reveal major differences in the appearance of the type.

See how the resulting difference can impact the 'feel' of the page... even though the page is using the same html.

Sometimes this is not a big deal. In other cases, it can be disastrous to the look and feel of your site.

Bad html coding choices can distort the look of your site... causing misplaced graphics and completely changing the 'intended feel' of your site.

P.S. This page is in no way representative of any layout choices we might have made had we designed this site . Example 8 & 9. You can view some examples of page layouts that we have designed in our web portfolio or our marketing portfolio (the latter is being renovated, but you can still see the detailed examples).

If your company is trying to present a professional image, web type should have a 'a clean, calming feel'.

Many of the inconsistencies in 'browser-performance' are due to market demand for browser features. As soon as a new browser is released, users demand even more! The demand spurs change in computer hardware and software, opening up a new can of worms.

Browsers developers are using tactics 'fair' and 'foul' to move the bulk of consumers to their product. Html standards change with every release causing turmoil for wysiwyg html editing applications.

At On the Spot Solutions we design your site to look great on Windows, Mac's and browsers 3.0 or above.

Example 8

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 8
Mac
13 in. (640x480)
Netscape 4.51
Millions

Mac 13" display

Example 9

Above:
Platform:
Monitor Size:
Browser:
Color:

Example 9
Windows 98
13 in. (640x480)
Netscape 4.51
Millions

Windows 13" display