Apple's Safari 4 UI changes hint at plans for Snow Leopard

Something old, new, borrowed, blue

Some of the changes in Safari 4 are borrowed from external sources, some are new things that will likely migrate into future versions of Mac OS X, and some are features of Leopard or other Apple products that are just now making it to Safari.

Among the new changes is support for 'resolution independent' scaling of the entire web page, just like the iPhone. Rather than only bumping up the size of text and destroying the layout of the page, as web browsers have historically offered to do, Safari 4 allows users to scale the entire page up and down (below, scaled down), either using size buttons in the toolbar or multi-touch trackpad gestures on late modeled MacBook models.

Apple has also spruced up the Google search field to bring it up to par with other browsers, presenting Google Suggest results, Bookmark matches, and integration in-page search all in one instantaneous drop down of search results (below). There's also a curious holdover in the package: the Aqua blue scroll bar. For years, iTunes has signaled Apple's intent to drop the bubbly Aqua bar, so its appearance in the new Safari 4 is somewhat of a surprise.

Standards-based web development

To make standards-based web development even more attractive, Apple has expanded and improved upon its web development tools in Safari 4 to help debug, profile, and optimize the performance of JavaScript, CSS, and HTML code. The Web Inspector window (below top) can now be viewed within the browser window (below bottom).

The new Safari 4 raises the bar for other browsers in supporting HTML 5, which allows developers to build Rich Internet Applications (RIAs) using web standards rather than relying upon external web plugins such as Adobe's Flash or Microsoft's Silverlight. Other browsers, including Google Chrome, Firefox, and Opera are also actively working to support HTML 5 specification.

The new standard includes support for offline operations, allowing users to load RIAs that will continue to work even if they lose their Internet connection. These apps can also make use of HTML 5 databases, which work like huge web cookies to store data managed by a web app. This would allow a web application such as GMail to keep a local store of the user's email for access even when not connected to the Internet, for example.

Safari 4 also supports CSS Animations, Effects, and Canvas standards and supplies a big boost to JavaScript rendering via the Nitro JavaScript Engine, formerly called SquirrelFish Extreme. Together with HTML 5 support, these standards enable developers to do anything from adding animation effects to building full applications that run both within the browser and on mobile devices such as the iPhone, which already supports these standards.

Borrowing Google Chrome's "Tabs on Top"

While Safari originally borrowed the idea of tabbed windows from Opera and later introduced drag and drop tabs, the latest version takes a cue from Google's Chrome browser, which flipped its browser tabs upwards to poke into the unused space of the web browser's title bar.

This almost seems taboo; a window's title bar has long been a sacred cow designated solely for grabbing the window and presenting its title. Apple's earlier experiments to remove the title bar's stripes and slowly blend it into the body of the window in iTunes and later Tiger's unified look were rather conservative steps that were still met with some gasps from users resisting change.

While earlier versions of Safari made tabs an optional feature users had to activate themselves, Safari 4 takes the rather bold step of making its upward facing tabs replace the title bar all together, turning the former wasted space into a functional strip of tabs. The middle of any tab can still be used to grip and move the entire window, but the result is a more complex and advanced looking window, at least once several tabs are added to it.

The new convention also makes dragging a tab into its own window much more intuitive. There's now a gripper icon presented for each tab; simply grab it and the tab can be repositioned in the bar or dragged out into its own freestanding window. This drag behavior isn't new, but how to use it is much more obvious. Safari's title bar tabs (Apple calls it "Tabs on Top") may likely make it into other applications that make use of tabs sooner than later, perhaps even becoming a defining feature of many Snow Leopard apps.

Streamlined Toolbar

The original Safari aimed to present the web as efficiently as possible, paring the app's window frame down to nearly nothing and incorporating the loading progress bar into the URL address field itself. Safari 4 simplifies things even further, leaving one button for adding a bookmark of the current page and adding a refresh icon at the end of the URL field. This turns into the familiar spinning gear icon when the page is actually loading.

Combined with the new title bar tabs, Safari 4 sports the highest density interface found in Apple's consumer software. That's a surprising move for the company, which has historically aimed at targeting simplified needs of entry level users, at least outside of its Pro Apps such as Final Cut and Logic. It also suggests greater user interface sophistication on the horizon for Snow Leopard.

From Leopard to Safari: Cover Flow

Safari's bookmarks page now shows bookmark collections using animated Cover Flow thumbnails of the pages themselves, just like iTunes first demonstrated and as the Leopard Finder adopted shortly afterward. This adds some strong branding to Apple's unique visualizer, which has also shown up in the iPhone and in iPods.

Cover Flow also allows users to rapidly review hundreds of pages when performing a full text search across their web history, something Safari could already do, but which presented results as rather opaque lists of URLs and page names. Now you can visually scan over actual representations of the query-matching web pages themselves, which is far more intuitive when trying to find information from a previous browsing session.

