Opera for Web designers

A leader in following web standards

The first advantage of Opera is that it is and always has been committed to standards support. This makes pages that work with Opera likely to work with any other browser, and in particular it will make your pages "future compliant".

Gee, do you know what your ALT-texts are?

Making pages accessible is a major concern to a web designer. A fallacy with What You See Is What You Get is the mistaken belief that What You Don't See Doesn't Matter. With a few easy steps you can make pages more accessible for everyone, including users of non-graphical browsers. The easiest step of all is giving each image an alternative text using the ALT attribute. Still, they are too easy to overlook in visual mode.

In Opera it's as simple as G. Press G and your images disappear and hopefully your ALT-text appears. Now you see how the page will look for Lynx or other non-graphical browsers. It's up to you to replace the default IMAGE boxes with something that visually-impaired users, Lynx users, mobile users, and others simply looking for a fast browsing experience can handle. Press G once more and only images already downloaded and cached will appear. This is useful when you are looking for speedy and convenient browsing. Press G a third time and you are back to the default, showing all images.

How will my pages look like in browsers not supporting Cascading Style Sheets (CSS)?

While G-G-G shows how well your pages handle non-graphical displays, Ctrl+G (toggle document settings) can handle all your CSS needs. With default settings (shown to the left), clicking on Ctrl+G switches between using the document (author) style sheet and the user style sheet. You change your preferences in the File > Preferences > Documents tab (Alt+P). If you want to test your page/site relative to a specific style sheet, you can select it in the User CSS box in the bottom right hand corner.

Another useful accessability setting is turning off tables. This conveniently shows how robust your pages are for non-graphical browsers and others that don't support tables. The Frames options, just below, gives you the same flexibility for frames and iframes. For more information on the Presentation modes options and for document settings in general, see the Opera Help files.

Is my HTML page perfect?

In the right-click pop-up menu you can find one of the most handy commands for a web designer, Opera lets you validate any web page. Right-click on the page, select the Frame submenu from the pop-up window and select Validate HTML. You will get a warning that you are uploading local information to an external web site as a security precaution. After clicking OK, you'll automatically get a list of all your, or your rival designer's, HTML errors.

When one size doesn't fit all

Once upon a time, most monitors were 640 pixels wide and 480 pixels high. Now web pages can be shown on devices with screens width and height ranging from a few hundred pixels to a few thousand. Opera can't shrink and grow your monitor, but it can display the size of your windows. Check Preferences > Windows > Show window size. Now when you open a window you will see <width>:<height> to the left in the title bar. Adjust the windows to desired size.

Scaling the web and multiple windows

Unique among browsers, Opera has a zoom function. This makes it possible to scale a web page from 20% all the way up to 1000% (do a Ctrl+B, keyboard shortcuts, and scroll down to the zooming keyboard shortcuts for added speed). You can have a web page window at 100%, duplicate it and set the second one to 50% to get an overview. This is also useful to test a page for how it "ages". Generally speaking, the older the audience, the bigger the type they want. Zooming out 10% for each 10 years of age above 30 years is a nice rule of thumb.

Testing your site using linked windows

In Opera you can link two windows. The best way to see how it works is to try it. Select Window > Create Linked Window. The first window will be a "master" and all links clicked in this window will appear in the second window. Choose Window > Tile vertically to see both windows at once. Having a master window (say a table of content page full of links) and a slave window, where the pages to be examined arrive, can speed up web site testing considerably.

Opera-show presentations

Opera can also be used as a presentation tool, where the presentation is a full-fledged web page. Those of you that have converted presentations for the web, that originally were made in proprietary programs, know how time-consuming and frustrating this can be. For a demonstration of the power of web pages as a presentation tool, see this tutorial on Operashow.

Hyperlink management

It is hard to manage web sites for broken or dubious links. In Opera there is a shortcut. Type Ctrl+J, and a pop up window, Links in frame, will appear. From here you can see where every link is going and its active text. The page links can be sorted, activated, or saved as text, html, or bookmarks.