Automatic mobile theme switching?

Zanza · 2011-07-26 16:49:54

In the future it’ll become common, I think, switch from desktop to mobile theme by default, via autodetect mechanism.

WP has this via plugins/extensions (like wptouch)

This way you can have a desktop theme, and use another mobile theme at the same time. In your mobile device you can also opt for the desktop theme.

Is something like this possibile, with TXP way of working, or it needs too heavy changes? I know that you can do that by tweaking your desktop theme/templates. But I dream of a desktop theme and a mobile theme that can be indipendent, and a simple way to serve the appropriate one to the client.

I suspect the changes are not trivial, though, but it may worth it in the long run. Or if anyone has an idea of how to do this right now…

jakob · 2011-07-26 17:07:57

There’s been a similar thread in the German area of the forum. There are some plugins already available for detecting mobile browsers and serving different content:

but one of the most interesting options is to use css3 media queries. The less framework provides an excellent example of how that works. Resize your window on that page to see it in action. There are js/jquery libraries to provide similar functionality for browsers that don’t yet support that.

These are all for front-end templates…

jakob · 2011-07-26 17:14:34

on the back-end side there is TXP Mobile and an iphone app of sorts and there was this thread too…

Destry · 2011-07-26 17:52:49

Responsive design, as Jakob was alluding to with media queries, is certainly the way I’ve started approaching design—using the mobile first perspective—but it’s not the only way, I realize.

Ed. New Txp templates (front-side, anyway) are going the response direction (as signs seem to indicate, anyway).

Last edited by Destry (2011-07-26 17:58:51)

Zanza · 2011-07-26 19:53:23

Yes, thank you all, it’s true that responsive design is surely an option, from a design point of view is nice and I’m already exploring it.

What I’m looking for is a different thing for different scenarios. What if you have a design that is working well and you don’t want/don’t have resources to work on? Then the wptouch-like approach is the best solution. Without doing nothing, you could install a completely independent mobile design, that is working on its own, without changing the desktop design.

Also, when working on a new site I could guess that a responsive design could be longer to work on. More than this, when you’re on a mobile design, in some circumstances you may want to switch back to the destktop design (if you’re on an iPhone and have a capable browser and don’t mind to zoom in&out; also, if you’re not keen to understand a new, even if simpler, design). Responsive design is not working, then.

Plugins are good, but it’s tricky to mantain a combined, nested template inside some conditional tag of another.

Ideally, I’m thinking of a thing like this:

TXP (index.php page before parsing templates?) is checking both of user preferences (if any) and desktop/mobile browser capabilities;
Based on that test, if desktop browser, then go on using the usual template.
If mobile AND user prefs are not telling he prefers desktop version, then use another template/set of templates.

OR

If mobile AND user prefs are not telling he prefers desktop version, then go to another url, where pages are using different templates.

I don’t really know if one of those are even technically doable without touching desktop templates.

Responsive design is nice, but I fear it could become like css-switching. Sort of a fashion, that won’t find a real usage but as a proof-of-concept. Also, I feel that designing for a scenario is better than a universal design that itself adapts to multiple scenarios, but that you can’t control well or you can’t really optimize. I’ve seen this “fail” in accessibility and css-switching. Well, maybe not really fail, but it’s not offering first class experience, and have had few practical (or optimal) usage in mainstream sites. Sometimes for good reasons (even if advocate for a11y and css).

philwareham · 2011-07-28 19:03:30

If you’re referring to the admin side, the plan (at the moment) is to design from the ground up a new HTML structure that is flexible enough to allow for easy manipulation via media queries and CSS down to a small screen size. It’s then up to individual admin theme creators as to whether they design a theme that is responsive or not – I don’t think dictating what content can or can’t be served to a certain device via scripting or suchlike is the right way to go.

As for the front side – the proposed new theme is responsive and based on Less Framework 4. Again, since this is a default and has to cater to all (and will probably be erased or built upon by the user in favour of their own theme) it’s not going to have any scripting to control what content is served to what device.

Of course there are plenty of resources as mentioned by Jakob that cater for that kind of system within Textpattern if a user wants to go down that route themselves.

Personally I think auto detecting devices and serving different templates is a totally backwards step – media queries used well can be much more beneficial and it’s more future proof too.

philwareham · 2011-07-28 19:08:32

Also, if you grab the latest source of an admin theme I’ve been knocking about recently on Github, it’s got the preliminary stages of a reduced feature set version controlled via media queries for mobile devices.

It’s slightly hampered by the TXP4 admin structure so I’ve had to be a little over creative with the CSS, but it shows the concept can work.

Last edited by philwareham (2011-07-28 19:08:55)

Zanza · 2011-07-28 19:41:26

Good to know the news on the admin side. As I said, though, the problem I have is on the front side. The new default theme is not addessing this, no matter how responsive it’ll be (I hope a lot, for the record :) ), because I have some sites that already have a design, and those designs are working fine, so no reason for clients to put money into redesigning theme for responsiveness. The ideal solution for existing and estabilished sites (and also to allow anyone to use an existing non-responsive theme…) would be to use a mobile theme alongside the already existing desktop theme.

