Developing Web Content for Safari
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:
Make sure your website is compatible with Safari.
Enhance the user experience in Safari, particularly on mobile devices.
Make the best use of dynamically changing network bandwidth when delivering audio and video.
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:
The site uses Internet Explorer extensions that other browsers don't support.
The site includes media compressed in a format that Safari doesn't support.
The site relies on plug-ins to handle audio, video, or animation.
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
<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
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.”
Safari Web Inspector Guide—How to use Safari’s built-in tools for debugging and optimization.
Safari HTML5 Audio and Video Guide—How to embed audio and video without using plug-ins, or by using a plug-in as a fallback.
Safari HTML5 Canvas Guide—How to add sophisticated animation and interactive games to a website without using plug-ins.
Safari CSS Visual Effects Guide—How to enhance websites using WebKit extensions for masks, gradients, reflections, CSS animation, and 3D transformations.
Safari Client-Side Storage and Offline Applications Programming Guide—How to create websites that work when the user is offline, or that contain HTML5 client-side databases.
HTTP Live Streaming Overview—How to optimize network bandwidth for streaming audio and video from a standard web server.
Safari HTML Reference—HTML elements and attributes supported in Safari.
Safari CSS Reference—CSS properties and classes supported in Safari.
Safari DOM Additions Reference—Events and other DOM additions supported in Safari.