jPrefetch jQuery plugin

I just released jPrefetch a nice little jQuery plugin that makes HTML5 prefetching a bit easier. You can very easily use it for your current solution (static website or even CMS), just by including it and adding data-prefetch="true" to the link that you want to prefetch. You can also pass a url (string) in order to start prefetching the provided url, in case you are loading a page that doesn’t have any link with the data-prefetch attribute. jPrefetch will take care all the rest, and start adding the necessary markup (metatags) in order to allow prefetching in supported browsers (tested in Chrome and Firefox). As you can see, the use of this is very easy and elegant. The plugin was mainly inspired by these two excellent articles, Mastering HTML5 Prefetching and Prefetching with HTML 5 and jQuery.

Feel free to fork it, use it, whatever ūüėČ

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.

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.

How to style placeholder text

The placeholder attribute is one of the most useful HTML5 attributes, because with just a tiny attribute you provide a better user experience to the end user, you make your code more semantic and all of this is achieved without writing a single line of javascript. But this super easy and time saving attribute is a bit difficult to style. The typical input styles don’t apply to our placeholder! No worries though, in webkit-based and gecko-based browsers you can apply the below rules and style your placeholders.

See the Pen How to style placeholder text by John Tsevdos (@tsevdos) on CodePen

Note 1: Don’t try to combine the selectors because it won’t work! If a browser doesn’t understand a selector it invalids all the following rules and this will always be true in our case, since webkit-based browsers won’t understand the :-moz-placeholder selector while the gecko-based brosers won’t understand the ::-webkit-input-placeholder!

See the Pen How to style placeholder text by John Tsevdos (@tsevdos) on CodePen

Note 2: For some reason the placeholder attribute inherits all the input stytles (ex. color, background etc.) in gecko-based browsers (tested in Firefox 14). If you encounter this problem just make your selector more specific.

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

Responsive media (images and videos) using only CSS

There’s no reason to explain everything from scratch, there are plenty of posts on this topic, but if you are building a responsive layout, don‚Äôt forget to apply these media rules to your CSS file.

See the Pen Responsive media (images and videos) using only CSS by John Tsevdos (@tsevdos) on CodePen

With the above styling rules we ensure that all of our media files (images and videos) are ready for responsive layouts. The first two rules are very easy to understand and probably the safest and simplest way to publish media online (since we are talking about pure HTML5 elements). The final two rules are for¬†embedded¬†media¬†(objects,¬†embeds¬†and iframes), that we simply wrap into a container/wrapper element (with a class of video). I first read of this¬†technique on a post entitled “CSS: Elastic Videos” and personally I believe that it’s the best solution for responsive video embeds. I’m usually against¬†Javascript solutions/alternatives, like for example¬†FitVids.JS, since it’s a pure presentational (CSS) issue and not a¬†functional (Javascript)¬†one.

So if you’re building a responsive layout, try treating your media with the pure CSS approach. It‚Äôs the fastest, simplest and cleanest way to achieve responsive media

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…

Safari’s HTML5 search input

The safest and easiest way to upgrade your markup to HTML5 is to use the new form input types. They will appear as ordinary text inputs on older browsers, and at the same time they’ll save you tons of work on form validation, and as a bonus they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). This blog theme uses a search input to search the site.

<input id="s" name="s" type="search" />Check out this Pen!

It works great, but unfortunately, Safari‚Äôs default search input generates a close button (x) into the input field (while you type). Supposedly this will help the users to view recent search keywords, but if they they decide that they don’t need help, they can just click it and remove everything from list and the input field. I didn’t need this in-browser style for my search input, so after an investigation, I discovered the below¬†solution.

input[type="search"] {
  -webkit-appearance: textfield;
}Check out this Pen!

This rule will transform your search input (with the strange close button) into a typical text field input that you can style properly.