4 Ways to Improve the Mobile Version of Your WordPress Theme

Mobile Version WordPress

Let’s face the truth, mobile devices are getting more and more popular. Desktop browsing is not growing anymore,  it’s decreasing actually, while mobile is growing fast with all those awesome smart phones and tables out there.

According to Net MarketShare, mobile devices represent 10% of the total web traffic. It’s a big figure, and it’s even bigger in some niches and countries. But the important thing here is the special attention that mobile devices require, because of the limited screen space and the fact that mobile connections are usually slower than desktop connection.

A lot of WordPress themes are responsive but you know, we’ll always have room for improvements. So here we’ll see 4 technologies and ways to use them in order to improve the mobile experience for your users.

#1 Ol’ Media Types

A few years back, when IE5.5 and IE6 were considered alive, mobile browsers were just starting to popping out (and Opera was by far the best one), and people started to realize that things were just breaking since phones back then just couldn’t process simple things like CSS (not to mention JS, flash and so on).

So, doing a completely separated mobile site was the only option when the media types came to save us. The idea was simple, you could tell the browser if the file that you are providing is “advanced” CSS rules (for desktops) or simple CSS rules (for handheld or print). The syntax is as simple as this:

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />

This can be a good option to create a completely different design for your mobile site. But you just shouldn’t use it.

Media types may sound good at first but a simple problem came with modern smart phones: the lack of browser support. Most major players out there were just ignoring this kind of functionality (like apple)
Then media queries come to save us.

#2 Media Queries and how to really improve mobile experience

This is by far the most popular way to create a mobile version of your site.

You can target certain points based on a rage of browser size, device screen size, pixel density (yeah, retina!), and even media types.

Here is a simple media query:

@media (max-width: 700px) {
	body { background: red; }
}

This is pretty much the same as programming. IF “browser width is 700 or lower”, THEN “apply the following CSS code”.

Child Theme

Let’s create a new folder in your /themes and name it twentyMobile. I know, twenty twelve already uses media queries, but we’re here to learn, aren’t we?

So, create a style.css file and add this content:

/*
	Theme Name: mobile theme
	Template: twentytwelve
*/
	@import url(“../twentytwelve/style.css”);

	@media handheld, only screen and (max-width: 767px){
		nav ul { display: none;}
		nav select {display:block}
	}

Above we created the child theme CSS and also we’ve added a rule that will target only mobile devices, that will hide the main menu and show a select. So if you have a menu in a select you could save a lot of space instead of displaying it as ul / li items

#3 Extreme makeover with jQuery Mobile

jQuery mobile is an awesome framework that uses jQuery functionality to improve mobile experience, with optimized widgets and UI elements.

The HTML needed o make it work is quite simple, it just uses the HTML data attributes to and JS to detect and create UI widgets.

But in order to make the jQuery Mobile work properly in your WordPress blog you’ll need to call the jQuery mobile script first. Getting back to our child theme, duplicate main theme’s header.php file and add these lines in the head tag:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

I should mention that for commercial proposes you should use wp_enqueue _script, so you’ll avoid duplicating libraries in your site.
Now we can play around with pretty much any UI element you want. jQuery mobile has a lot of UI widgets that you can use in a theme, but let’s apply the page and collapsible panels.
This is the basic HTML syntax:

<div data-role=“page”>
    <div data-role=“header”></div>
    <div data-role=“content”></div>
    <div data-role=“footer”></div>
</div>

With this code you’ll create a new “page” and the header, content and footer areas. The header and footer are fixed, and the content will change based on current page, so you can load multiple pages once and just hide them by assigning different IDs.
This is the basic HTML for collapsible panels:

<div data-role=“collapsible-set”>
    <div data-role=“collapsible-set” data-collapsed=“true”>
        <p>Collapsible area content</p>
    </div>
</div>

It’s quite simple to implement a loop there, isn’t it? Well, your code will look like this:

<div data-role="collapsible-set">
    <? while ( have_posts() ){
        ...
    ?>
        <div data-role="collapsible" data-collapsed="true"></div>

    <?
        ...
    }
?>
</div>

The select menu revised

With the code we’ve seen above (in the media queries section) you could hide your usual menu and show a special select menu. jQuery allows you to add it without much PHP code (to be honest we won’t need PHP at all). Let’s create a new file and add this code there:

jQuery(function($){
    //when the DOM is ready
    $(document).ready(function(){
        // let’s create the select element
        $("<select />").appendTo("nav");
        //With the new option, go to…
            $("<option/>", {
                "value" : "",
                "text" : "Go to…"
            }).appendTo("nav select");
    });

    //Now we have the select created let’s populate it:
    $("nav .menu a").each(function(){
        // for each LINK you find in the menu
        var aux = $(this);
        $("<option />",
        {
            "value" : aux.attr("href"),
            "html" : aux.text();
        }).appendTo("nav select"); // append a new item to the select
    )};

    //then we set the dropdown functionality to redirect when we select a new item
    $("nav select").change(function(){
        window.location = $(this).find("option: selected").val();
    });

});

Doing this will create a new mobile menu, BUT the problem is, we’re loading jquery mobile even in the “normal” version of the site. That’s why we can use also a few plugins to help us improving our site.

#4 – Wrapping everything up with Mobile Detector

This awesome plugin creates a new functionality that allows us to conditionally load themes depending on user device. And it works with simple conditional rules, like this:

<?php
    if(MobileDTS::is(‘android’)){
        ....
    } elseif(MobileDTS::is(‘mobile’)){
        ....
    } else {
    }
?>

The MobileDTS method checks current device then returns a simple true / false. Then we can use a magic function called switch_theme( ) to set a new theme, and you can use plugin conditionals like MobileDTS::is_switcher_enabled() to create a link to a desktop version when using mobile, for instance.

Conclusion

So, have you ever used mobile plugins or functions in your WordPress theme? Which method do you prefer? Don’t be shy and share your thoughts!