I suspect this is a farly common scenario for sites developed more than a year ago. Maybe clients are not yet awaking and crying for a mobile theme right now. But what to do when they’ll do, and you’ll have to explain them that you have to redesign the front theme, and they’ll turn to the wp site(s) out there that have the very same designs they used to, and just put up a simple mobile theme in minutes? I’m not talking of big clients, but small ones that are on budget.

So, really, I’m trying to anticipate this. Nothing urgent. Just want to know in what kind of situation we are and where we could hope to go in the near future. A plug to add mobile capabilities without touching existing templates would be dream until we “responsivize” the web!

Last edited by Zanza (2011-07-28 19:43:38)

philwareham · 2011-07-28 20:03:07

I think adi_mobile can achieve the results you want (probably the other plugins jakob mentioned could too), although that does involve you creating mobile page/form templates too.

From my (albeit brief) glance at the wptouch site it basically provides browser auto detection and a basic theme framework – that’s certainly possible with textpattern as long as someone wants to write a generic theme for mobile. It’s then just a matter of adding if/else tags in your original theme. Or am I missing something clever that it does?

stephan · 2011-07-28 20:03:52

This is exactly the reason I chose to port Yoko from Wordpress to TXP, I do not think having a mobile only version is a very 2011-ish solution. The problem is that you have no site branding whatsoever and all TXP powered sites would look the same on all mobile devices (cannot tell one site from another). I would assume that any reasonable client would want a design that is also available on a mobile device, potentially less full featured.

My feeling is that you would need to develop a mobile version as well as a desktop version of your site and that is probably a lot more effort than doing it the modern way with media queries and responsive site layouts.

Since you mentioned in your initial post what you expect for the future (branching of designs based on the device) I would beg to differ and place my bet on smart layouts that adopt to various devices rather than designing for different distribution forms (think of TV browsers alongside mobile, would you want to layout for them as well? Should the Blackberry 8000 see the same as an iPad 2? This would get very complex!).

philwareham · 2011-07-28 20:37:03

@stephan

Totally read my mind there. Having said that, I totally understand zanza’s point of view – it just that it’s not something I’d consider as future a core feature (even the wptouch app is an add-on for wordpress not a core feature – and wp users are more likely to be running off the shelf themes, where this would be a better fit, than txp users).

Zanza · 2011-07-28 21:15:35

philwareham wrote:

From my (albeit brief) glance at the wptouch site it basically provides browser auto detection and a basic theme framework – that’s certainly possible with textpattern as long as someone wants to write a generic theme for mobile. It’s then just a matter of adding if/else tags in your original theme.

That’s exactly what I want to avoid: touching existing (page) templates. :)

Or am I missing something clever that it does?

Sorry, maybe I haven’t been able to explain myself really well. wp-touch serves to mobile browsers a totally different version than the desktop theme. If you visit that site with desktop browser, you see the usual theme. Even a theme developed when there only was wml. But if you visit the site with an android or iphone, you see a generic mobile theme.

From their site:

The plugin doesn’t glue together RSS feeds, or use a proxy server to modify your site’s look— It creates a full-fledged theme, completely separate from your desktop theme that offers most of WordPress’ native features, & works with other plugins, too.

The benefit for the site is that it hasn’t to invest in redesigning its theme, or to alter it to incorporate media queries, html /css brand new frameworks and all.

I was unsure if I had to post this in this forum or in a plugin request. But the problem is: as txp stands, I can’t imagine a way for a plugin developer to develop an wp-touch equivalent. So I thought it could be better discussing this from an architectural point of view, involving how txp is processing things.

All plugin you all pointed to, need to insert tag inside page templates. That involves reworking existing templates. This is error-prone and time-consuming, especially if your theme is not so bloggish and has many cases/plugin, etc.

What I’m struggling for is a plug-and-play solution that can live without touching existing templates. This is quite difficult to think, starting from how txp is working. So I thought it may be worthing to discuss it here. I agree that a plugin should do that. But how to do this without rethinking how txp process things?

Maybe it’s simply too difficult/not worthy at all. Just wanna be sure.

Textpattern CMS

Textpattern CMS support forum

#1 2011-07-26 16:49:54

Automatic mobile theme switching?

#2 2011-07-26 17:07:57

Re: Automatic mobile theme switching?

#3 2011-07-26 17:14:34

Re: Automatic mobile theme switching?

#4 2011-07-26 17:52:49

Re: Automatic mobile theme switching?

#5 2011-07-26 19:53:23

Re: Automatic mobile theme switching?

#6 2011-07-28 19:03:30

Re: Automatic mobile theme switching?

#7 2011-07-28 19:08:32

Re: Automatic mobile theme switching?

#8 2011-07-28 19:41:26

Re: Automatic mobile theme switching?

#9 2011-07-28 20:03:07

Re: Automatic mobile theme switching?

#10 2011-07-28 20:03:52

Re: Automatic mobile theme switching?

#11 2011-07-28 20:37:03

Re: Automatic mobile theme switching?

#12 2011-07-28 21:15:35

Re: Automatic mobile theme switching?

Board footer