Phrappe

ice-chilled, instant web tips

HTML5 video and mobile browsers

| Filed under markup mobile

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 drawbacks 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!

Mobile Webkit form tips

| Filed under markup mobile

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!

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 ;-)

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…

The get() method is not working! Well try eq()…

| Filed under javascript

Every now and then, I come across the very same issue, so I decided to write a post about it. Many new JS developers are struggling to find out why the below code is not working when applying jQuery’s get() method :

 

The selector is correct, and if we remove the get() method, it magically works!

The answer is pretty obvious if you check get()‘s documentation. The get() method returns a DOM object, not a jQuery one! This means that you don’t have access to jQuery’s fun methods… If you want a similar method (that returns a jQuery object) try eq(), it works the exact same way.

jQuery window.onload equivalent

| Filed under javascript

Last week a reader contact me noting that my equal heights script is not working. When I took a closer look at his code, I find out that the reason of not working correctly wasn’t my script but the way jQuery works! The normal jQuery behaviour is to run the code when the DOM is ready and won’t wait for images/graphics etc. to load. There are some cases though, that someone needs to run a piece of code after the entire page is fully loaded. You can achieve that with the code bellow :

The elements that needed equal heights contain images, so the script was miscalculating the max-height value because it wasn’t getting the correct height of the images (since they were still loading). The above code will fix that, since it will load the script when the entire window is fully loaded (including images).

Keep in mind that this is an event handler method (a shortcut for .bind('load', handler) ) and has nothing to do with the ajax load() method.

How to load styles and scripts on a WordPress theme

| Filed under wordpress

WordPress provides two useful functions to help you keep the head section on your header.php template file clean. The wp_enqueue_style will help you load your styles and the wp_enqueue_script will help you load your scripts. Both take the same parameters (name, source, dependencies, version, media – only for wp_enqueue_style – and in_footer – only for wp_enqueue_script) and the official WordPress documentation explains everything in great detail. Below I’ll demonstrate a simple way to use them, the same way it works on my latest free WordPress theme, Ambrosia.

These two functions “live” into the functions.php file. So let’s load the styles first. We only have to create an include function (for example ambrosia_load_styles()) that will load all the files using one or multiple wp_enqueue_style functions. To be more  specific, we’ll only load styles in our wordpress theme and not at the admin area (!is_admin()). Then an action hook will run the include function (ambrosia_load_styles()), just before the header.php template file is loaded. It’s simpler than it sounds, have a look at the below code.

It’s much more simple to load script files. We only include our scripts using the wp_enqueue_script function (again excluding the admin area).

Don’t forget that you can create dependencies on both CSS and javascript files, and of course load your javascript files on your footer area (after the page content is fully loaded).

Unfortunately, wp_enqueue_style and wp_enqueue_script functions don’t support any conditional comment mechanism, so if you have Internet Explorer (IE) only styles and scripts, you have to include them manually to your header.php file.

That’s all you need to know, so next time you’re building a theme, keep your header.php file clean by doing all the dirty work into the functions.php file!

Safari’s HTML5 search input

| Filed under css markup

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.

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.

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