Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Berto 105 posts 177 karma points
    Sep 08, 2010 @ 19:13
    Berto
    1

    Mobile version of site

    Hi!

    I wan't to make a version of site to mobile (for iphone/android), and i've already checked the IPhone alt page from nibble, and i have a solution with the altTemplate.

    My question is how can i do it with a sub-domain, like mobile.umbraco.org, without having to duplicate my contents?

    I'm still researching this, i've already searched in here, but i'm only getting the altTemplates. Can anyone give me some pointers on how to do this?

     

    Thx

    Berto

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 08, 2010 @ 20:40
    Stefan Kip
    0

    You could try with urlRewriting?

    - Catch url's with m.yoursite.com in the hostname
    - Rewrite the url something like this: yoursite.com/the-path-to/some-document?altTemplate=mobile 

  • Hendrik Jan 71 posts 137 karma points
    Sep 08, 2010 @ 23:29
    Hendrik Jan
    0

    If u just use another stylesheet for mobile u could add m.domain.com to the node and then urlRewrite the css file for the mobile domain.


  • Bram Loquet 72 posts 102 karma points
    Sep 09, 2010 @ 09:37
    Bram Loquet
    0

    instead of calling "yoursite.com/the-path-to/some-document?altTemplate=mobile"
    you can also call "yoursite.com/the-path-to/some-document/mobile"
    to get a cleaner url

  • Berto 105 posts 177 karma points
    Sep 09, 2010 @ 16:18
    Berto
    0

    Hi!

    The CSS option in this case is out because the site is all in flash, but I will take a look at it for future work.

    Can someone post an rule of urlRewrite to use the subdomain? I was looking at the documentation and it has an option of "domain" but I dind't understood what it does.

    Thx :D 

    (this post was written with google Scribe, and it not such a great help... But it is good has a dictionary)

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 09, 2010 @ 16:23
    Stefan Kip
    0

    I'm afraid you can't use UrlRewritingNet which is build-in in Umbraco.

    You should use the UrlRewrite plugin for IIS, which supports conditions for HTTP headers, like HTTP_HOST

  • Berto 105 posts 177 karma points
    Sep 09, 2010 @ 16:33
    Berto
    0

    I'm already using the UrlRewritingNet, can I have both?

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 09, 2010 @ 16:33
    Stefan Kip
    0

    Yes you can! :-)

  • Bram Loquet 72 posts 102 karma points
    Sep 09, 2010 @ 16:37
    Bram Loquet
    0

    no problem, you can use ISS rewrite on top of UrlRewritingNet

  • Berto 105 posts 177 karma points
    Sep 09, 2010 @ 16:55
    Berto
    0

    Cool! I'm going to try it and post my solution in here.

     

    Thx Guys!

  • Phil Dye 149 posts 325 karma points
    Sep 14, 2010 @ 11:45
    Phil Dye
    0

    I've done something similar recently;

    • a combination of UrlRewritingNet to silently use altTemplate deals with serving the pages easily enough (we used domain.com/m/ to avoid HTTP_HOST issues).
    • the harder bit is mobile detection (I ended up using MBDF), and maintaining the state of "view mobile/desktop version" links (via a persistent cookie) - I achieved all that by using a usercontrol in every page with the necessary logic.
    • the last piece of the puzzle was a wrapper around NiceUrl to prefix generated URLs with /m/ if the user was a mobile device (or chose to view the mobile version).

    The site isn't live yet, otherwise I'd be happy to post the URL and some code - once it is I'll try and come back and post a more complete solution.

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 15, 2010 @ 19:36
    Stefan Kip
    2

    Just to let you guys know, I just implemented my first mobile website ever.

    I created UrlRewriting rules like this:

    <rewrite>
    <rules>
    <rule name="Mobile level 3" patternSyntax="ECMAScript" stopProcessing="true">
    <match url="^([^/]+)/([^/]+)/([^/]+)$" />
    <conditions logicalGrouping="MatchAll">
    <add input="{HTTP_HOST}" pattern="m.somesite.nl" />
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{QUERY_STRING}" pattern="(.*)altTemplate(.*)" negate="true" />
    </conditions>
    <
    action type="Rewrite" url="/{R:0}?altTemplate=MobileLevel3" />
    </rule>
    <rule name="Mobile level 2" patternSyntax="ECMAScript" stopProcessing="true">
    <match url="^([^/]+)/([^/]+)$" />
    <conditions logicalGrouping="MatchAll">
    <add input="{HTTP_HOST}" pattern="m.somesite.nl" />
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{QUERY_STRING}" pattern="(.*)altTemplate(.*)" negate="true" />
    <conditions>
    <
    /action type="Rewrite" url="/{R:0}?altTemplate=MobileLevel2" />
    </rule>
    <rule name="Mobile level 1" patternSyntax="ECMAScript" stopProcessing="true">
    <match url="^([^/]+)$" />
    <conditions logicalGrouping="MatchAll">
    <add input="{HTTP_HOST}" pattern="m.somesite.nl" />
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{QUERY_STRING}" pattern="(.*)altTemplate(.*)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/{R:0}?altTemplate=MobileLevel1" />
    </rule>
    <rule name="Mobile Homepage" patternSyntax="Wildcard" stopProcessing="true">
    <match url="*" />
    <conditions logicalGrouping="MatchAll">
    <add input="{HTTP_HOST}" pattern="m.somesite.nl" />
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{QUERY_STRING}" pattern="*altTemplate*" negate="true" />
    </conditions>
    <action type="Rewrite" url="/{R:0}?altTemplate=MobileHomePage" />
    </rule>
    </rules>
    </rewrite>
  • Berto 105 posts 177 karma points
    Sep 15, 2010 @ 19:46
    Berto
    0

    @kipusoep

    Can you give an explanation of the rules? Just for the "Mobile Homepage"

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Sep 15, 2010 @ 19:50
    Stefan Kip
    0

    Well, the mobile homepage has a wildcard match for anything (*), as long as the HTTP_HOST == m.somesite.nl, the REQUEST_FILENAME isn't a physically exisiting file and the QUERY_STRING does not already contain 'altTemplate' (infinite loop).

    The levels are there because I have to use other altTemplates per document type.

  • lucuma 261 posts 563 karma points
    Nov 11, 2010 @ 16:58
    lucuma
    0

    @kupusoep - just wanted to say thanks.. this thread helped me out a bunch on my project.

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Nov 11, 2010 @ 17:00
    Stefan Kip
    0

    No problem :-) We're using it live @ http://spgs.nl

  • lucuma 261 posts 563 karma points
    Nov 11, 2010 @ 17:09
    lucuma
    0

    Nice!

    I'm still doing a bunch of UI work on mine but its up as well (just a blog site built from umbraco).. http://conchadeltoro.com

    How are you doing browser detection to your mobile url.. I'm currently doing javascript (quick and dirty) but would like to possibly change this part.

  • Stefan Kip 1614 posts 4131 karma points c-trib
    Nov 11, 2010 @ 17:14
    Stefan Kip
    1

    We're using a 'mobile.browser' file (app_browsers) which supports the property 'Request.Browser.IsMobileDevice'

  • lucuma 261 posts 563 karma points
    Nov 11, 2010 @ 19:05
    lucuma
    0

    Thanks again.. That's what I needed..

  • Phil Dye 149 posts 325 karma points
    Nov 12, 2010 @ 09:40
    Phil Dye
    0

    We're using the MBDF project (http://mdbf.codeplex.com/)  on a site, but I note that that's now gone away (http://stackoverflow.com/questions/2204861/mobile-device-browser-file-vs-wurfl-for-asp-net) - so for all new projects (and no doube this one in time), I'll be looking to use 51degrees.mobi probably.

     

  • lucuma 261 posts 563 karma points
    Nov 13, 2010 @ 09:21
    lucuma
    0

    @Phil - I switched to the 51 degrees solution.. I'm not entirely sure about it yet as it my site has been running noticeable slower although this could be due to some server/network issue.  Anyways, I will post what I did here in the event it helps anyone else:

    1.  Added the dll file to bin and the 2 files to app_data per the instructions.

    2.  Adjusted the web.config per the instructions by adding the section group and the module (iis7).

    Here is the section that controls the redirects.  The important part the is redirect (the others are just from their instructions):

    <fiftyOne>
    <redirect firstRequestOnly="true"
    mobileHomePageUrl="http://m.conchadeltoro.com"
    timeout="20"
    devicesFile="~/App_Data/Devices.dat"
    mobilePagesRegex="[http|https]://m.conchadeltoro.com"
    originalUrlAsQueryString="false">
     <locations>
    <location url="http://m.{0}" matchExpression="conchadeltoro.com(.*)">
     <add property="IsMobileDevice" matchExpression="true"/>
     </location>
    </locations>
    </redirect>
     
    <log logFile="~/App_Data/Log.txt" logLevel="Info"/>
     
     <wurfl wurflFilePath="~/App_Data/wurfl.xml.gz" newDevicesURL="http://devices.51degrees.mobi/New.ashx" newDeviceDetail="maximum">
    <wurflPatches>
    <add name="browser_definitions" filePath="~/App_Data/web_browsers_patch.xml" enabled="true"/>
    </wurflPatches>
    </wurfl>
    </fiftyOne>

    I think I could come up with a better regexpattern in the location section but I'm regex-challenged.. Regardless, it works for anyone that might be interested in this library.  The firstRequestOnly parameter is supposed to only redirect the user if they have a mobile on the first time they hit the site.. If the user selects to go back to the full site they won't be redirected again.. I need to test this out so if anyone cares to help out, I'd be interested to know if it works for you (supposedly the session timeout will reset it I think).  I think the rest is pretty straightforward.

     

  • Phil Dye 149 posts 325 karma points
    Nov 15, 2010 @ 10:39
    Phil Dye
    0

    Thanks lucuma; when the time comes, I'll need to work out a bunch of regex stuff anyway, since I'm using altTemplate's to achieve the mobile version of the site, rather than run on a separate hostname within Umbraco.

  • lucuma 261 posts 563 karma points
    Nov 15, 2010 @ 15:18
    lucuma
    0

    Phil,

    I have the same setup as you only that I'm doing some URL Rewriting based on the hostname and relative path requested to determine the altTemplate to use.  The m. domain just makes it easier for me to track.  To give credit where due, I'm doing almost exactly what kipusoep posted above to determine the altTemplate (based on my own rules of course). 

    My document types typically only have 2 templates, so I almost think that umbraco would benefit from a generic querystring like ?usedefaultalt=1 that would auto select the non default altTemplate as long as it only had two defined.  Or, being able to classify templates in a generic way, like mobile templates, regular templates, etc and doing something like ?useTemplate=mobile..  I have like 4 different mobile templates and like kipusoep posted, I have to do a bunch of different url rewrite rules (or in your case you have to specify altTemplates manually) and it would be nice to just have one generic way.

     

  • Carlos 338 posts 472 karma points
    Feb 08, 2011 @ 19:05
    Carlos
    0

    @lucuma,

    How are you doing the multiple templates?  I am not redirecting to a m.domain.com just redirecting to a different template based on the page type. Internal page, listing page, etc.

    Do you have and example of the code or anything?

  • lucuma 261 posts 563 karma points
    Feb 09, 2011 @ 14:23
    lucuma
    0

    @Carlos-

    I'm using the 51degrees mobile detection & standard rewrites and am doing the following.  All is done in the web.config and I have a separate mobile template for each normal template.  The first code snippit is for the 51 degrees section of the web.config.  The 2nd part is the standard redirect for IIS.  It checks to see if it is on the domain m. and appends the altTemplate based on the URL path.

    <!-- 51 degrees section web.config --> <redirect   firstRequestOnly="true"
    mobileHomePageUrl="http://m.conchadeltoro.com"
    timeout="20"
    devicesFile="~/App_Data/Devices.dat"
    mobilePagesRegex="[http|https]://m.conchadeltoro.com"
    originalUrlAsQueryString="false"
    >  
    <rule name="Blog Post Mobile"> <!-- this is for the url /blog/2010/01/blog-title -->
                        <match url="([^/]+)/([^/]+)/([^/]+)/([^/]+)$" />
              <conditions>
                            <add input="{HTTP_HOST}" pattern="m.conchadeltoro.com" />
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                            <add input="{QUERY_STRING}" pattern="(.*)altTemplate(.*)" negate="true" />
                        </conditions>
                        <action type="Rewrite" url="/{R:0}?altTemplate=BlogPostMobile" />
                    </rule> 


  • Carlos 338 posts 472 karma points
    Feb 10, 2011 @ 02:44
    Carlos
    0

    @lucuma or anyone else,

    Do you know if you can do it based on Document type vs matching the URL?

    The thing is we have pages all over in our tree. A details page could be a 1st level or 3rd level, a listing page could be a 1st level, 2nd or 3rd level.

    The is mainly the structure of some parts of our site

    Home
    --Listing Page
    ---Details Page

    But some of our pages are like this
    Home
    --Details Page

    Or 

    Home
    --Listing Page
    ---Listing Page
    ----Details Page

    Home
    --Listing Page
    ---Internal Page
    ----Details Page

    This is why I need do append the alttemplate based off of the doctype that has an alternate mobile template with it

    Example:
    Doctype of:
    Listing Page doctype has templates ListingPage and mobile-listingpage 
    Details Page doctype has templates DetailsPage and mobile-detailspage
    Internal Page doctype has templates InternalPage and mobile-internalpage

    I need to specify the doctype to know what mobile template that needs to be used.
    Since our tree contains details pages on 1st level or 3rd level that means we can not use the match url such as "lucuma" is suggesting. Works for his because of the structure of the blog "/blog/2010/01/blog-title" using the match url of ([^/]+)/([^/]+)/([^/]+)/([^/]+)$.  Our templates are used at varying levels of the pages and subpages within the tree.

    We can not do it like "kipusoep" does either because he is doing the url based of off the / / / / method as well. 

    Our site is huge, and any help with any of this would be awesome.

     

     

  • lucuma 261 posts 563 karma points
    Feb 10, 2011 @ 02:56
    lucuma
    0

    @Carlos - do you have a website I can look at (seems like a realtor site maybe) ? 

  • Carlos 338 posts 472 karma points
    Feb 10, 2011 @ 04:38
    Carlos
    0

    We are a Museum.  www.dmns.org

    I can give you a few examples our what are details pages, what are listing pages, etc.

    Homepage = www.dmns.org

    1 level Details page (plan-your-visit) = www.dmns.org/plan-you-visit

    1 level Listing page (give) =  http://www.dmns.org/give

    2 level Details page (donations) is =  http://www.dmns.org/give/donations

    2 levels of Details pages, so a Details page under a Details page within the tree = http://www.dmns.org/plan-your-visit/shopping-and-dining

    3 level Details page with 2 levels of listing pages = http://www.dmns.org/learn/adults/after-hours
         - In this case, /learn is a listing page, /adults is a listing page, /after-hours is a listing page, then it drills down to the details page such as http://www.dmns.org/learn/adults/after-hours/strange-new-worlds

    As you can see, we have a lot of content to account for. We are in the process of widdling it down for the mobile templates, but I think we can get a way with maybe 5 alt mobile templates to handle most of the site. Mobile templates are not implemented on the Live site yet. We have a dev site set up within our firewall in which we are testing on.

    Pointers are great. We love using Umbraco, but this has been one of our biggest hurdles.  The templates are pretty much made, I just need to get the pointed to the doctypes that they need to go to.

    Debating on if 51degrees foundation is the right fit for us, if we are going to have to write a bunch of rewrite rules, or other solutions to handle what we need to accomplish.

    If a solution is found, this can help a lot of other people who have and we are always willing to share and have contributed what we can regularly on this forum.  Awesome community here.

  • lucuma 261 posts 563 karma points
    Feb 10, 2011 @ 05:04
    lucuma
    1

    My guess was wrong..  ;)

    A Couple things.. 51 degrees is only being used for the mobile sniffing and redirect to the m. domain...There aren't a ton of good options for the sniffing and i'd be interested in what you or anyone else is doing for this..  

    Let me know if the following is accurate:  You can not use the url structure to determine your alt template because the same path levels can have multiple document types (multipe templates).   Your document's will only have 2 templates (normal and mobile), so as long as you can determine the altTemplate for a given template you should be able to make this work.....

    I may have read this in the forums, but I think you could add a macro (.net user control) to each template (maybe pass in the alttemplate name as a parameter as I don't recall if the template name is available to it).  Then you just check to see if the url starts with  m. (in my case)  and server transfer to  url?altTemplate=[macroalttemplate].....  What do you think?

  • Carlos 338 posts 472 karma points
    Feb 10, 2011 @ 05:22
    Carlos
    0

    lucuma,

    You are correct about the path levels.  My thought was that 51degrees did more but it seems I am wrong.  We will look more into what our solution is and post it here.  I love that we can use alt templates, but for our site structure, we may have to make a more unconventional approach.  Or do as you are suggesting, adding a macro and setting the params.  

    Someone suggested using the locations option, but tried that and that did not quite work like we needed it to.

    Will post it our solution. Thanks!

  • lucuma 261 posts 563 karma points
    Mar 05, 2011 @ 18:54
    lucuma
    0

    Hey Carlos, I was just curious what you decided to do? I've got a large site with tons of templates and each one has a mobile equivalent much more difficult to my last smaller project that was easy to do based on URL strucuture.  

    I'm leaning towards creating mobile templates with a name like mobile-1050 where the 1050 is the ID of the document's default template so that I can easily build mobile urls like (razor) @[email protected]  - I just don't like hard coding template names to ids but it should work.  The problem is just that I would have to redirect to the home page first and then build something to redirect back to the requested page (it would seem).  Not sure yet.

    Just wondering if you made any headway.

  • lucuma 261 posts 563 karma points
    Mar 06, 2011 @ 07:07
    lucuma
    0

    Ok, so I had a productive Saturday and what I came up with is the following.  I'm not sure it is the most *elegant* solution but it works:

    I created a matching mobile template for each template using its template id.  So I have a TextPage template and a matching mobile-1048 template.  1048 would be the id of TextPage.

    Created a user control that I've added to my root master page.  All it does is check to see if ?mobile=1 is on the querystring.  If it is, it generates the altTemplate alias by getting the current node's template id and redircting to url?altTemplate=mobile-[templateid]   where [templateid] is the the current node's template id.  

    All my mobile templates have links like @page.Url?mobile=1 so that it will redirect to the correct place.  I'm using NodeFactory so I think that only uses the inmemory xml so it isn't terribly slow (I hope this assumption is correct).  I prob could easily just do @[email protected] in my case which probably is cleaner.

    Lastly, I added the fiftyone degress redirect to redirect to whatever page it is trying to hit with ?mobile=1 on the end.  Seems to work great!

     

  • Carlos 338 posts 472 karma points
    Mar 07, 2011 @ 17:44
    Carlos
    0

    Seriously Umbraco comments. I just commented on this and it completely erased my whole post.I am going to make a completely new post for this and give you the link.

  • lucuma 261 posts 563 karma points
    Mar 07, 2011 @ 17:56
    lucuma
    0

    Thanks Carlos.. Really looking forward to your solution. 

  • Carlos 338 posts 472 karma points
    Mar 07, 2011 @ 18:51
    Carlos
    0

    Ok, posted our solution to detecting mobile AND tablets and sending them to alternate MULTIPLE templates.

    Comment and add questions to that post if you have any and I will try to answer the best I can. I had a few other help me out. I will find the answers if I can not answer them.

    http://our.umbraco.org/forum/templating/templates-and-document-types/18111-How-to-determine-Mobile-and-Tablet-and-sending-them-to-different-alt-templates-This-is-how-to

  • Jackon 5 posts 25 karma points
    Jan 04, 2012 @ 16:30
    Jackon
    0

    Hi,

    Does anyone have an working example of this (iPhone Alt Page) working on Umbraco 4.7.x? We just upgraded - it was working before but it looks like its using the old XML schema and needs to be updated.

     

    Any anyone post the XSLT file which has been updated? Thanks in advance.

     

     

  • Carlos 338 posts 472 karma points
    Jan 04, 2012 @ 17:30
    Carlos
    0

    Jackon,

    Which solution are you trying to use?  I posted a solution for adding code to the template a while back just above your comment.  Not sure if that is the one you were using or the one from this post.

Please Sign in or register to post replies

Write your reply to:

Draft