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.
But don’t worry, the
base tag can save us from this hard task, and help up recreate the online page locally within two simple steps.
- Copy and paste the markup from the online page in a local file (.html)
- Use the
basetag to link all the dependencies/resources (you must place it into the
headsection of the page) to that html file
You’ll end up with a fully functional web-page that uses exactly all the online resources. Now you can either start adding your code to it, or simply download specific files that need re-factoring. Easy and clean, don’t you think?
list attribute. That’s it! You’re semantically correct, HTML5 autocomplete input is ready!
One of the most interesting, but not widely known features of HTML5 is prefetching. By using it you can start loading pages (or even files) before the user requests them. This can increase your site’s speed and the user’s experience! Did I mention that it’s super easy to implement it? Just put the below code into the head section of your page:
For prefetching a specific file use the same code by pointing directly to the file.
The above feature works only on Firefox. If you want to use it in Chrome as well you have to use the “prerender” attribute as well:
Browsers that don’t support prefecthing will simply ignore it (Safari and IE) but sooner or later they will implement it, so you have no reason not to use it asap! Please try not to prefetch everything, it’s wrong! For more details regarding this neat HTML5 feature have a look at Mastering HTML5 Prefetching, an excellent resource on the topic.
The hidden attribute, as you can easily guess, hides the element that it is set on. It acts almost identical to style
See the Pen Not so popular HTML5 attributes : hidden attribute by John Tsevdos (@tsevdos) on CodePen
Do you have downloadable content in your website (like PDF files etc)? If yes then with a little HTML5 attribute you can provide better semantics to the link element, give a better description/title to your file and enforce the browser to download it! Just use the download attribute followed by a string that represents the description/title of your download. Even if your filename is a timestamp or a temp name, the user will download the file, having as its name the title you used.
See the Pen Not so popular HTML5 attributes : download attribute by John Tsevdos (@tsevdos) on CodePen
Finally with the autofocus attribute you can autofocus any
button you want. Simple as that.
See the Pen Not so popular HTML5 attributes : autofocus attribute by John Tsevdos (@tsevdos) on CodePen
To conclude, whenever possible, try to use the new HTML5 attributes. They will always be more semantically correct and it’s super easy to implement them. Also, most of them have very simple fallbacks but even if you don’t provide any, most of the time you won’t break something, so you don’t have any excuse.
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.
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.
Many people believe that Internet Explorer (especially 7 and 8) cannot render correctly responsive web sites. Well the truth is that IE sucks big time (especially versions previous to 9), although the above statement is partially true. With a tiny bit of effort you can make your responsive web site play nicely with IE as well. Let me tell you how.
The first thing you must do in any case (this tip is not only for responsive web design), is to make sure that IE is using the latest rendering engine it supports. We can do this very simply by including the below metatag. Finally, if the user has Google Frame (does anyone have it?) we tell IE to use that rendering engine.
Easy so far, the next major problem is that IE8 and below doesn’t recognise HTML5 elements. Again you can include either html5shiv or modernizr to fix this. Html5shiv is smaller in filesize and does the job but Modernizr can help you detect browser features (and not only that), the choice is yours.
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)…
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)!
Don’t waste your mobile visitors bandwidth and time. Provide smaller, mobile-friendly alternatives!