April 7, 2007

Innovative Sunrise Browser aids Mac Web developers

Author: Nathan Willis

Sunrise Browser is an open source Web browser for Mac OS X intended for use as a Web developer's tool. It is not a groundbreaking achievement in that regard, but it is worth checking out due to its innovative and often unusual user interface choices.

Sunrise is based on WebKit, the free software HTML rendering engine used in Apple's Safari, Nokia's S60 Browser, and originating in KDE's Konqueror. The latest release, 0.895, is available as a Universal Binary, requiring OS X 10.3. The package weighs in at just 752KB, and the binary is ready to drag and drop into the Applications folder -- no installer or click-through license necessary. The GPLed source code is available for download on the same page, as an XCode project just over one megabyte in size.

Web aids

Sunrise Browser. Click to enlarge.

Sunrise's major Web developer features include one-click window resizing, page snapshotting, an enhanced HTML source view, and a page zoom. The first two are straightforward. One-click window resizing is implemented with a button in the upper right corner that lets you advance through 640x480, 800x600, 1024x768, and full screen sizes. It is nice for layout testing, but not interesting enough to warrant switching browsers. The snapshot-making feature is called Page Shot; with one keystroke it writes a PDF of the rendered contents of the current page -- either just the portion visible in the window or the entire page. You can choose where snapshots are saved, and Sunrise auto-numbers them for you. Thanks, no doubt, to OS X's integrated PDF support, Page Shot is blindingly fast. As with window resizing, it is a nice but not necessary option to have.

The improved source view component is far more useful, for two reasons. First, it is semi-transparent; you can adjust the opacity of the source window to your liking and overlay it on top of the rendered page below it. That is especially handy because the page source is editable. You can make changes to the code in the source view and watch them updated in the displayed page instantaneously. Of course, you are only updating the local, cached HTML, not the original page on the server, but for testing purposes this is a big time-saver.

Page zoom allows you to change the view size of the current page, from 10 percent all the way up to 400 percent, via the convenience of a pull-down menu on the toolbar, and without waiting for the page to reload. Getting the most out of page zoom depends on understanding what it does and does not do. The content is not reloaded, just rerendered. Zooming out to 10% gives you a quick overview of formatting on long page, while zooming in to 400% is good for tweaking fine adjustments such as padding, kerning, and element alignment. It is odd to see the zoomed-in content at first, since raster graphics are blown up and pixelated, but vector-based contents, including fonts and HTML elements, remain smooth.

There are smaller developer-friendly features as well. With one keystroke you can launch the current page in the system's default browser, and you can automatically run the current page through the W3C's HTML and CSS validation services.


Sunrise has several features described as designer-oriented on the project's home page, but to which -- despite their usefulness -- I could not see a direct connection to Web design. Draw URL, for example, is a feature that with one keyboard shortcut will pop up a full-screen-width box showing the current page's URL. The documentation says this is good for presentations, which may be true, but it is not useful for Web development.

Sunrise can also pop up a list of all CSS stylesheets linked to from the current page and copy the current URL from the keyboard.

Other features are there to improve the overall browsing experience. The graphical bookmark manager is a prime example; it uses thumbnail images automatically generated from each bookmarked page. An ever-increasing pet peeve of mine is sites where either every page has the same title, or the site name appears before every title, making the titles indistinguishable in a narrow list or sidebar; graphical bookmarks help fight that disease.

Sunrise also has a nice dialog that pops up when you initiate a download to save a remote file. It presents the URL in an editable text field, so you can change it if it is clearly mangled (as sometimes happens with embedded media). It also gives you unobtrusive checkboxes for "open when complete" and allows you to easily specify the local target folder.


Despite its innovative features, Sunrise does have its shortcomings. It is far from a full-featured browser; notably there are no tabs, which many users cannot live without. And the interface has some inconsistencies that may be present only in the development code: the window title bar is smaller than that of a normal OS X app, and some of the toolbar buttons are either misaligned or (in the case of window resize) difficult to read. In its current incarnation Sunrise has 10 top-level menus, enough to muscle every menu applet on a MacBook or iBook completely off the edge of the screen.

Finally, there are a few features I fail to see the purpose of entirely, such as adjustable window opacity. I understand why the source view window is semitransparent: it allows you to edit the HTML and see your changes in the window underneath. But I just don't see what good it is to turn down the transparency of the page window. Last and perhaps least, the Sunrise home page boasts of its ability to save a local copy of the current page's favicon through a menu shortcut. If that is something you have been missing in your other browsers, I guess it is good news for you.

Still, I wholeheartedly endorse Sunrise Browser. Because the Web browser is something we have all grown accustomed to, it is a bit of a surprise when someone starts a new one from scratch that strikes out in new directions. Much of Sunrise's functionality would be welcome as Firefox extensions and reach a lot more users.

An in-browser Web design tool is the undoubtedly a good approach. Ten years ago we may all have been laying out pages in an app like Dreamweaver and then uploading them to a server, but today most real design work is done in server-side scripting, JavaScript, and CSS. Standalone Web design tools may not have much time left. Sunrise Browser is not ready to replace heavy hitters like Dreamweaver, and you could cobble together much of its functionality by tacking on extensions to Firefox, but it is a respectable piece of software nonetheless.

Click Here!