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!

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 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.

Once again I’d like to thank Kostis Vasiliadis for the amazing graphics and support

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.

• wpMail (theme releases)
• WordPress.org.cn forum
• Bloggingexperiment
• WP Themes XL
• Simple Themes
• Connect www.com
• Wopus
• Web Resources (entry no.10)

…and of course all the people who choose Ambrosia for their theme!

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!