One of the companies that I work for has asked me to create mobile versions for all of their websites, as well as their internal sales system (4 websites total).

I've done a substantial amount of mobile web development in the past under freelance contracts for other companies, but I was wondering about the methods that some of you have chosen to use when creating mobile-friendly versions of websites.

The method I've been using is as follows:

• Within my templates directory, I have two sub-directories - "desktop" and "mobile"
  
• I create a subdomain (m.example.com) for the mobile version of the website (I hate sites that automatically show mobile versions by user agent, etc.)
  
• Within my views file, I have a function that does something like this pseudo-code: if m.example.com then template_to_use = "mobile" else template_to_use = "desktop"
  
• Within each view, I then load template_to_use/template_for_this_view.html
  
• Naturally, the mobile template extends a mobile base template, and the desktop template extends a desktop base template
  

I find this to be the most versatile way to accomplish the task of creating mobile-friendly versions of websites.

However, as previously stated, I'm curious to hear how other people approach mobile web development, as well as the pros and cons that they see with their method of choice.

That sounds similar to the approach I've been using, as definitely not a fan on the media queries approach - what a waste of bandwidth when you send HTML/CSS across that doesn't get used.
As I've extended mobile sites on top of existing full site I've gone with just a "mobile" folder within the main templates folder though, rather than splitting everything into two. And then yeah, it does logic based on which domain you access from as to which template files to pull in.

Although on top if that I am doing a redirect from www.example.com to m.example.com based on the user agent. But there's a link back from the mobile site to the full one so you can still see the full site if you prefer, it just has to set a cookie so it knows not to redirect you back again!

Posted By Ross on 16th Oct 12 at 11:18pm

 

That sounds similar to the approach I've been using, as definitely not a fan on the media queries approach - what a waste of bandwidth when you send HTML/CSS across that doesn't get used.
As I've extended mobile sites on top of existing full site I've gone with just a "mobile" folder within the main templates folder though, rather than splitting everything into two. And then yeah, it does logic based on which domain you access from as to which template files to pull in.

Although on top if that I am doing a redirect from www.example.com to m.example.com based on the user agent. But there's a link back from the mobile site to the full one so you can still see the full site if you prefer, it just has to set a cookie so it knows not to redirect you back again!

I had originally been using the auto-redirect method, as well, but came across a site with a method that I much preferred. The first time you view the website, rather than auto-redirect, it simply displays a landing-page of sorts with two buttons... "Mobile Site" or "Desktop Site" ...with an option to remember the decision indefinitely (as opposed to asking at the start of each session).

The mobile site then has a link within the navigation menu to switch to the desktop version at any time (which when clicked pops up a confirm dialog asking whether or not to remember the decision to switch), while the desktop site places a link at the bottom of the page to switch to the mobile version (again, with a confirm dialog).

Personally, I've been loving how intuitive and extensive iOS' web-app capabilities are, though, but that's a different topic.

Posted By Marc on 17th Oct 12 at 2:53pm

 

I had originally been using the auto-redirect method, as well, but came across a site with a method that I much preferred. The first time you view the website, rather than auto-redirect, it simply displays a landing-page of sorts with two buttons... "Mobile Site" or "Desktop Site" ...with an option to remember the decision indefinitely (as opposed to asking at the start of each session).

The mobile site then has a link within the navigation menu to switch to the desktop version at any time (which when clicked pops up a confirm dialog asking whether or not to remember the decision to switch), while the desktop site places a link at the bottom of the page to switch to the mobile version (again, with a confirm dialog).

That sounds quite good. Unfortunately the only sites I've seen use that method have never worked properly. They do things like show the landing page and when you click either link send you to the home page - rather than the content you were after. Might try to do something like that on the next mobile site I do :-)

Posted By Ross on 19th Oct 12 at 2:36pm

 

Posted By Marc on 17th Oct 12 at 2:53pm

 

I had originally been using the auto-redirect method, as well, but came across a site with a method that I much preferred. The first time you view the website, rather than auto-redirect, it simply displays a landing-page of sorts with two buttons... "Mobile Site" or "Desktop Site" ...with an option to remember the decision indefinitely (as opposed to asking at the start of each session).

The mobile site then has a link within the navigation menu to switch to the desktop version at any time (which when clicked pops up a confirm dialog asking whether or not to remember the decision to switch), while the desktop site places a link at the bottom of the page to switch to the mobile version (again, with a confirm dialog).

That sounds quite good. Unfortunately the only sites I've seen use that method have never worked properly. They do things like show the landing page and when you click either link send you to the home page - rather than the content you were after. Might try to do something like that on the next mobile site I do :-)

That is always an annoyance, I agree. But since I had already been using the auto-redirection method, I simply changed it from triggering automatically to being triggered by clicking on the "Mobile Site" button.

Thanks you share info nice . Happy fun with *REMOVED* games online and *REMOVED* my friend.