This is great work Carlos, thanks!

Here's another simple step. Tested using safari browser's user agent. Any suggestion from real device is welcome

<xsl:variable name="userAgent" select="Exslt.ExsltRegularExpressions:match(umbraco.library:RequestServerVariables('HTTP_USER_AGENT'), 'android|ip(hone|od|ad)|macintosh','i')"/>
  <xsl:if test="$userAgent = 'iPhone'">
   iPhone browser.
  </xsl:if>

Found an error thanks to working with @leemessenger - if the HTTP request doesn't contain a User Agent, you get a 500 HTTP error. To fix, I've modified the code:

string strUserAgent = Request.UserAgent;
      if (!string.IsNullOrEmpty(strUserAgent))
      {
        strUserAgent = strUserAgent.ToLower();
          if (
            Request.Browser.IsMobileDevice == true 
             || strUserAgent.Contains("iphone")

Hi guys

maybe this package can make it easier to detect mobile devices? http://our.umbraco.org/projects/website-utilities/51degreesmobi-foundation

/Jan

Hi Carlos,

I am using your solution, however when I browse the site on my mobile instead of it being redirect to http://<my site>/mHomepage it is instead being redirected to http://<my site>/mHomepage/mHomepage??

I have done a Response.Write before the redirect and this is set to http://<my site>/mHomepage so I can't understand what is causing the extra mHomepage to be added.

Do you have any ideas as to what maybe causing this as I really want to use the solution you have outlined.

Graham

@Graham,  

We were having an issue where we had a similar issue with some pages that could not be found, that the /mobile would constantly get added to the pages.  

You would try to change out the if/else for the detection and response.write stuff.  The difference between yours and ours is though, we had 1 mobile template for all of the pages.  So our /mobile is actually our main mobile template.  We didn't make separate mobile templates for our main templates.  You could try the code we ended up with. If you want more explanation if the code does not work, I can try to explain a bit more.

Here is what we ended up with.  Adding the detection of the mobile template in the wrapping "if" helps with the redirect adding the /mobile to the end of the URL. 

if(!HttpContext.Current.Request.Url.AbsoluteUri.Contains("mobile"))
                            {
                               if(HttpContext.Current.Request.Url.AbsoluteUri == "http://www.mywebsite.com/"){
                                Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri + "mobile");
                                }else{
                                Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri + "/" + "mobile");
                               }
                            }

Hi Carlos,

I am a little confused by your post as the code you supplied above allows the user to select a mobile template on a per page basis using the "chooseMobileTemplate" field in the document type, surely that would then allow different templates to be used??

I am a little confused as to why when vieiwing by mobile that it is redirecting to http://<my site>/mHomepage/mHomepage especially when I output the value that is being redirected to and this is stating http://<my site>/mHomepage??

Any help at all in the best way of me achieving what I need would be most grateful from yourself or any others out there.

Graham

Hi Carlos,

I am a little confused by your post as the code you supplied above allows the user to select a mobile template on a per page basis using the "chooseMobileTemplate" field in the document type, surely that would then allow different templates to be used??

I am a little confused as to why when vieiwing by mobile that it is redirecting to http://<my site>/mHomepage/mHomepage especially when I output the value that is being redirected to and this is stating http://<my site>/mHomepage??

Any help at all in the best way of me achieving what I need would be most grateful from yourself or any others out there.

Graham

@Graham,

You are right.  It has been a while since I posed this. We ended up changing the way we did this.  Instead of the user picking the template, we made the template just default to the one ./mobile template instead of having the user pick what type of template.  

So in essence what we did was,

1.Made one master XSLT file (can be Razor if you wish to go that route).  
2.We call the one XSLT Macro in the /mobile template. The mobile template 
3. In our XSLT we call our other XSLT files or properties.We actually do a giant if/else or <choose> statement in the XSLT file to determine what the document type is, then based on that, we remake the pages using our pulling in our macros into out Mobile.xslt
So in essence the mobile XSLT macros is pulling the same information the main desktop macros and templates are pulling. Except we only have 1 mobile template and 1 XSLT file pulling in the same Macros the desktop version is using.. 
4. We let the code above determine if the user is using a mobile device or not.

Hope that makes sense. Let me know. It is kind of hard with text to explain everything.

I can't set up a dummy site right now, or else I would show you example code.  I am not sure there is enough space here to put all of our code.  Let me see what I can do with screen shots and such.  Give me a few days. 

@Graham,

If you did not want to do the mobile detections stuff, OR if you just wanted to make your site use "responsive design", you could always go the route of using CSS @media queries, detect the screen size and either switch out the CSS sheets or CSS code based on that.  

+1 on the media queries.  They work great and for the most part don't require additional templates if done correctly.  If you want to check out a couplerecent umbraco sites we did as responsive:

http://belmontbaylor.com

http://boxxseats.com

Hello Carlos,

Thank you for this info. I'm having a hard time understanding and adjusting it to what I need (im a designer, not a programmer...lol). What I have is a normal flash website as well as two extra html websites for mobile purposes. One site is for "mobile phones" the other site is for "Tablets". My files are uploaded to my server as www.url.com/mobile and www.url.com/tablet - and what i want to do is have code detect whichever device is visiting my site and redirected to the appropriate website. So if an iPad or Android tablet is visiting my main site (www.url.com), then it gets redirected to the tablet website at www.url.com/tablet and if an iPhone, windows, blackberry, etc visit my site it will redirect it to www.url.com/mobile. How can i adjust your code to make this work as described? Thank you again for this info and any assistance! Cheers!

@Jason,

I understand you dillema. Before I decided to pick up the web dev stuff I was a designer primarily. Learned quite a bit since them. 

It would be MUCH easier to only have one website using only HTML, CSS, and Javascript instead of Flash, but if you are keeping the Flash site I have a few suggestions. Keep in mind, A lot of stuff that Flash does now, HTML, CSS and Javascript can do.  Just FYI.  

My suggestion would actually to have 1 alternate site/template and NOT a tablet and a mobile version.  So the alternate site would be your /mobile version (used for BOTH mobile and tablets), I would then use CSS3 @Media queries to do the resizing and positioning of elements. There are lots of resources for "Responsive Web Design" Since there is a rediculous amount of size differences in the way phone and tablets render and the manufacturers make I would suggest that you use the alternate /mobile site then. I don't know if you know much about the @Media queries but the /mobile CSS sheet would control all of the positioning and sizing of elements on the page.  You use percentages instead of fixed widths for elements that way the elements to grow and resize depending on the device size and then you don't have to worry about dealing variation of sizes with each device.  With @Media queries you set a floor (lowest screen size you want to support) and a ceiling (the higest screen size) and show those specific styles.    I would also suggest using the ViewPort meta tag as well to for the site to show at 100% of the screen.

This way you only have 1 alternate template to have to edit and then the rest is left up to the 1 CSS sheet.

Some good resources for @Media queries with CSS and responsive design would be:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://css-tricks.com/css-media-queries/ ;
http://alistapart.com/article/responsive-web-design
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx ;

Let me know if you have any other questions. We just redid our website to adapt using Responsive design techniques.  We set our max to 767px and then iPads just use the desktop site.  

is working on a reply...