I'm interested in gathering some thoughts on this project from any experienced designers/developers out there...

We're familiar with building themes for Magento.

We're familiar with building responsive websites .

We're familiar with building adaptive websites.

What we're wanting to do however, is design a completely different version of an existing Magento store (that we built) for mobiles and tablets - ideally without going down the route of building a mobile specific theme i.e responsive.

The existing site is already responsive (albeit some issues with it currently) but the site we wish to serve to mobile and tablet users needs a complete overhaul. Now I'm not talking about run of the mill responsive design like floating and clearing elements so that we stack accordingly with the occasional hidden elements. I mean we want to literally serve completely different elements based on the device being used - conditional responsive design.

So we need the ability to not load certain aspects of the site as well as load new aspects of the site for particular user agents. I don't want to do this with CSS because the server will still be loading what isn't needed and they'll essentially just be hidden from view.

I've been considering the Mobify.js library which uses client-side adaptation to alter the markup in the browser so for the end user, it appears as if this is what was served from the server in the first place. I've got no experience with this library however and not entirely sure if this would be the best approach.

Can anyone offer any feedback on this at all or recommend a decent approach for this (in Magento) that would allow us to conditionally serve content based on the user agent. The simplest way of implementing this into an existing responsive Magento website would be ideal.

I know we can just build a separate mobile and tablet theme for this but I'm trying to avoid this if possible. Thanks in advance.

 

I am not sure if this is what you mean, but I have dabbled a bit recently with using user agent detection server side to not simply redirect to an entirely different page, but just to affect certain elements in each page. It has worked quite well and with a bit of practice could be really slick. For instance using media queries via css for simple stuff as you described above but agent detection to set preferred image sizes that are generated on the fly as well as skipping areas or elements that are not functioning well on smaller devices. This has dramatically improved site performance. The user agent detection also delivers an entirely different checkout process depending on the device or screen size, solving a couple of layout problems and making every users experience as good as possible.

 

The nice thing about this mixed approach has been level of control it has given me over which elements are delivered to which devices, and for pages where it was not necessary, could just deliver the same page relying on traditional css methods.

 

Try http://detectmobilebrowsers.com/ but do not header redirect to a different domain to deliver entirely new themes. I set a flag in the session that I then use conditionally for elements I want to change or alter.

 

I hope that makes sense, and that it might help a bit,

 

Best wishes,

 

Paul.

 

PS Mobify.js looks good but I have learned to try not to rely on js libraries as they often turn up issues that suddenly can't be solved. At least with the link above it is just a simple php query although the author has spent some time making it as comprehensive as possible.

Edited December 22, 201312 yr by PaulD