Portfolio Design: Browser Testing
Back to Portfolio Phase 3 | Back to Portfolio Rubric
It is important to ensure that your Web pages are readable in more than one browser. Although most students use Internet Explorer on Windows, a significant number of students may use Firefox or be on a Mac.
Any site you create should be avaialble to these students as well. Below are some pitfalls and guidelines for cross-browser testing.
Definition
A browser is the software used to view Web pages. The common ones include:
- Internet Explorer (I.E.) for Windows
- Firefox for Windows/Mac/Linux
- Safari for Mac
- Opera for Windows/Mac
Because Firefox is available for multiple platforms, this is recommended as a default testing browser. Sites that work on Firefox for Windows will usually work as well on a Macintosh (the exception are sites that use scripting).
Browser Pitfalls
Some pages may be designed with formatting or programming features that work in just one browser, but not in any other browser. Some common technologies that may cause cross-browser glitches include:
- Front Page - may include formatting features that only work on Internet Explorer for Windows. The same may be true for Netscape Composer.
- Cascading Style Sheets - some styles may not display identically on all browsers
- Javascript or other programming language - you should aim for one browser per platform (Windows or Mac).
- Exotic fonts - these may differ or be missing on either Mac and Windows.
- Pale Mac colors vs. dark Windows color - Colors on a Mac tend to be paler; colors on Windows tend to be darker. Sometimes a contrast that is legible in Windows is difficult to read on a Mac and vice-versa.
How to Test
Note: To simplify your testing, you may want to install Firefox on your own computer since it tends to be consistent on both Windows and Mac.
- Post your Web page to your Penn State personal Web space or other online location. Record the Web address of your page. (e.g. http://www.personal.psu.edu/...)
- Go to a Windows CLC Student Computing lab or other public lab.
- Open the Firefox browser and view your Web site. Now open Internet Explorer and view your Web site again. They should look almost identical.
- Go to a Mac CLC Student Computing lab or other public Mac lab.
- Open the Firefox browser and view your Web site. Now open Safari and view your Web site again. They should look almost identical.