If all you care is a super-simple solution that gets the job done, I recommend that you use tinySrc in its basic configuration. tinySrc does a lot of legwork for you and the resulting images are in 90% of the cases or more just great. Check out the tinySrc home and you already have all you need.

So why mix tinySrc with a JavaScript?

At mobilism I met Scott Jehl for the first time and he mentioned working on a JavaScript that would take care of providing the right images based on client-side detection. It sounded quite interesting to me because most of the times, in order to create a decent responsive design, you have to create all the media files in advance.

I started looking at his Responsive Images library and liked the idea. We exchanged a few messages and it seemed easy enough. What it does not do is what I know is very often the real issue: generate the images. So it taps into the power of the client-side detection to understand what the browser and device can do, but then relies on media files generated in advance. In Filament’s online demo you can see that Scott generated 2 images, small and big and that’s all you get. Of course you can extend the JavaScript to manage more sizes, but every time you add a format you will have to edit your JavaScript. This is a good start, but not exactly what I was looking for.

I also thought about WordPress Mobile Pack and users that are on simple hosting plans or maybe don’t have the time and skills to generate all the images in the right formats. tinySrc seemed a perfect match.

How it works

The changes I made to Scott’s JavaScript and Rewrite rules are very limited, but I think they open the door to some substantial benefits. The JavaScript now reads the available width and height of the screen and passes those values to tinySrc so that an image of the perfect size will be generated (I padded the image of 20px for safety). You still need to have a small image (for fallback purposes) and a full-size image so that tinySrc has a high resolution image to work from (of course the bigger the better).

See it in action.

Why use it?

If you want to apply responsive design you must create the correct media files for each target device or family. This little script allows you to do that with near-zero effort. If you want to support device families tinySrc supports that, but you will have to change the JavaScript. What’s not to love?

Why NOT use it?

The JavaScript works so that it parses your HTML and replaces all image URLs with a dummy URL on your Apache server (at the time of writing the script requires Apache, nginx in the works). When the client requests that URL your Apache server will redirect the client to tinySrc. This is at least 1 HTTP request for every image that we might avoid. tinySrc on its own already does a great job, so this really is a step further toward responsive design. The only one that knows which approach is best is probably you.

What next?

I am looking at a couple more improvements, one idea is to use tinySrc’s dataURI API call and use that to replace all image URLs. That should save all the requests to your Apache server that are then redirected to tinySrc. Depending on how many images you have this might or might not make a difference. The problem is browser support, I am looking for some data. If you have any, please contact me.

The source code

If you like what you saw you can get the code on github.

All this is great, but what about mobile devices?

Well, if your visitor is using a device with a good browser such as Mobile Safari (iOS devices), Android, WebOS and Nokia’s Symbian devices all should be good, but what about all the others? I am not talking about WML phones that are today a rarity more than anything, I am talking about all those low and mid-end devices that sell like hot-cakes. Think about all the Samsung, Sony Ericsson, LG and (reasonably-priced) Nokia that people get for free from their operator, or buy for about 50-100 Euro. It is true that heavy users will likely buy a high-end device with a big screen and a good browser, but that does not mean we should suddenly forget the long-tail.

With this in mind, and knowing the WordPress Mobile Pack (WPMP for short), I made a few small changes to Yoast’s script. The theory is very simple, based on the device groups defined by WPMP provide the standard JavaScript for the high-end and  use the Google’s official ga.php file for the rest. The changes are quite simple and are all applied to googleanalytics.php, plus you will need Google’s ga.php. Also, this system plays on the safe side as if the device is not correctly recognised, in the worst case the 1px image is server, which means that it should really work with anything, even the WML devices.

REQUIREMENTS

• WordPress Mobile Pack version 1.2.3 or higher
• Google Analytics for WordPress by Yoast
• Download the script adaptation based on Google Analytics for WordPress 4.0.8, a.k.a Google Analytics for WordPress for Mobile

INSTALLATION

1. Both WPMP and Google Analytics plugins should be enabled and correctly functioning (of course!)
2. Make sure in the “Mobile Theme” menu you have enabled the Nokia templates (this is needed to activate the device group recognition)
3. Save a backup copy of your existing googleanalytics.php
4. Upload the files ga.php and googleanalytics.php in your google-analytics-for-wordpress directory on your server (normally in wp-content/plugins/google-analytics-for-wordpress)

KNOWN LIMITATIONS

Although in theory the custom segmentation is implemented, it is a bit of a hack and needs review with Yoast.

UPDATE

Small bug fixed, see Google Analytics for WordPress for Mobile update.

Configuring WordPress Mobile Pack

Configuring the WordPress Mobile Pack with W3 Total Cache 0.9 and above is a breeze, in fact, you have to do nothing! Just to make sure things are enabled, go to the “User Agent Groups Settings” section of the W3 Total Cache settings, make sure there are two groups enabled (high and low) and leave the default settings. Save. Clear Cache. If you have “Preview mode” enabled, deploy. That’s it.

