You may think that building a website is just a matter of designing and building it. You may think that your website will appear the same in any browser. But, unfortunately, this is not the case. Whether you make your own website from scratch, or use a website builder program, your site will look different depending on things that are out of your control. This difference might only be a little, or it could be major.
There are a number of factors that will affect how your website will appear. The three main ones are:
1. The visitor’s browser
A browser renders a webpage by reading the entire code and producing an output based upon that code. You may think that each pixel that you design will come out exactly as you plan it - it won’t. Every browser interprets a website differently. The best way to avoid producing a website that renders differently in different browsers is to write clean code that meets web standards. Most designers will test their websites in a number of browsers to ensure compatibility. There are a number of web tools out there that will take screenshots of your site and then email them back to you, enabling you to check a website in as many browsers as possible
2. The visitor’s operating system
When you set up the operating system on your computer you are able to decide on a theme. These themes affect the way that radio buttons, submit buttons, check boxes and edit fields will appear in your browser. For example, in the Windows Classic their submit button is a grey square whereas in the Windows XP theme it is an oval. Unless it is specified in the code of a website the browser will always display the defaults. You can get around this by specifying how different elements appear in the CSS. This does not affect Flash websites as it is only an issue with how the html is rendered to fit in with the theme of the OS.
3. The visitor’s screen resolution
You have no control over the screen resolution that a visitor uses. Users with a low resolution will have large icons and not a lot of room on their screen. The higher the resolution the more room the user will have and therefore the more space on your website. If you design your website as 1024x768 it will not fit in to the screen of someone whose resolution is 800 x 600. The best way to get around this is not to set your website at a fixed size. Make sure when specifying your width to set it at width = 100%. This means that the webpage resizes according to the screen resolution. If you must use a fixed width then you should be sure to make quite a narrow website so that visitors do not have to use a horizontal scroll bar to view the pages.
A few other things to be aware of:
DOCTYPE
(Note: If you’re using a website builder like Wix, this step is done for you!)
The DOCTYPE is the piece of HTML that goes at the top of your page so that the browser knows what type of document it is seeing. If you use the wrong DOCTYPE in your code then you will either confuse the browser or prevent it from being able to render the page correctly.
Hacks
Some older browsers do not adhere to web standards. And yes, there are still people out there using IE 5. To get around this you can add a small piece of code that will only be viewable to the browser you are trying to get the page working in. This code forces the browser to render it how it should look.
A final tip: if you are having problems with getting your website right in every setup, make sure it is perfect in the one that most of your visitors use and worry less about the rest. Most web statistics programs will tell you which browsers, operating systems and screen resolutions your visitors are using. If you find that most of your visitors are using Internet Explorer then you know that it’s most important for you to get your site working 100% in it.
