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.

Base tag : Learn how to use it

Every now and then a friend/colleague of mine asks me to have a look at his latest masterpiece (aka site). In many cases the second request is to have a look at why a specific client side feature is not working. Most of the time, I’m given a URL of the live version of the site that uses many internal and external resources (css files, javascript files etc). As you can imagine, it’s super time-consuming to recreate the online page locally to start working on it (downloading and linking all these files).

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.

  1. Copy and paste the markup from the online page in a local file (.html)
  2. Use the base tag to link all the dependencies/resources (you must place it into the head section of the page) to that html file

See the Pen Base tag : Learn how to use it by John Tsevdos (@tsevdos) on CodePen

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?

Autocompletion with HTML5 datalists

We have all used (and most of us built) an autocomplete input element. There are thousands of plugins/widgets out there, although below I’m demonstrating the easiest, most semantic and HTML5 way to build it without using Javascript! Just put a normal input element and connect it with the new datalist element by using the list attribute. That’s it! You’re semantically correct, HTML5 autocomplete input is ready!

See the Pen Autocompletion with HTML5 datalists by John Tsevdos (@tsevdos) on CodePen

HTML5 Prefetching

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:

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

For prefetching a specific file use the same code by pointing directly to the file.

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

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:

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

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.

Not so popular HTML5 attributes

HTML5 offers many new attributes that make our lives easier and our code more semantic. In many cases they even provide functionality that we used to implement with javascript, like the placeholder attribute. I’m pretty sure you all know the placeholder attribute, but what about the following ones?

hidden attribute

The hidden attribute, as you can easily guess, hides the element that it is set on. It acts almost identical to style { display: none; }, but it’s simpler, cleaner and more semantic (since you are hiding the element directly on DOM rather than style). It is also ridiculously easy to make a fallback on browsers that do not support the specific attribute, just hide it in your styles ( { display: none; } ) or javascript…

See the Pen Not so popular HTML5 attributes : hidden attribute by John Tsevdos (@tsevdos) on CodePen

download attribute

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

autofocus attribute

Finally with the autofocus attribute you can autofocus any input, textarea or 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.

How to style a file input element in Firefox

Working on a recent project I found out the hard way that Firefox doesn’t allow you to style a file input element the way you want. I’m using Chrome for surfing and development, which let’s you style a file input field without any constraints so I was a bit frustrated when I checked my form in Firefox! With a quick search I discovered that Firefox doesn’t let you do too much with the file input element. I also discovered some workarounds, but most of them were too complicated for the simple effect I wanted to achieve (to place a background image in the file input field). With a little help from stackoverflow and no javascript at all, I managed to make it work in Firefox as well as other browsers (see code below).

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

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.

Responsive web design and how to be nice to IE

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.

See the Pen Responsive web design and how to be nice to IE by John Tsevdos (@tsevdos) on CodePen

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.

Finally you can make IE understand media queries (a very important part of responsive web design) with the excellent Javascript polyfill Respond.js. That’s it, you’ve made it! With these very simple steps we can be nice to IE and make it treat right our responsive web sites.

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!