Testing for devices

The best way to test web pages is to use the devices themselves. This may not always be practicable, but the desktop versions of Opera all have built-in testing functionality. Opera for Linux, Mac, and Windows can be downloaded from http://www.opera.com/download/.

While the desktop and device versions of Opera are based on the same code, there can still be minor divergences in how pages look and act. This especially applies to JavaScript, but also Opera's Small-Screen Rendering is optimized for each device.

Using the Opera desktop browser as test environment

Testing without Small-Screen Rendering

Make a window of the same size as the device. Opera allows you to include window size in the title bar. Now you will see two numbers in front of the page title, something like 1000:800. The number before ':' is the window width in pixels, the number after ':' is the window height in pixels. A common smartphone size is 320 pixels high and 240 pixels wide, a common regular phone size is 128x128 pixels.

1. Create a page
2. Open the page in Opera
3. Check Show windows size in File > Preferences > Windows.
4. Resize the window to device size

You can add or remove the addressbar and scrollbars as Ctrl+F8 toggles the addressbar, Ctrl+F7 toggles the scrollbars.

Testing with Small-Screen Rendering

1. Create a page
2. Open the page in Opera
3. Select View > Small screen (Shift+F11, or Shift+Alt+F11on Mac)

Testing with a 'Handheld' stylesheet

1. Create a page, have at least one style sheet with media="handheld"
2. Open the page in Opera
3. Select View > Small screen (Shift+F11)

Turning off graphics

Opera has a three modes for graphics, On > Off > Cached only.

Turning off JavaScript

Opera users, also on devices, are likely to have JavaScript enabled. It can still make sense to test the pages with JavaScript turned off if they are making heavy use of dynamic HTML, for example with JavaScript menus. The differences with Opera for desktop means that it is not entirely reliable as a testing platform for JavaScript on devices. If the page still works with JavaScript turned off, it should work on a device too.

JavaScript can be turned off by pressing F12 and then J.

Testing without a mouse

Devices do not have a mouse, and many do not have any other pointing device. To simulate this, turn the mouse upside down and just use the keyboard for navigation and page interaction. The help files (kbd>F1

) list all keyboard commands.

Validating the Pages

It is possible to automatically check whether or not a web page is written according to the standards. W3C has a validation service for HTML and XML, as well as for CSS. Other organizations have sites that allows you to test for accessibility. Even if you do not intend to have error-free pages, the test results they generates are very useful for spotting important errors before the user complaints arrive.

Validating HTML

1. Right-click on document, Frame > Validate Source (Ctrl+Alt+V)

You can also go to the URL <http://validator.w3.org/>.

Validating CSS

There is no built-in CSS validator function in Opera, but you can go to the URL
<http://jigsaw.w3.org/css-validator/>.

Validating accessibility

Making web pages accessible has much in common with making them work on a variety of devices. One such service is Bobby, <http://bobby.watchfire.com/>. A larger list of services can be found at <http://www.w3.org/WAI/ER/existingtools.html>

Validating JavaScript

Unfortunately there is no JavaScript testing service, so this must be tested the old fashioned way, by trying the script in different browsers to see how well it works. Test the script both with and without Small-Screen Rendering activated.

Pages: 1 2 3 4 print