Make Your Community iPhone Accessible
It may not be at the top of your to-do list, but as the adoption to and use of Apple's iPhone continues to increase, serving your community's user generated content to the widest possible audience will mean providing rich media that the iPhone's browser can support.
Today, the Flash plug-in which most browsers use in order to play video on the web, is not included in iPhone's Safari browser. Unfortunately, the absence of the Flash plug-in leaves the vast majority of the world's user generated rich media (videos) unsharable by and inaccessible to one of the most exciting "gadgets" to hit the marketplace in a long time. Oh, the inhumanity.
In our effort to foster the growth of social communities and strengthen the channels by which great content is shared, we now transcode all videos submitted to KickApps-powered communities both in the Flash/.flv and Quicktime/.mov formats.
The following outlines the steps required to iPhone-enable your community.
Get ‘er done:
To ensure that your community serves the .mov formatted videos to iPhone visitors and .flv to all others, copy and paste the following javascript into the <head> ... </head> of your document via the KickApps Affiliate Center (Configure > Pages > Global Page Template).
<script type="text/javascript">
function swapForIphone () {
if (navigator.userAgent.match(/iPhone/i)) {}
// swap out the player}
$('ka_playPagePlayer').innerHTML = '<embed src="http://static.kickapps.com/kickapps/images/videos/' + Ka.Info.MEDIAID + '_320x240_tmb/0003.jpg" href="http://media2.kickapps.com/videos/' + Ka.Info.MEDIAID + '.mp4" target="myself" width="420" height="338" controller="false" autoplay="false" scale="1" cache="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">';
Ka.addDOMLoadEvent(swapForIphone);
</script>
Note: As soon as you put this code on your site, videos that were transcoded after 8/22/07 will be accessible by iPhone. Videos that were transcoded before 8/22/07, however, will need to be re-transcoded in order to make them iPhone accessible. So if any of your videos were transcoded before 8/22/07, please submit a ticket in our Support area requesting that we re-transcode them.
Serving iPhone-specific CSS
If you'd like to kick your community's iPhone compatibility up another notch, you may want to consider creating a second stylesheet that caters to the iPhone's viewing environment (screen size limitations). Up until now, if a designer wanted to serve a stylesheet to a PDA, mobile phone or other handheld device, the handheld media type did the trick. Instead, the following Media Query will need to be employed:
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css"
rel="stylesheet" />
In addition, you will likely want to set the viewport to the width of your web page (width of #ka_mainContainer or outermost wrapper). The viewport width can be set by placing the following in your <head> ... </head>:
<meta name="viewport" content="width = 320" />
Note: If you would rather be a bit more democratic in your approach to serving up stylesheets, you may want to include "handheld" in your Media Query so that you include all mobile devices that support "handheld":
<link media="handheld, screen and (max-device-width: 480px)" href="mobile.css" type="text/css"
rel="stylesheet" />
Want to check out a live iPhone-accessible, KickApps-powered site? Cruise on over to www.pomsocial.com.
For more information, tips and tricks on designing and developing for the iPhone check out the following resources:
http://developer.apple.com/iphone/designingcontent.html
http://www.kudit.com/wiki/index.php/HTML
Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.