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!

__

Related posts:

  1. 11 Myths About Flash That Won’t Die
  2. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3
  3. Introducing Type & Grids and My Thoughts on the Future of Flash, HTML5 and Responsive Design
  4. Introducing Typewolf
  5. Simple Sanity-Saving Tip for All Timeline-Based Flash Projects

57 Responses to “7 Tips to Make Your Flash Site iPhone and iPad Friendly”


  1. 1 Mark

    Thanks! I’m building a mobile version of my site and this is just what I needed.

  2. 2 Zachstronaut

    8. Rewrite your site in JavaScript.

  3. 3 Ed

    Are people able to successfully identify UserAgent with iPhone/iPad? Haven’t done a site w/ flash in ages, but actually have a project in the planning phase with Flash as a general want, but an unavailing at an event in which they’re giving away an iPad. Be a bummer if the site poops out right.

  4. 4 Simone fresh

    i realy like this nice article. greetz simone

  5. 5 Michael

    Hi, thanks for the mobile update. For [link removed] (made wiht Cedar) I took just the browser switch to link to the little iPhone site I made beforehand.

    Just out of curiosity, how do the 320px images behave on the iPhone 4? Half or full screen?

  6. 6 Emad

    Great Tip; Works like a Charm! :)

  7. 7 ark

    Hi, is there a way to serve/show a static image instead of flash, to iPad/iPhone users?
    I would not like making a proper mobile version, it’s just for the home page of the website, the rest is html, so it works fine also on those devices.

  8. 8 Hasan Ertop

    Say I have 2 files:
    file.mp4 for iphone/ipad
    file.flv for desktop viewing
    How can I place these 2 files on the same web page so that files will be viewed based on device detection.
    That is if device is iphone file.mp4 will be loaded or device is a desktop file.flv will be loaded.

  9. 9 Whit

    Second that last question! I’m looking for a solution to this right now.

  10. 10 Eric

    @ark I just did this exact thing for a client who has a simple Flash movie on his home page, but nowhere else. I created a folder called “mobile” and put a duplicate version of the home page in it, with a static photo in place of the Flash (the movie is eye candy only; no content). I then used the redirect script shown at the top of this post.

    If your home page doesn’t change very frequently, this approach works just fine. Wouldn’t be a good idea for pages that are frequently updated though, as you’ll have to maintain both versions.

  11. 11 Scott

    Thanks for posting this. Perfect for the project I’m working on right now… and you posted on my birthday no less!

  12. 12 Scott

    @Hasan and @Whit… I’m no expert on this but have found that vimeo.com is a good resource for exactly what you’re looking to do. You’ve got a lot of player options with vimeo plus (it is a pay service though) and can do just about as much customization as you’d like. It will also allow you to use multiple formats and if it encounters a browser that supports HTML5, it’ll use the MP4 but will otherwise use your FLV.

    I know I’m extremely late to this conversation so you’ve probably solved all your problems already but I hope that helps.

  13. 13 Jonah

    Thanks!!!!!!
    That Helped Alot!!!

  14. 14 Zoran Djuric

    Hi there!

    Good thips, and I will try to using while building mine portfolio.

  15. 15 anisha

    Hi,

    I have no knowledge or experience coding sites. I just built a site on wix.com but i want to add the basic content for iphone/ipod/ipad users to see when they go on my site. I don’t even need to create a non-flash version of my website- just going to direct them elsewhere. How do I add the basic content page? I’m a bit confused :/ what code do i add?

    thanks

  16. 16 Lorin Yeater

    You saved my sorry white ass. Thank you!

  17. 17 David Hubbs

    Hi and Thanks,

    I think possible to have the JavaScript direct iphones and ipods to one site and ipad to another site (to take advantage of the ipad higher resolution), but is it possible to have the JavaScript send iphone 4 users to still another site to take advantage of the iphone 4 higher resolution?

    I liked the tips very much

  18. 18 Migs

    can anybody help me i’ve used this template it works great Offline. but once i’ve upload them via my site it does not work. it has a black screen & my images are popping up.

  19. 19 Nekait Arora

    Good article
    Trying to implement the techniques in my Bidding and Business Development

    Thanks

    Nekait
    Soft Prodigy

  20. 20 michele

    Thanks I’ve been looking for this for days!

  21. 21 Robert Pataki

    Brilliant article, thanks!

    I built my very first mobile website for a band just right after the Flash version was finished a couple of weeks ago.

    I didn’t even know about your blog though. I am glad I did 6 out of the 7 points well :D

    Keep up the good stuff.

    Rob

  22. 22 Michael

    I found this on that give a pretty easy script to handle the no swf detect example.

    http://www.ajaxera.com/ipad-replace-flash-with-image-javascript-example/

    Also they have an ipad website example.

    http://www.ajaxera.com/ipad-website-example/

  23. 23 Mediaville

    great post and much appreciated!
    As a multimedia producer I’m rather keen to work on flash, but much worried about the “iDevice” popularity. Hoping apple eventualy agreed with Adobe on this…

  24. 24 Hh

    Hi, Anisha asked about this question back in December but I don’t see an answer for it. Can someone answer it? I’m doing the same thing she is, using wix to build my flash website but how do I get a plain content page for those mobile users? Is there a way to do that?
    thank you.

  25. 25 Scott

    @Hh – I’m not tremendously experienced with wix but the little I do have says that you can take the entire page code and put it into your own HTML… that would give you the flexibility to put the mobile redirect code inside the tag, no problem. Are you saying wix is hosting for you? So you don’t have access to the source files at all? If that’s the case, I wonder if maybe your only option is to send the redirect code to wix and ask them to place in the header for you. Hope that helps!

  26. 26 Jesse

    Your a lifesaver! I’ve been torn by this issue for sometime now. Thanks again!!

  27. 27 steven

    just what I was looking for, great info thx ! While iphone & ipad users are growing in numbers its better to be prepared and compatible…

    bigup for posting this ;)

  28. 28 Josh N (BoostVT)

    I was searching HIGH and LOW for a max-width/max-height solution for IE that would was conditional for my mobile page.

    Had to create my own.

    I found many that would reduce both the width & height… but then my images were skewed. So I used some conditional JS elements. You can put this in your CSS to handle IE that will check to see if the height is larger than the width before it resizes the image (and vica-versa).

    width: expression(this.width > 800 && this.width > this.height ? “800px” : true);
    height: expression(this.height > 600 && this.height > this.width ? “600px” : true);

    Hope that helps someone!

  29. 29 Matt Chenot

    Thanks so much! This is an great resource.

  30. 30 Chris P (WhipsBook)

    You’re right Matt!,this is a great resource and Jeremiah did a nice job on the explanation. Although I do have one question on the CSS. Does that go between the “style” tags?
    Also, I use a Motorola Razr V3xx on the AT&T “Pay as You Go” plan so obviously I’m behind in the current technology and everybody I know has the Adnroid Phones so I was wondering if somebody could view my page and see if I did the code correctly. At the top of the page you should see a yellow sports car and the word Welcome to the right of it. Which brings up another question.
    My top banner is, Width 801 x height 179. Does safari resize the images to fit the screen?
    TIA, Chris

  31. 31 Digidi

    HI..If I was just brushing up on my ‘skills’ would it be advisable to take a Flash class or a CSS/HTML5 class? I know a bit of both already…and am a digital multimedia artist. I need to spruce up my portfolio on my websites..and develop some interactivity and make some money at it.

  32. 32 Pav

    Great post! I’m in the process of making my mobile site so this is just what I needed :)

  33. 33 Lydia

    Hi! What if it’s a shopping site, and my shopping cart system is all written in flash;
    if i create a html version will my shopping cart be able to work for html viewers still?

  34. 34 Y8

    Unfortunately Job’s is at logger heads with adobe and thus the twists and turns. The industry had proved before that it in not completely dependent upon one innovator am sure the standards will change once it passes through an antitrust suit.

  35. 35 Brian

    love this script having problems with android phone any ideas?
    Is there a make-your-flash-site-android-friendly out there?

  36. 36 Sztatty

    Hi

    I use almost the same technique at my SEO-ed flash site, check it out: http://flashseowebdesign.hu/en/

    What I do here is providing an alternative html site which has the same content that flash uses. What is the biggest difference is that I manage deep-linking too.

  37. 37 McVirn Etienne

    Hello, I have a flash site I built from a template but I’m by no means a “techie.”
    I was just wondering is there anything I can do by just adding some code or an app or something to my existing website that would automatically make it ipad/iphone friendly?

  38. 38 ActionScript

    Sehr schönes Tutorial ;)

  39. 39 Jezmondo

    Been looking for this for a long time, absolutely spot on and worked a charm thank you.

    Jezmondo

  40. 40 Elise

    Thank you, I too have been looking for this for a while and most tips
    are awkwardly written. This is clear and elegant. Many thanks again

  41. 41 Bev Knight

    I have been all over the internet reseaching this very problem and this info is the first that has giving me hope. I just got an iPhone last Friday and now see first hand why this is a REAL problem for me.

    Is this solution something that my website provider Z57 can do for me? I am not tech savvy enough to understand it. I neede help fast. I AM LOSING BUSINESS BECAUSE OF Z57 NOT STAYING ON TOP OF THIS. I see my competitors’ sites work perfectly fine on my iPhone.

    I proposed this problem to Z57 last week begging for a solution and they emailed me back my same question as a stupid explanation. They responded by saying, “The devices are not compatible with flash, it has nothing to do with the Z57 website. It is a program that is downloaded onto the apple computers. But they do not have them on the ipad or iphone. Most websites use flash. Sorry for the inconvenience.” DAHHHHH! That is what I TOLD THEM and ASKED THEM to FIX!

    My question is DO I HAVE TO SWITCH FROM Z57 (who I have had my site with for about 8 years now) TO ANOTHER PROVIDER WHO CAN RESOLVE THE FLASH-TO-IPHONE+IPAD PROBLEM!? I am a realtor and my website is http://www.OceanEstateProperties.com. Can someone advise what I shouod do?

    Thank you,
    Bev

  42. 42 Geraldine

    Thank you this information is just what I needed, I better get to it!

  43. 43 Jason Kepner

    Awesome post!!! I just did this to my fully flash site to add alternate html pages and will be adding the mobile version soon. Check it out http://www.ishineorlando.com
    I’m pretty good with this so I can probably answer any questions.

  44. 44 Inge

    Quick question. Where do I put the code which appears on i phones because they do not have flash (Adobe Flash Player is required…) because I want to ad visit a non-flash version…
    And I only want it to come up if viewing from i phones or i pads. Is it the index.html file on my site.

    I have made a html version in dreamweaver of my flash site, not quite as wizzy but more mobile friendly. And I only want people with ipads or iphones to see it.

    Inge

  45. 45 Alberto

    Thank you, this was really helpful!!
    But What if I want to make the iPhone mobile version work on Android devices too?

  46. 46 Ian

    Really useful thanks allot I just used Tip 3) to redirect iPhone, iPad, iPod users to a different home page with a static image on instead of my Flash video slider which is on my normal home page and my bounce rate from these devices has gone right down now :) Very happy!

  47. 47 Bradbury

    I am a simpleton with web design. Can someone give me a way to make my flash slideshow viewable on the iPhone. http://Www.theisleofwightpaper.co.uk I would really appreciate the help!

  48. 48 Tiffany

    Thank you so much…this worked like a charm for the Ipad/Iphone but I need a charm like this for android phones…please help.

  49. 49 Dave

    For it to work for Android phones too just take this great tidbit of code and make it look this:

    if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘Android’) != -1) ||
    (navigator.userAgent.indexOf(‘iPad’) != -1)) {
    document.location = “mobile/”;
    }

  50. 50 developer

    Apple’s app store submissions process is now markably faster recently. Those developers submitting lately would have noticed the difference. This is good news for everyone who is creating a mobile app portfolio.

  51. 51 Diane

    A really quick & easy solution that I tried (and it worked great!) is to just create a table (1 row; 1 col) the exact same width as your flash file. Choose an image and make it the background image for your table. Insert flash file into table.

    Now when you see the website on a PC – the flash will show. When you see it on an Apple product, the image will show. No codes, scripts, java, etc. needed.

  52. 52 Ian

    Was starting to get a bounce rate on Android devices this year as they’ve stopped supporting Flash as well now in their newer versions, so thanks Dave for pointing out we can use the same bit of code that we use for iPhones but just change it to Android instead to re-direct them too :)

    || (navigator.userAgent.indexOf(‘Android’) != -1)

  53. 53 Dan

    That’s great! Additional question: for users without Flash installed, is there a way to take directly to a html version website without the page with the link to adobe or a link to the website?

  1. 1 Tweets that mention Make Your Flash Site iPhone and iPad Friendly | Warm Forest Flash Blog -- Topsy.com
  2. 2 Make Flash Sites iPhone & iPad Friendly | Brightscape Blog
  3. 3 Introducing Type & Grids and My Thoughts on the Future of Flash, HTML5 and Responsive Design | Warm Forest Flash Blog
  4. 4 Preparing Your Flash Website for Mobile

Leave a Reply