How fast will this be?

W3 Total Cache generates nice cache files for the mobile version and then uses Apache to serve the files, this means that it will be AS FAST AS IT CAN BE! Enjoy speed and low resources consumption with full mobile support.

Now all that’s left to do is write something interesting

After using Blogger for more than 5 years and after developing WordPress plugins and sites for others, I thought it was time for me to jump on board. A lot of people are leaving WordPress, focusing on Twitter, or using new tools like Posterous and Tumblr. I like to be old school sometimes, and I like this blog and the history it holds.

So welcome to the same old thing.

This was true until today. With the WordPress Mobile Pack version 1.2.1 you now can get the best of both worlds. Here is a quick guide on how to achieve it. I am assuming you have installed the latest version of WP Super Cache, already.

1. Activate WP Super Cache
2. Go to the WP Super Cache options
In your admin -> Settings -> WP Super Cache
3. Turn WP Super Cache ON and mobile support

4. Click on Update Status
5. Scroll down and click on Update Mod_Rewrite Rules

6. Make sure WPMP is active
Go to Plugins -> Installed and activate WPMP if not yet active
7. Enjoy speed and mobile content at the same time!


Notes for the geeks
Setting up WordPress this way will generate some extra cache files because you will have a cached version for your desktop versions and up to 3 versions of your mobile site depending on the devices that visit your site. Don’t worry about this too much as Super Cache will clean up old files anyway and if most of your visitors are in the same device class you will not get the other cache files generated.
The integration works in a way that WPMP gives to Super Cache a new key to cache files, so that desktop and mobile pages are separate. Super Cache will be only partial (i.e. like the HALF ON setting) for your mobile content, but and send static HTML files for desktop (i.e. the ON setting). This is currently the best we can get, but soon it might be different, so stay tuned.

In the meantime, do not despair, you CAN get W3 Total Cache to work with the WordPress Mobile Pack and with other mobile plugins. If you know about mobile user-agents, the solution is to add keywords to the list of rejected user-agent strings. This will stop the cache to work completely on mobile, but at least it will produce content that is mobile friendly and all your PC visitors will still get the cached content. If you need a step-by-step manual, here is a very good one with images and examples, Blog Building: How to Configure W3 Total Cache to Work with WPtouch for WordPress.

For now, this is the best you can do. Stay tuned for more updates.

WP Super Cache is the best known cache plugin, if not the most famous plugin of all. Initially it did not play well with admins that also wanted a mobile presence and it is very simple to explain, the whole purpose of the cache is to generate the file dynamically once, store it and then serve it again without any further computation. As the years went by, mobile became more important and WP Super Cache integrated a basic mobile support. Recently donncha introduced a fundamental new feature, the ability for other plugins to define actions. I will not go into the details of how this works and what you can do, you can read all of it on the WordPress site.

The addition of actions is great for us, because we can finally determine how WP Super Cache detects mobile devices and we can extend it. As a matter of fact, this is what I just did and you can see the changeset in SVN. Expect a release very soon and all you will have to do is simply install the WordPress Mobile Pack. Once you will have installed the WPMP you don’t even need to enable the switch for mobile in WP Super Cache as the WPMP integrates with it automatically. With this combination you will get the WP Super Cache to work as usual for normal browsers and robots (including the Super Cache mode*) and then with the standard WP-Cache implementation for mobile. All this works just fine even enabling the cool Nokia extensions that we have released a couple of months ago.

Go enjoy WordPress with mobile support at lightning speed (UPDATE: we have released a new version of WPMP, read how to configure it at Go mobile with WP Super Cache and the Mobile Pack).

* Note: in order to use the full Super Cache and mobile you will still have to use the rewrite rules for mobile

Don’t forget to check out the WordPress Mobile Pack, of course!

I don’t know if it was this one that was particularly good, but there are so many positive things that I’ve experienced at this event, that I strongly recommend you to go as soon as you can. You have gone already? Then go again!

If you don’t know what happens in a WordCamp, then here’s a quick list of things you can expect. To start off, it’s not a conference for geeks only, it’s about blogging and writing good content to publish on Internet. I admit you will likely meet a bunch of geeks, but you will also meet a lot of “normal people” that are passionate about Internet and want to get their ideas online. The general attire is very relaxed and equally the socialization is very easy going.

I have been to a number of conferences and this was easily one of the best and I’m saying so because I have a long list of things I have learnt and things I’ve heard and that now I was to learn better. This is probably the best outcome that you can get from a conference.

Small disclaimer: I was one of the speaker and not surprisingly I was talking about mobile, but for once, not to mobile nerds. Presentation coming to the Internet very soon.