How to serve a Mobile & Full Site using one URL?

[petecampbell-bmi]

Hello,

Does anyone know of any resources or tutorials that outline how to serve a smartphone-formatted website using the same URL as the full site?

I know that one solution is using media-queries to serve a seperate CSS stylesheet, but you still have the full HTML source code. In other words, I might want to serve a smartphone & desktop user different content, but under one URL.

WP Touch (Wordpress Plugin) is a perfect example of what I mean, but how is it technically achieved? It serves two different sets of HTML for smartphone & full, but using one URL

http://www.bravenewcode.com/store/plugins/wptouch-pro/

[Vivamedia]

Hi Pete!

Take a look in Googles SEO guide on page 26, http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

Good luck!

[petecampbell-bmi]

Hi Tommy,

This doesn't provide any technical answers unfortunately, and refers to mobile devices as opposed to smartphones. Googlebot-mobile is designed for WAP/iMode etc. style websites, Google on smartphones, tablets etc. displays the same results as the desktop version.

[AlanMosley]

I have a few examples. i used the tag in the head section of the html.
Along with Media css see below. you slip this css into your normal css sheet, and give an alternitive css inside for phones,
if you look at one of my sites http://perthseocompany.com.au/ i have done like this you will notice that when the screen size goes below 850px it then takes on the alternative css. One of the main things you will want to do is make sections of your website line up verticly under the alternitive. You can do this by using float left and float right in normal site and float none in alternative css.
I do not have my site perfect because i have not yet had the time. but you get the general idea by playing with browser width.
Note the max-width: 850px in css, this is the width at witch the css changes

@media only screen and (max-width: 850px)
{

header .float-left, header .float-right
    {
        float: none;
    }
}

[petecampbell-bmi]

Hi Alan,

As mentioned. I'm not looking for a CSS solution, but rather a HTML one where different HTML is served if the user-agent is a smartphone.

CSS Media Queries can work in some situations, but not for all. For example, taking the following page - http://www.flybmi.com/bmi/en-gb/index.aspx - and using a mixture of CSS and display none; to output http://www.flybmi.com/mobile would result in a mobile site full of hidden/wasted code.

[AlanMosley]

Then of cause you would need to use a server side solution, this is quite simple in therory, all you need to do is get the severvariable HTTP_USER_AGENT to detect the browser, but then there would be a lot of different serveragenst to detect and more in the future. It would also be a pain having to generate html via server script for every page. I tried doing that for Netscape 2 and IE2 but gave up, it was too much work. Back in those days the way of doing things in browsers was completely different untill IE won out.

I think the eay i was saying is much easier, and there is no missing html, its all used on both versions just positioned different.

[petecampbell-bmi]

Hi Alan,

Thanks very much, I agree - it likely would be easier to use media queries, but I am looking for that ultimate fix and insight on how others do it

[AlanMosley]

No, I am also in the process of enquiring, I program in ASP.Net MVC, and the new MVC4 comes with a few starter templates (with Visual Studio 2010), this is where i got the info i suggested.

I can send you a starter template if you like, you can have a look though if you like. Actualy you will need VS2010 to run it, you can down load a trial but then you may as well download MVC4 as well.