- Creating a New Website
- Creating Your First Web Page
- Testing Your Web Page in Multiple Browsers
- SuperPreview: A Sneak Preview
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Testing Your Web Page in Multiple Browsers
When you design for the Web, it’s important to continually test your pages in multiple web browsers to ensure that they work and appear the way you intend. A web browser is nothing more than a program that renders or interprets the code in your page and displays it accordingly. However, like human interpreters, there can be large discrepancies among browsers when it comes to interpretation. The WYSIWYG editor in Expression Web 4’s Design view is a custom browser built to mimic standard browser behavior, but it is not perfect; some standard markup is not rendered accurately. Likewise, not all browsers are particular about web standards or they interpret web standards differently and, as a result, your page can look different depending on which browser you use.
To help with the testing process, Expression Web 4 can be set up to preview your page in all the different browsers installed on your computer, and in multiple different window sizes. This can be done from the File menu or from the Preview button on the Common toolbar.
To preview the current page in your default browser, click the Preview button on the Common toolbar. If you want to select a different browser or preview the page in multiple browsers, click the down arrow next to the Preview icon to get the Preview in the browser drop-down menu, as shown in Figure 3.8. By default, the list includes the currently installed version of Internet Explorer and your default browser, if different from Internet Explorer. If you have installed more browsers on your computer, you can add these to the list by selecting Edit Browser List from the bottom of the drop-down menu.
){kind=link}
Figure 3.8 By clicking the down arrow next to the Preview icon, you can test your page in one or multiple different browsers (and windows sizes) installed on your computer.
Pressing F12 is the quickest way to test your current page against the last browser you tested in. By pressing F12, you cause the browser to open and you see the local instance of your page just as you would if it were stored somewhere on the Web. As you can see from Figure 3.9, the page looks the same as it did in Expression Web 4. Because you use only the standard styles h1, h2, p, and li, the text fills the entire width of the window. If you grab the edge of the window and resize it, the text reorganizes itself to fit the smaller or larger space.
)
Figure 3.9 Your first web page as it appears in Internet Explorer 9.