Borrowing Apple TV's video wall: Top Sites

Another feature of Google Chrome adopted in Safari 4 is the presentation of recently viewed sites as a starting point. Apple presents these Top Sites as an encircling grid of thumbnails similar to the video wall in Apple TV ads. It also supplies a way to edit and rearrange this grid, intuitively with drag and drop and pin controls.

Users can also select from a grid of small, medium or large thumbnails, depending on how many icons they want in their Top Sites page. By default, the Top Sites page acts as the default page when opening a new window or tab.

Sites added to Top Sites are tagged with a dog eared star whenever their content changes, making the visualization work like a simple RSS reader to highlight favorite sites with new content.

Looks like Windows on Windows

For Windows users, Apple has released Safari 4 with the native windowing look rather than the original Mac OS X appearance it debuted with. While the original appearance tied Safari's look in with iTunes and retained Apple's branding, it clashed with what users might expect to see on the Windows desktop and appeared somewhat fake looking.

Safari 4 not only adopts the Orange and Blue "Fisher Price" theme of Windows XP or the Glass look of Vista, but also provides Windows users with the less accurate but more familiar Windows-style rendering for text.

Looks like Snow Leopard on the Mac?

While Safari 4 on Windows looks more like a Microsoft product, on the Mac it looks like the future of Mac OS X. The latest developer builds of Snow Leopard feature only minor user interface enhancements, currently carrying forward the Time Machine "universe" branding that originally debuted with Leopard in 2007. While the thrust of the Snow Leopard release is on internal improvements rather than marketing features aimed at consumers, Apple has historically branded each new release of Mac OS X with significant user interface changes.

This indicates that Safari 4 offers a peak into Snow Leopard's as yet unreleased makeover on the horizon. The overall look of Apple's operating system has long adopted the features of key Apple products being promoted at the time of their release.

Mac OS X 10.0 and 10.1 reflected the blue and bright white translucent striped plastics of the original iMac.

Mac OS X 10.2 Jaguar added a brushed metal look first used by QuickTime and then iTunes to introduce iChat and iCal, branding the new apps as virtual hardware devices along the lines of the iPod.

Mac OS X 10.3 Panther spread the metal look across the Finder and iSync and darkened the bright white Aqua interface using shades of grey to make the desktop appear more serious and professional.

Mac OS X 10.4 Tiger introduced a new "unified" appearance that toned down the metallic look of brush metal and made it the default window appearance. This move was foreshadowed by prerelease versions of Safari and iTunes.

Mac OS X 10.5 Leopard further refined the desktop with more dramatic shadowing on windows, a more subtle menu bar, and a new Dock presented in 3D perspective with reflections, as well as a new full screen 'back in time' mode for Time Machine and universe themed packaging alluding to the new backup and restore features.

Mac OS X 10.6 Snow Leopard hasn't yet revealed its hand in the user interface department yet, but Safari 4 indicates a number of shifts that may make their way from the browser to the operating system, making them available to third party applications

Aspects of Safari 4 likely to find their way into Snow Leopard

Tabs on Top: by putting tabs into the title bar, they reclaim dead space in the user interface and make organizing the tabs within the window, and busting them out as their own window, more intuitive. Among the apps that could benefit from Tabs on Top are iChat, the iWork apps, and the Finder.

In more general terms, the Tabs on Top interface also shows Apple's increasing willingness to not only adopt good ideas from elsewhere, but also to change long standing rules that govern the user interface. Recently released iWork 09 apps similarly break convention to deliver useful new features, such as the ability to take a Pages document full screen and push the background desktop, menu bar, and other permanent user interface elements out of view. This deliberate effort to step out of the windowing structure is something a number of apps could benefit from without destroying the window metaphor when returning to a multiple window environment.

This step into interface isolation was pioneered by Leopard's Time Machine and Tiger's Front Row, and will likely find other uses in Snow Leopard outside of individual apps that take over the interface in the manner of Pages 09.

Top Sites: the new user configurable, visual presentation of recently viewed web sites would also make for a great opening screen for many document-centric apps. The new iWork apps present available themes as a grid of starting points. Why not supply a visual Top Documents view as an option in the standard open file dialog as well, allowing users to pin up an array of recently used documents, integrating Spotlight search results as well with Quick Look rendered results?

Lose the Aqua: one element found in Safari 4 that is unlikely to make it to Snow Leopard is the watery blue scroll bar. Already, iTunes has dropped the Aqua bar for a flatter and more subtle grey control. Snow Leopard may even go a step further to make scroll bars disappear until the user mouses over them or scrolls up and down using a mouse wheel or multitouch trackpad gesture. This is already the case on the iPhone and Apple TV, and is becoming common in other third party user interfaces as well.

What Snow Leopard will actually look like when it ships later this year is still kept tightly under wraps.