Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: ipad

  1. Disable preloading on HTML5 Videos

    1 Comment

    We’re currently building a small mobile web application for a client and they want to run videos for desktop and pad versions of the site, however they have chosen to leave this off the mobile versions.

    The site is being built responsively, which means that the same code/content will be used for every device and everything will be served on the same URL.

    Hiding content from a mobile device is something which I recommend against because you are making an assumption that the mobile user is not able or does not want to watch/view the content because they’re on a mobile device. With mobile devices being used on the bus, on the couch and out and about it is difficult to say when it is suitable to show/hide certain content. If you are considering doing something like this I would urge you to question whether or not the content is suitable at all (i.e. there is no mobile context).

    What I believe vs what the client wants

    Obviously two different things and for better or worse the video is going to be hidden.

    Unfortunately a lot of the current browsers do a lot of prefetching of resources. This means that images and video that are set to display: none; will still be downloaded and therefore a burden to the “mobile user”.

    So how do we provide a suitable experience for both types of users without discriminating against either one.

    preload

    The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. It gets even better than that, you can chose how much preloading is done with the options auto, metadata, and none.

    • ‘auto’: Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users’ bandwidth. This is why the value is called ‘auto’ and not something more final like ‘true’.
    • ‘metadata’: Load only the meta data of the video, which includes information like the duration and dimensions of the video.
    • ‘none’: Don’t preload any of the video data. This will wait until the user clicks play to begin downloading.

    In this case I’ve gone with loading the metadata of the video, small enough not to worry the mobile devices but enough to provide the larger devices more information about the content.

    <video preload="metadata" ....>

  2. Stop Mobile Safari from Zooming when rotating device

    Leave a Comment

    When ever you are testing responsive design sites across multiple devices you need rotate the device. Sometimes doing this means that you’re layout/design is zoomed in more than the normal size.

    To get around this just include the following in the head.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    simple….

  3. Developing iPad web applications

    5 Comments

    I’ve been testing a few things over the past week around bringing the experience of an iPad application and delivering it through a web app rather than a native app.

    The application was a simple one. It is basically an online ordering system specifically designed for that iPad to allow a particular sales force to visit their clients and show them through their product range.

    Usually I would be recommending that the website should be made responsive to allow anyone using an iPad to have this kind of experience, however for many many reasons that lie well away from the technology capabilities the client wanted to keep these two resources separate.

    There are a few things that go a long way towards making your web page looking more like a web application, but these are probably the easiest and quickest wins (if you follow the syntax of course)

    All of these updates need to be made in the <head> </head> section of your html.

    iPad Web App Icon

    When you click “Add to home screen” from Safari the iPad will drop a miniature screen shot of your web app by default. You can impress all your friends by including the following line which allows you to specify the image that will appear….

    <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

    You don’t need to add the rounded corners or the shine, that’s automatically done by the iPad.

    Safari Full screen on iPad

    With the release of IOS5 Apple have introduced tab browsing into Safari on the iPad. While this is great when you’ve got lots of windows it detracts from your new web app and provides some distractions for the user.

    Add the following code to make the iPad web application go full screen.

    <meta name="apple-mobile-web-app-capable" content="yes" >

    You should note that even with this added you will need to open your app using the Home Screen icon that we included just before. It’s also worth noting that any links to other pages within your app will open safari in full screen, so you will need to house the whole app on the same page and pull through other content through Ajax…. but that’s for another post.

    iPad Status bar appearance

    Now that you’ve gone full screen with your iPad web app you can decide the color of the Apple status bar.

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    There isn’t a lot you can do here as there are only 3 choices.

    1. default
    2. black
    3. black-translucent

    iPad web app startup image

    Finally we get to the startup image. This little sucker caused me no end of trouble even though the answer is relatively simple.

    The start up image is a great way to show the user that your application is loading, and distracts them incase that is taking a while. It’s something that is required in all native apple applications, so any web app looks lost without it.


    <!-- iPad Portrait 768x1004 -->
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="spash-1004.png" />

    <!-- iPad Landscape 1024x748 -->
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="spash-1024.png" />

    Now to save yourself a LOT of trouble please take note…

    • Portrait: 768x1004
    • Landscape: 1024x748

    This took me a while because both my images were the full dimension (1024x 768).

    Again….. Portrait is 1004px and Landscape is 748px

    Thanks to this article from Miniapps for finally getting me on the right track there.

    What else

    I’m glad you asked.

    There is are a lot of other things you can do with the web application. I’ve already mentioned ensuring that the iPad web app works entirely within the home page, so you need to ajax the other content as the user moves through the app.

    You can include a cache-manifest file to ensure that the application is available offline as well.

    iScroll is a great javascript plugin that provides quasi native scrolling functions within the application. As of IOS5 you can use the following code in your css..


    position:fixed; // header and footer fixed position
    overflow: scroll; // scrolling navigation from off the page
    -webkit-overflow-scrolling: touch; // Native iPad scrolling with CSS instead of iScroll

    I’ve gone back to iScroll because there is a bug with the webkit overflow scrolling with the content disappearing until the scroll momentum has stopped. If you set it to “auto” instead of “touch” it works, but you’re left with a very rigid scroll experience (and it’s just a bit pants).

    If you would like to look into anything else you can do on the iPad with web applications (or iPhones, Androids, Galaxy Tablets or any other mobile device) please feel free to get it touch and ask.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter