Developing Web Content for Safari

Safari is a full-featured Web browser for Mac OS and iOS. You don't need to add any Safari-specific tweaks to make your website work with Safari or to make your website work on iOS-based devices. If you design your website using W3C standards for HTML, CSS, and JavaScript, and don't rely on third-party plug-ins, users can view and interact with your website using Safari on all supported platforms.

Making websites work with Safari is just a first step, however. It should be your goal to optimize websites to create the best experience for all users, including people using Safari on handheld devices with touch screens. Use CSS to change the layout of your website in portrait or landscape modes, for example; add touch and gesture support; animate changes in CSS properties for Safari users, and so on.

At a Glance

There are three main areas to focus on when creating web content for Safari:

Making It Work

Safari has an array of built-in tools for quickly spotting incompatibilities and debugging problems. If you have a website up and running, and are getting complaints that the site doesn't work with Safari, it is usually because of one of the following problems:

Use the Error Console to immediately identify and locate any unsupported HTML, CSS, or JavaScript, making it easy to correct.

There are Safari-compatible media formats and embedding techniques for every job. Safari supports audio media in AAC, MP3, AIFF, and WAVE formats on all platforms. Safari supports video media encoded using H.264 compression, commonly used in MPEG-4 format, on all platforms. Handheld devices support a somewhat more limited set of MPEG-4 profiles than desktop devices.

Safari on the desktop supports plug-ins. There are Safari-compatible versions of all common plug-ins, including QuickTime, Flash, and SilverLight. Safari on iOS does not support plug-ins. To make your website accessible using handheld devices, do not rely on plug-ins to display content. Use the HTML5 <audio> and <video> tags to embed audio and video files in supported formats, with fallback to a plug-in for older browsers on the desktop. Use CSS or Canvas to embed animation and create special effects.

Enhancing the User Experience

Enhance the user's experience by providing different page layouts for handheld and desktop devices using simple CSS and JavaScript detection and CSS layout. You can also detect portrait and landscape orientation on handheld devices and automatically switch between layouts using elegant CSS and JavaScript syntax.

It's easy to add touch and gesture support by adding a few event handlers to your site. Make navigation easier for touchscreen users by making links large enough to reliably hit with a finger, and by surrounding links with enough whitespace to avoid accidentally hitting the wrong link. Leave a blank gutter or border on the page as well, so the user can easily scroll the screen with a finger without touching a link.

iOS-specific enhancements can turn your website into a web app that behaves like a native iOS app. Optimize websites for iOS by providing an icon for the user's home screen, by making your website into a fullscreen web app, and by including links that dial a phone number, open the Maps app, or open other built-in iOS apps.

Use caching and client-side storage to make your website work even when the user is offline or the user’s device loses network connectivity. Safari supports HTML5 client-side storage and caching, “lazy” caching for offline reading, and techniques for allowing web-based games to work offline.

How to Use This Document

You can read this document from start to finish, or you can jump to a specific chapter to accomplish a task.

If you are creating a new website and plan to support Safari and iOS devices, read the rest of the chapters in order.

If you are modifying an existing website to work with Safari, read “Creating Compatible Web Content.”

If you are showcasing an app on your website, read “Promoting Apps with Smart App Banners.”

If you are using video on your website, read “Creating Video.”

Prerequisites

You need a solid understanding of HTML, familiarity with JavaScript, and a basic understanding of CSS in order to make the best use of this document.

See Also