So, your perfect website has just been launched. To you, on your browser, on your screen, on your computer, your website looks exactly they way you want it.

Then, you look at your site on a friend's computer, or your phone, or your friends phone, or your tablet, or your friends tablet, or any other device, and your perfect website looks different. Not broken, just different.

Unlike print, when it comes to the web there are a huge number of different setups on which your website will be seen.

If you're printing a piece of work, you have complete control over the look of the final product. You can spend time ensuring each pixel is aligned correctly, and every colour is perfect. When it comes to the web however, we don't have the luxury of such control over how the final product will be viewed.

So What's Wrong?

There are a few key factors that can affect the way your site looks. They are:

  • The device you're using
  • The screen size and resolution
  • The operating system
  • The web browser
  • User preferences

Let's look at how these factors can affect your site.

Devices, Screen Sizes and Resolutions

The number of devices that can connect to the internet is growing at a rapid rate. No longer are websites a computer exclusive - now phones, tablets, TV's, and even fridges can connect to the internet and view your website.

Each of these devices will have their own screen sizes with their own resolutions as well as their own web browsers, and even their own operating systems (we'll discuss this later).

Screen Sizes and Resolutions

Today, the most common screen resolution for desktop and laptop computers is 1366x768px. This means that among desktop and laptop users, almost all will have a screen that can comfortably view any website.

To users with a higher resolution when viewing a 'standard' size website, everything will appear smaller and as such the need to scroll will be lessened. To users using older devices or devices with a smaller resolution the website will appear larger, and more of the content will be hidden below the fold.

Mobile Internet Browsing and Responsive Websites

Browsing the internet on your mobile is fast becoming the most popular way to view your favourite websites. This being the case, building responsive websites (websites that change according to screen size) has become the norm.

Non-responsive websites will look the same across all devices and screen sizes, and will force the user to do a lot of zooming and scrolling in order to read the content. Websites that are responsive, however, will change their layout to better suit the size of screen that they are being viewed on.

Responsive websites give the user a better, more enjoyable browsing experience no matter what device or screen size they are using.

Operating System and Web Browser

Operating systems and browsers each generally have their own way of displaying websites. A Mac, for example, has different text-aliasing (smoothness) than a Windows computer. The difference in operating system can also affect the range and depth of colours that a screen will display.

Both operating systems and web browsers have control over the default styling of form elements meaning that forms may look and work slightly differently according to what browser or OS is being used, although this is often changed through the use of CSS and occasionally JavaScript.

Web browsers also play a major part in the way websites are displayed. In modern browsers that have kept up with HTML5 and CSS3 standards such as Chrome, Safari, Firefox, and newer versions of Internet Explorer, web developers are given a wide variety of effects that can greatly improve the look and feel of a website. Browsers such as the older Internet Explorer browsers don't have these effects, so display websites slightly differently.

Different web browsers will often display the same page slightly differently. This is due to all browsers having their own quirks, bugs, and ways of displaying website code and images.

User Preferences

Users will often change their computer and browser settings to suit them, and as such can have an impact on the way your website looks.

For example, a user that is hard of seeing may have increased the default text size of their browser and computer. This means that text that would be aligned for people viewing at the default size might appear misaligned for that user.

Also, some users may have changed the calibration of their monitors that can affect the colours they are seeing, or they may have an application installed on their computer that has an affect display of websites and other media.

And That's Why Your Website Looks Different

As you can see, there are numerous factors out of your, and your web developers control that can affect the way your website looks.

However, it is important to remember that what is most important on your site is the content. If your website looks a little different for other people, keep in mind that they are all seeing the same content, and that's what really counts...