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.
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)…
Mobile Safari is probably the best browser solution for iOS devices. The browser offers many advanced features and some eye-candy form elements to interact with. These eye-candy form elements already have some default webkit-only styles and can make your life a bit harder if you want to style them differently. Anyway, cutting a long story short, if you don’t want input elements to have rounded corners, just use the CSS rule shown below:
See the Pen Remove rounded corners from input elements on mobile webkit browsers by John Tsevdos (@tsevdos) on CodePen
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!