How to add iPhone/iPad startup images (splashscreens)

We’ve seen how you can add custom touch icons for iPhone/iPad use (if you need more information have a look at Mathias Bynens excellent article on this topic) but did you know that you can add custom start-up images (aka splash screens)? Well you can and it’s very easy, just prepare your images (for various resolutions, retina displays etc, that’s the tough part) and use the below markup to include them. A very easy way to polish your web app and impress your mobile/tablet visitors.

Mobile media capture straight to your web form

So, you’ve just build your latest responsive web design masterpiece and you’re adding the final touches for the mobile viewport. Suddenly you discover a form where the user must submit a profile image (or video or audio) in order to continue. Wouldn’t it be nice to let the user use their phone in order to take a picture (or video or audio) with it, and at the same time keep the normal fall-back of the input file element for desktop browsers? Well you can, just use the below attributes on your input fields. Desktop browsers will use them as normal file inputs, while mobile devices will add this extra native flavour.

See the Pen Mobile media capture straight to your web form by John Tsevdos (@tsevdos) on CodePen

I tested them and they work on iPhone (both on mobile Safari and mobile Chrome), but they will (probably?) work on any mobile device/browser (android/windows etc.)… Let us know in the comments or via twitter if they work for you.

Call or text from a mobile device using very simple markup

At my latest presentation (at upNorth web conferce in Greece), people were impressed with some very trivial markup that can add many points to your mobile site (and not only) with minimum effort. With the below very easy to implement markup you can make your site interact with the device in order to make phone calls and/or send sms (I only tested it with iPhone but I believe its working on other devices as well)!

See the Pen Call or text from a mobile device using very simple markup by John Tsevdos (@tsevdos) on CodePen

The above enhancements, together with a custom iOS home screen icon/image, are probably the easiest markup implementations that give to your mobile site/app many more extra points! If you’ve tested the above example with other devices (android, windows, blackberry, etc.) please confirm that it’s working (just leave a comment)…

HTML5 video and mobile browsers

The brand new HTML5 video element is surely very impressive. You’ve encoded your videos in multiple formats (well, at least .mp4 and .webm to support all browsers), you might’ve also provided Flash fall-backs and you are very proud of your good work. But what happens with the mobile users?

The majority of mobile browsers will recognize/play the HTML5 video, but the problem is not the browser support, nor the file format. The problem is the bandwidth. Your brand new HD video might take ages to download through 3G! Wouldn’t it be great if you could provide a mobile-friendly version of your video source (with smaller resolution, less fps, and much smaller file size)?

Well, you can very easily do that, with the use of some very basic media queries. The below code will serve two mobile only video sources (again an .mp4 and a .webm file) in order to support as many mobile devices as we can. Of course keep the specific video files small and optimized (otherwise there is no point in implementing this)!

See the Pen HTML5 video and mobile browsers by John Tsevdos (@tsevdos) on CodePen

Don’t waste your mobile visitors bandwidth and time. Provide smaller, mobile-friendly alternatives!

Mobile Webkit form tips

One of the things I really hate when I surf from a tablet/phone browser (usually my iPad/iPhone) is filling in forms. I know, the lack of a physical keyboard sucks big time, but it’s not just that. Most web developers out there don’t give the appropriate attention when they develop web forms, and the combination of both these things can literally destroy the good will of a user who’s trying to fill in the form. The use of some very basic attributes can change the above situation dramatically. You don’t believe me? Well have a look…

Keyboard Layout

One of the most important and easy fixes is to provide the correct keyboard layout. Well that’s super easy, just use the appropriate HTML5 input type. You’ll make many tablet/mobile users happier!

See the Pen Mobile Webkit form tips : Keyboard Layout by John Tsevdos (@tsevdos) on CodePen

Autocorrect and AutoCapitalize

OK, let’s admit it, autocorrect is a cool feature when writing an e-mail, but it’s probably the worst one when you try to write your username (and iOS is correcting it over and over again). The exact same issue is caused with the autocapitalization. Well, nothing to worry about. Just use the below attributes to turn on and off the features from the elements you want. Now you’re in control of things 😉

See the Pen Mobile Webkit form tips : Keyboard Layout by John Tsevdos (@tsevdos) on CodePen

Please try not to be lazy when you build forms, you might save a tablet/phone user’s time and sanity!

The above markup works fine on Android devices as well (and probably on Windows Phones), although I only test them on iOS iPhone/iPad devices…

How to attach a custom apple iPhone/iPad icon to your website

If you already have an iPhone, iPad or any other iOS-based device, you have definitely seen the strange bookmarking Safari option “Add to home screen“. The specific option creates an application like bookmark to your iOS screen for quicker browsing.

Clever idea and it works great, but if the site you’ve just bookmarked doesn’t have a custom iOS icon, iOS adds a poor quality screenshot of the site for icon! But don’t worry the solutions to this problem are super easy.

Just create a 57 x 57 pixels PNG (for iPhone, or 114 x 114 for iPhone 4 or 72 x 72 for iPad) with your custom icon, name it apple-touch-icon.png and put it into the root directory of your site. That’s it! You don’t even have to worry about the rounded corners of the PNG image, since iOS is clever enough to add them for you! The final URL of your icon must be something like http://www.yoursite.com/apple-touch-icon.png. If you want to supprt all iOS devices a 114 x 114 will do the job, although iPhone classic and iPad will scale it down.

Now if you don’t have access to the root directory of the site (no way!), or simply you don’t want to mess things up there, you have an alternative. Just put it wherever you like (maybe into the images/icons folder), and point to it with the below markup:

<link rel="apple-touch-icon" href="/images/mycustomiphoneicon.png" />Check out this Pen!

 

The above code must be placed in the head section of our document and it must have a link relation (rel) with the value “apple-touch-icon“, that’s the only two requirements. As you noticed we can name our PNG file as we want. Finally, yes we can use absolute paths as well, or even load our icon from other domains!

<link rel="apple-touch-icon" href="http://www.othersite.com/images/mycustomiphoneicon.png" />Check out this Pen!