This week I wrote two articles for WPMU about using adaptive design strategies in responsive WordPress themes. The first post discussed adaptive image optimization, while the second post discussed using user agent detection to adapt layout and make other changes. These two posts only scratched the surface of the real question: how can we insure a WordPress theme has the best UX on every single device that a user might be accessing the site on.
At WordCamp Orlando this year Tomas Puig of WPEngine gave a great presentation on the rise of the “Internet of Things” that included some crazy statistics about mobile device adoption:
- To reach 80% of the current market, we must support 156 different devices.
- There will be more mobile device subscriptions then people on Earth in 2014.
- Per US household, there are 10 connected devices, 50 by 2050.
- There will be 15 billion connected devices world-wide by 2015, 40 billion by 2020.
These numbers drive home the importance of this discussion. They also help prove the point that responsive image handling alone–ie resizing to fit the grid–is insufficient. In my post I suggested using the plugins WP Smush.It and Adaptive Images to optimize images and serve device specific image sizes. I didn’t mention that Foundation does have an adaptive images solution called Interchange, because I’m not in love with my WordPress implementation of it.
In the AdvancedWP Facebook group, Rick Gregory pointed me to a twist on this idea, the Responsive Design + Server Side Components strategy or RESS, as proposed by Luke Wroblewski. He advocates server side changes to a layout based on user detection. Luke’s suggested solution for image handling is similar to Interchange, and definitely worth a look. One way or another, the days of serving big-screen, retina-ready images to low-res mobile devices need to end.
Foundation 5 adds the ability to use Interchange to handle HTML elements as well. I haven’t tried it out yet. I prefer, as a I suggested in my tutorial to use the plugin Mobble to handle conditional logic for handling layout and other changes server-side, much like the RESS strategy, with fallbacks to wp_is_mobile() if Mobble is not active. While I have no problem doing separate layouts using Mobble’s is_phone() and is_mobile() and Foundation or Bootstrap's 3 grids.Going beyond that is a slippery slope. As Tomas points out we’re designing for 156 different devices, and handling each one separately is not practical.
I’ve been slowly working on rewriting my theme _Second Foundation when times allows. In the new version I will be using Foundation’s Off Canvas component for mobile navigation, replacing both the sidebar and the topbar. I’ve never been a fan of the responsive WordPress theme norm of pushing the sidebar above or below the main content. Sidebars don’t usually have actual content in them. They are usually navigation elements, like menus and lists of posts, categories, pages etc. or ads. Sticking the sidebar in a slide-out/ off canvas sidebar is, in my opinion, better then the norm, but not great. The genius of the sidebar is that it’s designed to keep the user on the site, by hooking them with alternate content before they get to the end of the current post or lose interest in it. I don’t have a great solution for that, which is something I’ve been thinking about a lot as the bounce rates on this site are embarrassingly high.
I’m interested to know how other people handle getting in links that are aimed at user retention on sidebarless sites as well as any thoughts on adaptive design strategies for responsive WordPress themes. Please leave a comment or reach out to me on Twitter @Josh412 if you have any thoughts on these subjects.