Tag Archive for 'accessibility'

7 Tips to Make Your Flash Site iPhone and iPad Friendly

Everyone seems to be talking about how the iPhone and iPad don’t support Flash but I haven’t seen much discussion on what to actually do about it if you have a Flash site. Flash might not be coming to the iPhone anytime soon but there are actually simple things you can do to make any Flash site iPhone/iPad/iPod touch compatible, as well as work on any mobile device and be accessible to users without Flash installed. Every Flash site should attempt to make all content accessible to all users but sadly most sites don’t do this.

» Download all the source code and examples here

To begin, download the above zip file which contains a full Flash site that is completely iPhone/iPad/iPod touch/mobile friendly. It also contains all code samples shown below, including all HTML, CSS, and JavaScript for a fully functional mobile site. Feel free to use the mobile site as a template for your own site.

Here are 7 tips to make your Flash site iPhone friendly and accessible to all users on all devices:

1) Use SWFObject and actually make use of the alternate content feature

The first thing you’ll need to do is use SWFObject to embed your Flash site into your HTML page. Most Flash developers are already doing this but the important thing to do here is to make sure you take advantage of SWFObject’s capability to display alternate content to users without Flash installed. Unfortunately a lot of Flash sites using SWFObject fail to provide anything useful as far as alternate content. Below is an example of how a lot of Flash sites look to users without Flash:

Alternate content
Not very helpful to users on mobile devices.

At the very least you should include some basic content from the site like contact info and relevant links in addition to having a link to download the latest version of Flash. Below is how my personal portfolio site appears to a user without the Flash plugin:

No Flash
Users without Flash installed see this.

The most important thing to note above is the link to the non-Flash version of my site which I’ll go over below. Open up “index.html” in the download to see how all of this is setup.

Alternate content
What my Flash portfolio looks like to users with Flash.

2) Develop a simplified HTML version of your site for iPhone/iPad/iPod touch/mobile users

A sample mobile site HTML template is included in the above zip file in the folders “Sycamore” > “mobile”. When developing a mobile site the important thing is to keep the site simple using basic HTML and a one column layout. This is to ensure it will be completely accessible to all users and viewable on all devices including mobile devices besides iPhones. I prefer to keep everything on one page if possible since scrolling on the iPhone is more enjoyable than clicking. I also like to size my images 320 pixels wide which looks perfect on the iPhone’s screen. This is how the mobile version of my site looks:

My Flash portfolio on the iPhone
Note how the 320 pixel wide image fills the screen nicely.

It’s also a good idea to create a subdomain on your web server named “m” which stands for mobile. That way your mobile site address can be “m.yourdomain.com” which seems to be the standard way of doing things these days.

My Flash portfolio on the iPhone
Notice the “m” in my URL.

3) Use JavaScript to detect iPhones, iPads and iPod touches and automatically forward them to the mobile version of your site

Use this simple bit of code to seamlessly send iPhone, iPad and iPod touch users straight to your mobile site – it should be placed in the header of your “index.html” page:

  1. <script type="text/javascript">
  2.  if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
  3.   document.location = "mobile/";
  4.  }
  5. </script>

Using this code ensures the alternate content you created with SWFObject in step #1 is skipped entirely on iPhones. There is nothing more annoying for iPhone users than getting a “Please upgrade your Flash Player” message.

4) Set the viewport to be the width of the iPhone

This bit of code goes in the header of your mobile site HTML page:

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

It sets the width of the page to be the same width as the viewport of the device viewing it. This ensures that on the iPhone the site is sized correctly and already “zoomed in” and matches the iPhone’s screen size perfectly.

5) Make the iPhone stop from resizing text on rotation

If the iPhone is rotated, by default Safari will increase the text size on the page. This is handy if the text size is too small to begin with but if you are using a large enough font size this isn’t necessary. In fact, it can increase the size so much that it really messes up your layout and looks bad. I find 14px to be a good, legible font size for the iPhone’s screen. It’s plenty big enough to read on either orientation of the iPhone so I prefer to turn that feature off by using the CSS code below:

  1. html, body, p, div, h1, h2, h3, h4, h5, h6 {
  2.  margin: 0;
  3.  padding: 0;
  4.  -webkit-text-size-adjust: none;
  5. }

6) Create an iPhone home screen icon

In the download you’ll notice there is an image in the “mobile” folder called “iphone_icon_57x57.png”. This is basically a fav icon that the iPhone uses. If a user adds a link to your site from their home screen this is the icon that shows up. To change this image you’ll want to create a PNG sized 57×57. You don’t need to create any rounded corners or the shine effect – those are added automatically by the iPhone. If you don’t create a custom icon, the iPhone automatically takes a small screenshot of your page and uses that for the icon.

Here is the code you’ll need to insert in the header of your mobile site HTML page to make the iPhone use your custom icon:

  1. <link rel="apple-touch-icon" href="iphone_icon_57x57.png" />

7) Use Helvetica!

All iPhones and iPads already have the font Helvetica installed on them so it makes a great choice for your font family in the CSS for your mobile site.

  1. body {
  2.  font-family: Helvetica, Arial, sans-serif;
  3.  font-size: 14px;
  4.  color: #333333;
  5.  background-color: #f5f9ed;
  6. }

Helvetica
No more Arial!

Once again, all code samples above are included in the download. I hope you find these tips useful – if so it would be nice if you could share this on Twitter, Digg, etc. If you know of any other tips for making Flash sites accessible on iPhones and other mobile devices please leave them in the comments below. Thanks!

__