I know all the craze about responsive sites, and I get it. I"m a firm believer in the practice. My only problem is the weight that can go a long with it. Especially when you're customizing the site quite a lot depending on the device consuming the website.
I do not like the idea of changing the domain if someone is using a mobile phone. eg mydoamin.com redirects the user to mobile.mydomain.com. SEO wise alone, that is a bad idea.
I have worked on a sitecore hosted website lately. In sitecore you have devices. If you were to use the 51Degress plugin . Sitecore upon page request, will query the user agent, compare it with the data from 51Degrees and determine which device/version to use. You can assign different layouts for each 'device'. The url does not change, only the layout
Example : Homepage would have two Templates Default and Mobile. Depending on the User Agent, either the Default template would show, or the Mobile template would show.
This way you can REALLY customize the site for mobile phones, and leave tablets and desktops with a more traditional website design.
Yes, there is more maintenance required to maintain each device version of a page. But at lease you're not bloating the page with media-query conditional html. This html increases the size of the page, thus increase loading time and making the html look messy.
So my question is.. Is there a way to do something similar in Umbraco ?
Otherwise a custom controller can toggle the template with return View("TemplateName", model).
As Alex says, I don't know of anyone integrating 51Degrees as a package, but I don't see a great need to have it built in. Your template naming conventions can manage which template to show for each device unless you're getting really complicated.
I'm pleased we've found something that SiteCore does better though.
Thanks for your replies. I agree, that 90% of the time you can get away with responsive designs. I would also not want to add the complexity to Umbraco core. That would be a mistake, But a package.. maybe.
Haha, Trust me David, I've been searching for a long time to find something to compare to my old favourite Umbraco.
You're welcome to take that idea for a package if you like Alex :) I doubt I would ever get the time to do it.
I will investigate both the preRequest event and the inbound-pipeline and see which is the best solution.
Hi Guys, I researched both methods and the cleaner of the two seems to be the pipeline. This wouldn't require to inherit from a base page class or anything like that. It would be more in keeping with the Umbraco approach.
The HttpContext instance is accessible from the pipeline. Allowing me to query the User agent string. All I need to do is create a "quick" filter to only target page requests and ignore all resource/media requests. Then cache the common known User Agent strings in memory. As the will be constants over the life of the application.
I'll keep to the convention of [templateName] or [templateName]_[deviceName]. The first being the fallback default if the device is not found. In my case there will only be a "mobile" device.
As long as I keep the same placeholers, I shouldn't need to change the content items, as they will keep working in a responsive way. Allowing me to focus on the mobile navigation and dialogs. Helping me to keep the weight of the pages to a minimum and with a cleaner separation
I'm just finding this issue now myself. In my case, I have a therapy business that uses a 3rd party booking application.
Currently, when a user clicks to "make a booking", if they are a mobile/tablet user, they are landing on a desktop site!
What I need is a way to detect if their device is a mobile or default desktop. ...if I can detect if the device is a mobile, I can can render the page with the "mobile booking link".
I was somewhat reluctant to use the 51Degrees option as it involved installing a whole other app. I was hoping there was an easy way to just query Umbraco or the request pipeline to check if it was a mobile device.
I didn't realize it was that complicated hahah
Ok, so I'm installed the 51Degrees Lite version and I could easily query write a razor conditional statement which did the trick:
Brilliant! Thank you! ...I was reluctant at first, but all is well.
...except that now, using the RTE I am unsure how to do this inside of a Link tag. In the RTE when I click the link I try and add the URL inside of the @{} but that doesn't work, because the RTE is smart. ...It prefixes the embedded razor with a forward slash (/).
Is there some way to do this "conditional logic" inside of the RTE?
I should also mention that I am using the RTE inside of the Grid Editor where my column/paragraph.
Adaptive Device detection and template selections
Hi guys
I know all the craze about responsive sites, and I get it. I"m a firm believer in the practice. My only problem is the weight that can go a long with it. Especially when you're customizing the site quite a lot depending on the device consuming the website.
I do not like the idea of changing the domain if someone is using a mobile phone. eg mydoamin.com redirects the user to mobile.mydomain.com. SEO wise alone, that is a bad idea.
I have worked on a sitecore hosted website lately. In sitecore you have devices. If you were to use the 51Degress plugin . Sitecore upon page request, will query the user agent, compare it with the data from 51Degrees and determine which device/version to use. You can assign different layouts for each 'device'. The url does not change, only the layout
Example : Homepage would have two Templates Default and Mobile. Depending on the User Agent, either the Default template would show, or the Mobile template would show.
This way you can REALLY customize the site for mobile phones, and leave tablets and desktops with a more traditional website design.
Yes, there is more maintenance required to maintain each device version of a page. But at lease you're not bloating the page with media-query conditional html. This html increases the size of the page, thus increase loading time and making the html look messy.
So my question is.. Is there a way to do something similar in Umbraco ?
Hi AJ,
I think there are no such packages for Umbraco.
But you can create templates for each devide and at preRequest event determine user agent and show page with needed template.
Thanks,
Alex
Hi AJ,
This is nice idea for package, I don't like device dependent approach, but it make sense in some situations. And it's not hard to do it with Umbraco.
Thanks
I'd set the template here if you want to get a little fancy: https://our.umbraco.org/documentation/reference/routing/request-pipeline/inbound-pipeline
Otherwise a custom controller can toggle the template with
return View("TemplateName", model).As Alex says, I don't know of anyone integrating 51Degrees as a package, but I don't see a great need to have it built in. Your template naming conventions can manage which template to show for each device unless you're getting really complicated.
I'm pleased we've found something that SiteCore does better though.
Thanks, David, agree with you that I don't see a great need to have it build in.
Hi Alex, David
Thanks for your replies. I agree, that 90% of the time you can get away with responsive designs. I would also not want to add the complexity to Umbraco core. That would be a mistake, But a package.. maybe.
Haha, Trust me David, I've been searching for a long time to find something to compare to my old favourite Umbraco.
You're welcome to take that idea for a package if you like Alex :) I doubt I would ever get the time to do it.
I will investigate both the preRequest event and the inbound-pipeline and see which is the best solution.
Thanks again for the guidance
You are welcome AJ, waiting for your response.
Thanks
Hi Guys, I researched both methods and the cleaner of the two seems to be the pipeline. This wouldn't require to inherit from a base page class or anything like that. It would be more in keeping with the Umbraco approach.
The HttpContext instance is accessible from the pipeline. Allowing me to query the User agent string. All I need to do is create a "quick" filter to only target page requests and ignore all resource/media requests. Then cache the common known User Agent strings in memory. As the will be constants over the life of the application.
I'll keep to the convention of [templateName] or [templateName]_[deviceName]. The first being the fallback default if the device is not found. In my case there will only be a "mobile" device.
As long as I keep the same placeholers, I shouldn't need to change the content items, as they will keep working in a responsive way. Allowing me to focus on the mobile navigation and dialogs. Helping me to keep the weight of the pages to a minimum and with a cleaner separation
Thanks again for your help.
Nice solution, thank you Anthony.
Hi all,
I'm just finding this issue now myself. In my case, I have a therapy business that uses a 3rd party booking application.
Currently, when a user clicks to "make a booking", if they are a mobile/tablet user, they are landing on a desktop site!
What I need is a way to detect if their device is a mobile or default desktop. ...if I can detect if the device is a mobile, I can can render the page with the "mobile booking link".
Any ideas?
Many thanks! ...Umbraco Rules! hahaha
Other than 51 Degrees?
haha thanks David!
I was somewhat reluctant to use the 51Degrees option as it involved installing a whole other app. I was hoping there was an easy way to just query Umbraco or the request pipeline to check if it was a mobile device.
I didn't realize it was that complicated hahah
Ok, so I'm installed the 51Degrees Lite version and I could easily query write a razor conditional statement which did the trick:
Brilliant! Thank you! ...I was reluctant at first, but all is well.
...except that now, using the RTE I am unsure how to do this inside of a Link tag. In the RTE when I click the link I try and add the URL inside of the @{} but that doesn't work, because the RTE is smart. ...It prefixes the embedded razor with a forward slash (/).
Is there some way to do this "conditional logic" inside of the RTE?
I should also mention that I am using the RTE inside of the Grid Editor where my column/paragraph.
Thank you for your help! Daniel
is working on a reply...