Any pointers on creating a mobile version of a site?

[martinluff]

Any advice on the template setup if you want to create a mobile version of your site - e.g. at m.domain.com and assuming here I'd probably tailor a cut-down version of content in pages on the mobile site - as well as custom layout and certain tailored UI elements. Mostly here I'm thinking in terms of how to deal with the templates for the different versions of pages...

Be interested in ideas (Ryan, Adam?)

[Adam Kiss]

sssimpleee [no it ain't]q

• server settings – every subdomain goes into root directory: m.domain.com -> domain.com [or better, looks there, btu in adress bar is still m.domain.com]
  
• .htacces – rewrite HTTP_HOST m.domain.com (.*) -> domain.com/m/$1
  
• create mobile version of site
  
• optional: add agent sniffing script into mobil _templates and page field into every mobile page. in the page would be set this content's URL in desktop version and if agent sniffer finds desktop browser, redirects browser there [i.e. away from mobile version]
  

As for server settings – some hosts have configurable options for subdomains [my main host has: no subs, every sub that exist and every sub that exists and rest redirect to root].

Adam

[ryan]

Another possible approach would be to point m.domain.com to just domain.com. Then your head and foot templates (or main template if you are using that), would check $config->httpHost to see if it's at the m.domain.com, i.e.

/site/templates/head.inc

<?php
if($config->httpHost == 'm.domain.com') include('./head-mobile.inc'); 
    else include('./head-normal.inc'); 

Your head-mobile.inc would contain your mobile specific markup, stylesheet links, javascript links, etc. Likewise, your head-normal.inc would contain the same for the non-mobile version of the site.

That way you wouldn't have to do anything on a page-by-page basis, and the mobile version of the site would just happen automatically depending on the hostname. What you would have to be aware of is that any markup created in your page-specific templates should be compatible with the mobile or regular version of the site. However, I think this would often be the case even if you weren't trying to do it that way. Though if there were instances where you needed them to be different, you would just check that $config->httpHost again from inside your template.

If you are concerned about duplicate content at the m.domain.com, then using a canonical tag may be a good option to add to your head-mobile.inc:

<link rel="canonical" href="http://domain.com<?php echo $page->url; ?>" />

[Adam Kiss]

There is $config->httpHost? why I created it then [when using multiple db configs]?

[ryan]

There is $config->httpHost, but it's exactly the same thing as $_SERVER['HTTP_HOST'] except that it's been sanitized. But in this case, it wouldn't matter which one you check.

Edit: Also $config->httpHost wouldn't have worked in the database selection because it's set by the ProcessWire bootstrap class (which hasn't yet been instantiated when /site/config.php is loaded.

[martinluff]

Ryan, Adam thanks for the info/ideas! Ryan, that's the sort of approach I'd started to think about... Will have a think about both approaches and see what I come up with. Thanks again

[apeisa]

I splitted this topic and moved rwd part of it to: http://processwire.com/talk/index.php/topic,393.0.html

[jacmaes]

I'm trying to figure out how to best add a mobile version to an existing PW site and found this thread. The option that Ryan mentions in his first post seems like a great solution since it doesn't seem to require duplicating all templates, but I'm not sure I understand it fully. 

First of all, could you elaborate on your first point --"Another possible approach would be to point m.domain.com to just domain.com"? How would you achieve this? Adding a redirect in the .htaccess file, or using a session redirect in an otherwise blank bootstrapped file in the subdomain?

Then does this mean also that the subdomain is basically empty since all requests to it are forwarded to the main domain?

Thanks for clarifying this. 

[Pete]

Yep - that's what he means, the subdomain would be empty. Basically the mobile stylesheet would be called for all requests to m.domain.com instead. I suppose a .htaccess redirect could do it and point to domain.com?style=mobile to initially set the mobile stylesheet, then just store the stylesheet choice in a session variable.

It's likely that you could do something fancy enough that you could check that the original request was to m.domain.com and then pull the mobile stylesheet - that would remove the rather ugly ?style=mobile I suggested above.

[Marty Walker]

Have a look at Categorizr: http://www.brettjankord.com/2012/01/16/categorizr-a-modern-device-detection-script/

I use it to provide a mobile version but also a link to the desktop version of the site. It's really easy to use with PW.

(I see that it's creator has recently decided to stop developing it which is shame, although his reasons are clear and understandable.)

[jacmaes]

Thanks Pete and Marty. 

I've used Categorizr before, and the mobile detection and redirection is rather easy. I'm still unclear about the redirection from the subdomain to the main domain and the integration with my current (desktop-only) templates. I understand it would work this way:

1. A mobile user comes to domain.com. I detect it as a mobile user and send him or her to m.domain.com, which is an empty subdomain that somehow points to domain.com.
2. My templates on domain.com detect if the user comes from the subdomain. As Ryan points out above, I could include mobile-specific files within my current templates with the following code:

   if($config->httpHost == 'm.domain.com') ...

At this point, I'm assuming that the URLs the mobile user would see would be http://m.domain.com/page1/, http://m.domain.com/page2/, etc. as is common practice.

Am I understanding it right? If so, how would you achieve the redirection from the subdomain to the main domain so that the subdomain remains empty and I don't have to basically duplicate my templates?

[Soma]

If the subdomain points (htaccess) to your domain there's no need to do redirect. It's like an alias and in your code you can test the domain the user browser sends the request aka Ryan code.

[jacmaes]

OK, got it. Thanks Soma.