Adapting existing web sites for iPhone/iPad

8 posts by 2 authors in: Forums > CMS Builder
Last Post: February 11, 2011   (RSS)

By gkornbluth - February 1, 2011 - edited: February 1, 2011

Hi All,

I’m sure that many of you have found solutions for converting flash movies to play on iPhones and iPads and many other tricks to keep from having to redesign entire web sites to accommodate them.

I’m hoping that this thread will start the process of sharing the questions you have and the solutions that you’ve found so that we can all benefit from your insights.

Please post any solutions that you can share along with links to any software required and the code used to implement your solutions.

Thanks,

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Adapting existing web sites for iPhone/iPad

By gkornbluth - February 1, 2011 - edited: February 1, 2011

Hi All,

My next challenge is going to be converting a pile of existing flash mastheads, page topic headings and footers so that they'll play on an Ipod/iPad.

On one of my sites I've inherited a large number of what I think are 1 frame flash mastheads, page topic headings and footers.

They've been playing fine using code like:

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','height','180','width','100%','pluginspage','http://www.macromedia.com/go/getflashplayer','src','images/masthead','wmode','transparent','quality','best','play','true','movie','images/masthead' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="180" width="100%">
<param name="movie" value="images/masthead.swf" />
<param name="quality" value="best" />
<param name="play" value="true" />
<param name="wmode" value="transparent" />
<embed height="188" pluginspage="http://www.macromedia.com/go/getflashplayer" src="images/masthead.swf" type="application/x-shockwave-flash" width="100%" wmode="transparent" quality="best" play="true"></embed>
</object></noscript>


My client would like to keep them for the iPhone/iPad, and I'm looking for a way to convert these so that I don't have to rebuild them all. (They can't afford to do that anyway)

I've attached one of each in case someone has the time to take a peek.

Thanks,

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Adapting existing web sites for iPhone/iPad

By Mikey - February 2, 2011 - edited: February 2, 2011

Flash has it's uses... but personally I can't stand it and decided two years ago I'd only use it if the client insisted and/or there simply wasn't another option to achieve the client's needs.

I've been using jQuery http://jquery.com/ since 2006 and absolutely dig what can be done with it. It takes me less time to build vs Flash and it works on iPhones, iPads and other hand-held devices. Want to see a slick animation... check out this post about an animated robot http://css-tricks.com/jquery-robot/

In addition, you can easily integrate your CMS Builder code into what you're building with jQuery. Simply paste your code into your page, mix in some css with your jQuery and you can do some cool things with little effort. You do need to have some knowledge of javascript though.

Here's a simple image rotator I posted a week ago that uses CMS Builder, CSS + jQuery. http://www.interactivetools.com/iforum/Products_C2/CMS_Builder_F35/Simple_Image_Rotator_-_CMS_Builder_%2B_jQuery_%2B_CSS_P85897/

As for getting Flash to work on an iPhone or iPad... to the best of my knowledge there's no way to make it happen, because Apple does not support Flash on these two devices. I may be wrong, or maybe some company has created a solution with some kind of file conversion... it would be interesting to find out if there is a solution to Flash on iPhones and iPads now. I spent quite a bit of time researching a solution to Flash on iPhone and iPads in Nov. 2010, but had no luck finding a solution. Post what you find out.

Re: [zick] Adapting existing web sites for iPhone/iPad

By gkornbluth - February 3, 2011 - edited: February 3, 2011

Hi all,

As I find interesting articles about site development and video conversion for mobile phones, I'll post them here.

Mobile Phone Detection Using PHP

Mobile Meta Tags

Video Conversion Parameters For Many Cell Phones

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Adapting existing web sites for iPhone/iPad

By Mikey - February 3, 2011

Hi all,

As I find interesting articles about site development for mobile phones, I'll post them here.

Mobile Phone Detection using PHP

mobile meta tags

Jerry Kornbluth


Jerry,
Here's some javascript I've used recently on a few projects. It detects iPhone users and if exist, redirects the user to a different URL or site page that supports iPhones. I then created an alternative non-flash version of my clients home page that contained a bit of Flash and redirected iPhone users towards that page.

From David Walsh Blog
http://davidwalsh.name/detect-iphone

<script language=javascript>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://thiswebsite.com/index_without_flash.php";
}
</script>

Re: [zick] Adapting existing web sites for iPhone/iPad

By gkornbluth - February 11, 2011 - edited: February 12, 2011

REPLACING FLASH WITH IMAGES WHEN A PAGE IS DISPLAYED ON A MOBILE PHONE

Here’s what I came up with to replace the flash mastheads with .png images when displayed on a mobile phone.

So far it’s working on both an iPhone, and a T-mobile Comet (Android). I’d appreciate feedback on the results with other phones and comments about any of the code.

You can access a page using this code at http://artistsofpalmbeachcounty.org

The header and footer graphics were both replaced with .png images for mobile phones only, and the slide show was implemented using CrossSlide. http://tobia.github.com/CrossSlide/

You can read more about this approach to mobile phone detection at: http://azure.ironie.org/478-php-mobile-phone-detection

Best,

Jerry Kornbluth

Here’s the code:

1) Insert this “mobile_detection” function into the body of your viewer before your first replacement is required:

<?php
function mobile_detection ()
{
if (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']))
return true;
if (isset ($_SERVER['HTTP_ACCEPT']))
{
$accept = strtolower($_SERVER['HTTP_ACCEPT']);
if (strpos($accept, 'wap') !== false)
return true;
}

if (isset ($_SERVER['HTTP_USER_AGENT']))
{
if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false)
return true;

if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false)
return true;
}

return false;
}
?>


Then, use this code where you want to replace a Flash .swf with a .png or other image. You can replace the .png image with the data from any CMSB field as well. (The Flash code was the code that was originally inserted by Dreamweaver):

<?php $_SESSION['mobile'] = mobile_detection(); ?>
<?php if (!isset ($_SESSION['mobile']) OR $_SESSION['mobile'] == true) : ?>

<img src="images/your_masthead.png" width="800" height="180" />

<?PHP else: ?>

<script type='text/javascript'>
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','height','180','width','100%','pluginspage','http://www.macromedia.com/go/getflashplayer','src','images/masthead','wmode','transparent','quality','best','play','true','movie','images/your_masthead' );
</script><noscript>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="180" width="100%">
<param name="movie" value="images/your_masthead.swf" />
<param name="quality" value="best" />
<param name="play" value="true" />
<param name="wmode" value="transparent" />
<embed height="188" pluginspage="http://www.macromedia.com/go/getflashplayer" src="images/masthead.swf" type="application/x-shockwave-flash" width="100%" wmode="transparent" quality="best" play="true"></embed>
</object></noscript>

<?PHP endif ?>

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Adapting existing web sites for iPhone/iPad

By Mikey - February 11, 2011

I've used a similar solution. Here's what I have done in the past:

I've test this solution of an iPhone and browsers. Wrap you flash in a div. Then add the WMODE parameters below to the flash object and remove background white parameters.

1. Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:
wmode="transparent"

Then add a background image in the div to load behind the flash. If flash will not play on device the image will appear, because the flash is transparent.