vForums Support Banner


Visit Base Classics - Gaming Chairs

 

Welcome Guest! Please Login or Register
vForums Support :: Programming & Coding :: Programming Discussion :: Best Method for Mobile Website? - View Topic
Topic Rating: *****
Printable View
Marc
vChat Developer
*****
I <3 Rossy

Posts: 3,388
Status: Offline
Gender: Male
Location: Ontario, Canada
Age: 32
Joined:  

Additional Groups:
Coding Team
***


Reputation: 40%  


pmwww
Best Method for Mobile Website? (16th Oct 12 at 5:35pm UTC)
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.

rroll.to— Shorten a link, rickroll your friends.
Ross
Administrator
*****

[Avatar]

Posts: 3,709
Status: Offline
Gender: Male
Age: 8 11
Joined:  

Additional Groups:
Support Team
***


Reputation: 45%  


pmwwwtwittergtalkvForum
Re: Best Method for Mobile Website? (16th Oct 12 at 11:18pm UTC)
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!

Image
Marc
vChat Developer
*****
I <3 Rossy

Posts: 3,388
Status: Offline
Gender: Male
Location: Ontario, Canada
Age: 32
Joined:  

Additional Groups:
Coding Team
***


Reputation: 40%  


pmwww
Re: Best Method for Mobile Website? (17th Oct 12 at 2:53pm UTC)
 
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. {Smile}

rroll.to— Shorten a link, rickroll your friends.
Ross
Administrator
*****

[Avatar]

Posts: 3,709
Status: Offline
Gender: Male
Age: 8 11
Joined:  

Additional Groups:
Support Team
***


Reputation: 45%  


pmwwwtwittergtalkvForum
Re: Best Method for Mobile Website? (19th Oct 12 at 2:36pm UTC)
 
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 :-)


Image
Marc
vChat Developer
*****
I <3 Rossy

Posts: 3,388
Status: Offline
Gender: Male
Location: Ontario, Canada
Age: 32
Joined:  

Additional Groups:
Coding Team
***


Reputation: 40%  


pmwww
Re: Best Method for Mobile Website? (19th Oct 12 at 11:26pm UTC)
 
 
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. {Smile}

rroll.to— Shorten a link, rickroll your friends.
loveabc57
New Member
*

Posts: 1
Status: Offline
Joined:  
Reputation: 0%  


pmwww
Re: Best Method for Mobile Website? (21st Dec 12 at 2:32am UTC)
Thanks you share info nice . Happy fun with *REMOVED* games online and *REMOVED* my friend.
 Printable View

All times are GMT+0 :: The current time is 12:59am
Page generated in 7.6277 seconds
This Forum is Powered By vForums (v2.4)
Create a Forum for Free | Find Forums