Have you ever noticed that your website layout changes slightly when viewed on someone else’s computer? This is a common theme in web design, which is why the best in the business compose their websites to be compatible with all major browsers and operating systems.
The reason this happens is because each company’s browser is written from original code with the intention of following certain standards of web design. It’s tough to get them all to line up perfectly in the way that they render web pages, so we just have to be careful in the way that we format things when building our websites.
One of the number one rules of web design is to always test your website in multiple browsers to ensure consistency! You'll see what we mean in a moment. If you're not already familiar with how the Text tool works in VSD, you may want to read this article first.
Click to skip to a section
- Comparing Your Webpage in Different Browsers
- Different Versions of Internet Explorer
- Using Style Sheets to Increase Consistency
- Using Advanced Text to Increase Consistency
- Deciding Which Method to Use
With operating systems, font settings (among other settings) may cause differences between computers even when using the same browser. Let’s take a closer look at this with a small example website we’ve made with Visual Site Designer.
Here's what our design looks like within the program:
See how the text fits nicely into the little box we've created? Now let's see what it looks like in various browsers/operating systems:
|Windows 7||Mac OS X|
The font face, size, and line height differ greatly! You'll notice also that not one of these browser/operating system combinations matches our project in VSD. This is partly because VSD is a workspace and not a browser; it does a great job of placing the text boxes where you'd like for them to appear, but then the browser takes over and applies its own text formatting. We've chosen to use an 8-point font, and "8-point" is interpreted by the browsers differently.
|IE 8||IE 9|
So how do we ensure that our webpage renders how we want it to? The answer is in CSS (style sheets), which determine all of the styling rules on the website. Visual Site Designer helps you build your site in a WYSIWYG workspace so that you can avoid having to mess with confusing code. However, without messing with the code of your website, there is no way to edit the style sheet. Add to this that we are in an era in which a wide spectrum of browsers is used, and WYSIWYG ends up meaning "What You See is Very Close to What You Get." Rather than building a website by looking at a long list of text code and assuming you're placing objects accurately, VSD gives you a hands-on visual representation of your website and places objects absolutely on the page; then the browser comes along and changes things slightly.
The browser provides its own default style sheet, which applies its own style rules to your webpage. As a result, each browser's differing style sheet has different rules about what 8-point means, how much line-spacing to use, etc. If you had included a reference to your own style sheet in the webpage's code, you would be able to supply more specific rules that would override those of the browser.
The pros generally use what is called a Reset CSS style sheet, of which the most popular has been written by Eric Meyers and can be found here. This collection of style rules resets all of those browser-supplied rules to neutral values, so that your webpage can render as close as possible to the way you intend for it to. If you really need your text to be aligned/formatted in a specific way, you have two options:
- Learn CSS! This is actually a great option, as it gives you complete control over the styling of your website. We have an excellent HTML Editor that makes this process significantly easier than writing it on your own.
- Use the "Advanced text" options found in VSD to turn your text block into an image. Here's how it's done:
Click the text box. You'll want to ensure that the box around your text is blue and not red. If the box is red, you're editing the text, and you just want the text to be selected. Now click the Object button in the main toolbar at the top of the program to bring up the Object Properties window.
Now check the box marked Allow advanced text.
Enabling advanced text allows you to configure advanced settings that can only be applied to images; as a result, your text block will be converted into an image as soon as you apply an advanced text setting. To seal the deal, let's supply some alt text in the Alternate Text input box (Click here for concerns regarding advanced text settings):
Now your text block has been converted into an image and should appear identical in every browser! Let's compare two screenshots from Google Chrome in Mac OS X with a screenshot of the project within VSD:
With Advanced Text
In order to determine what steps you'll need to take to make your website look professional, you'll need to ask yourself two questions:
- Do I need this text to be arranged in a specific way?
- Do I want this text to be able to be copied and pasted?
If you answer yes to the first question, the Advanced Text options may be your best bet, although coding your website by hand using HTML and CSS is a great option, albeit more difficult. In general, with large blocks of text, it doesn't quite matter how the text wraps. As long as the content is there, the browser can use its discretion to determine where the words are placed. You probably only need the placement to be exact for things like titles (headers) and other small bits of text. If it appears that some browsers do wacky things like move your text outside of the boundaries you've intended, you may need to choose one of these other methods. Otherwise, VSD should do everything you need it to do.
If you answer yes to the second question, you can't use Advanced Text since it converts the text into an image. Since the browser no longer recognizes it as words, but just pixels within an image, the browser will not allow you to highlight and copy the text. Also, since the browser no longer recognizes the words, the text can't be recorded by search engines, which may reduce the traffic to your website (However, this is precisely the purpose of alt text.)
Therefore, if you answered yes to both questions, you really need to learn CSS! Don't be afraid; it's not as complicated as it seems—in fact, you can think of it like you're graduating to the next level!
We hope this cleared up some questions you've had about how your website can change depending on where it's viewed. Remember, it's important to test your webpage design in multiple browsers! At the very least, test with Chrome, Firefox, and Internet Explorer to get a good cross-section of the different types of web browsers. If you see something that's too far from the intended format, you should now have the knowledge you need to whip it into shape.