iPhone formatted site

Discussion in 'Web Design and Development' started by jakeacc, Jul 27, 2008.

  1. jakeacc macrumors regular

    Joined:
    Jan 28, 2008
    #1
    I've been searching the web and this message board for an answer, but couldnt find one.

    I have a portfolio site that has a bunch of quicktimes. Unfortunately, they are h.264 and do not play on the iPhone. I would like to create another section of my site that is for iPhone users. Anyone know of a javascript that I can put on my index.html page that figures out whether the viewer is accessing the page from an iPhone, and if so, directs them to the .../iPhone directory on my server?

    I am also looking for a template that will be in the proper dimensions for the iPhone. The site will just be some text and a MP4 file.
     
  2. tri3limited macrumors 6502

    Joined:
    Jun 5, 2008
    Location:
    London
    #2
    you should use the reference file option in mov's to target specific download speeds.

    my mov file looks at 3 files
    if its on EDGE then it oads Edge.3gp
    if its on WiFi it loads WiFi.m4v
    and if its on a pc it loads full.mov

    This way you have yourself covered. In terms of size though the iPhone will automatically adjust to the correct size as long as its in the right dimensions (16:9 i think)

    Get a copy of MakeRefMovie off the Apple Developers site
     
  3. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #3
    That might be a problem. If someone is on their laptop connected to a slow WiFi connection, I don't want them to watch the 3G.mov

    Also, I need the layout to be different.

    This is what my regular site looks like:
    http://www.spinningblade.com

    That entire page actually loads perfectly on an iPhone and looks decent, but when a user clicks on any of the thumbnails, it opens up a window with an 480x360 H.264 quicktime. (on the iPhone, it just shows the Quicktime logo with a question mark)

    For the IPHONE site, i would like the user to be able type in the exact same URL, but be directed to a different page that only has one video, and bigger type.

    When I type in amazon.com on my iPhone, it somehow knows that im viewing the page on a iPhone and loads an alternate amazon home page.

    Anyone know how they do that?
     
  4. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #5
    Yes, I'm pretty sure it will play h.264 files that you sync to your iPhone's hard drive, but I don't think it can play them via a website.

    Try my site: www.spinningblade.com/reel.html
    The videos are saved as the default .mov format and compressed in h.264. I just get the Play symbol with an X over it where the movie window is. I think i can only read .mp4's from a website, no?
     
  5. TuffLuffJimmy macrumors G3

    TuffLuffJimmy

    Joined:
    Apr 6, 2007
    Location:
    Portland, OR
    #6
    I think it has more to do with the wrapper the video is in as the iPhone does support h.264 even when viewing the videos on the web.
     
  6. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #7
    Okay, getting the right file format to play isnt the real problem.

    What I'm really trying to figure out is how to re-direct the user to an iPhone formatted page. I have a feeling that its something simple as a Javascript code that can figure out whether the browser is on a computer or a iPhone. (detects the mobile iPhone safari browser?)
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    It's a simple thing, especially if you Google.
     
  8. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #9
    Thanks for the link. I put the following Javascript in the header of my index.html page, but nothing happens:

    <script language=javascript>
    <!--
    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone')!=-1);
    if (is_iphone) { location.replace("iphone.html"); }
    -->
    </script>

    All I want is for the browser to be redirected to the iphone.html page. Any idea where I went wrong?

    Also, I'm still having problems creating a file format that is playable on the iPhone. For videos that I've converted and are currently on my iPhones hard drive, I used Quicktime Pro and exported the movie as "Export Quicktime for iPhone". They all play perfectly on my iPhone. I did the same process for another video and uploaded it to my site. When I type in that video URL path on my iPhone browser, it doesnt play it.
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    Visit your site with an iPhone and use this javascript so you can see what the actual user agent being reported is:

    HTML:
    <script language=javascript>
    <!--
    var agent=navigator.userAgent.toLowerCase();
    document.write(agent);
    -->
    </script>
    
    Then adjust your original code as necessary. BTW, I'd change "if (is_iphone)" to "if (is_iphone) >= 0" in the original code because technically indexOf returns position starting at 0 or -1 if false, and if iPhone was found in position 0 it would fail since 0 = false. Looking at the real world user agent the code would work anyone since iPhone is at position 13 anyway so I'm just sayin'.

    My research shows this is the most common user agent to expect:

    Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)

    BTW, ultimately you should not rely on a client side scripting language like javascript to do the detection and redirection. Do this via server side scripting in a language your server supports because some people disable JavaScript and they'll slip through. Not to mention accessibility issues.

    For Linux shell or Server Side Inlcudes (SSI)
    For PHP

    -jim
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    I think the issue may be that third line. Try what I have here.

    PHP:
    <script type="text/javascript" language="javascript">
    //<!--
    var agent=navigator.userAgent.toLowerCase();
    var 
    is_iphone = ((agent.indexOf('iphone')!=-1);
    if (
    is_iphone) { location.href "iphone.html"; }
    //-->
    </script>
    I'm not exactly sure where your files are though. The above code assumes that iphone.html is in the current directory as the page being viewed.
     
  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
    It's valid syntax in JavaScript, but for this situation:

    [FONT=arial, helvitica]I didn't question that because maybe the OP wanted that behavior for a specific purpose in context to his site layout and context. The original code used here which came from another example site anyway seems flawed and a little non-standard. I recommend to the OP to not spend much time debugging that JavaScript and simply use the server side methods which clearly make more sense in this situation.

    -jim
    [/FONT]
     
  12. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #13
    On my root directory, I have two HTML files: index.html and iPhone.html. I want all regular users to go to index.html, and iPhone users to be redirected to iPhone.html

    The only thing in iPhone.html is a video file:
    http://spinningblade.com/iphone.html

    The video doesn't play, but thats a separate issue.

    I'm using Javascript because thats what most of the guides I've read online use. And you can't disable Javascript on an iPhone so it will work 100% of the time for iPhone users. And people who visit the site on a computer shouldn't be affected regardless of whether they disable Javascript or not.

    I'll try modifying the code based on your suggestions.
     
  13. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #14
    Well, I just realized that you CAN disable Javascript on the iPhone. (never noticed that option in Settings)

    Ironically, i HAD javascript disabled. So there is a chance that I did have the right code that would have worked if javascript was turned on. I'll have to try it when I get home.
     
  14. jakeacc thread starter macrumors regular

    Joined:
    Jan 28, 2008
    #15
    Alright, I got the page to redirect to iphone.html. I've also figured out how to properly encode QTs so that they can play in iPhone's Safari browser. (export them as Quicktime MOV with MPEG-4 compresion)

    I've got the page to resize/scale properly to fill the iPhone screen. It's looking good...

    Update: I've figured out how to hide the Address Bar too. Now its looking like a slick Web App! =)

    If any of you have an iPhone near you, please visit the site: www.spinningblade.com

    Let me know if everything works okay and if you have any suggestions on improving the interface. The function of the site is just to showcase my work to potential employers and clients. 99% of the time, they will be looking at my site from a computer. (as it was intended) But I have my website URL on several sites and ALL of my emails. If someone happens to click on my email signature from their iPhone browser, having this iPhone formatted site (while limiting) is better than having a non-functioning site. Plus, it's cool to have my friends check out. =P

    Thanks to everyone who has helped out.
     
  15. darcness macrumors newbie

    Joined:
    Aug 30, 2008
    #16
    changing iPhone's user agent

    Speaking of Iphone interacting with web pages, some sites like applicationmanager.gov refuse access to Safari users. Additionally, as far as I know, Iphone refuses to allow alternate browsers to be installed.

    So could the Iphone's user agent string be modified to imitate Firefox, IE, or Opera? If so, how?

    Thanks in advance.
     
  16. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #17
    Only since ya mentioned that, a thought came to mind -- you might consider the iPhone Developer Program and write an iPhone app and distribute through the app store. Cross marketed with your web site, you could make some cool cash and increase hits. No need to reply on this point, just tossin' this out there, welcome to 2008 where anything is possible! But as to your web page and iphone thanks for posting, others I am sure are inspired now to create web apps for iPhones. Great job.

    As to your question about user agents and the iPhone -- I looked at alot of sites and it seems the user agent string is compiled from the OS, the firmware and Safari in the new phones so it's not a simple matter of changing a string in a config setting. This is a common question and the only answer I've seen so far is "not without hacking the internal firmware".

    Maybe in the future this FireFox emulation for wireless devices (page sometimes renders badly) (which might become an iPhone app in the future) could be adapted, and as we know ForeFox has plugins and one of the popular ones allows custom user agent switching and creation. Until then (no ETA sorry) ----- not a clue!

    Unrelated, I also found something cool you might try next time when designing your layout -- it's called iPhoney which shows you how any web page will look on a simulated iPhone. Pretty darned cool!!!!!!!

    -jim
     

Share This Page