How can I redirect to a mobile optimized page on a per-page basis?
Permalink
I have a web site that is fairly responsive and works on mobile devices and the desktop alike.
There’s just a couple of pages that are very complex and are impossible to make work both on desktops and mobile devices - e.g., they use background images with a specific portion that needs to be visible, or image galleries with desktop specific settings.
For those few pages, I’d like to be able to detect whether I’m on a mobile device, and render a different page instead.
1. Is there a way to access C5’s native way of detecting mobile devices (which it does when it’s been told to use a specific mobile theme)?
2. What is the most elegant way to change away from the current page, and render a different one instead? I can do something hacky by loading the other page in the template, rendering it, and then terminating, but that wouldn’t be very clean. Is there a preferred process?
There’s just a couple of pages that are very complex and are impossible to make work both on desktops and mobile devices - e.g., they use background images with a specific portion that needs to be visible, or image galleries with desktop specific settings.
For those few pages, I’d like to be able to detect whether I’m on a mobile device, and render a different page instead.
1. Is there a way to access C5’s native way of detecting mobile devices (which it does when it’s been told to use a specific mobile theme)?
2. What is the most elegant way to change away from the current page, and render a different one instead? I can do something hacky by loading the other page in the template, rendering it, and then terminating, but that wouldn’t be very clean. Is there a preferred process?
Hey, that's a very clever idea! Thanks.
I ended up using one theme, with certain elements showing only on desktop resolutions and others on mobile using media queries. The downside to that is that all the content gets loaded. I think I'll be using approach in the future.
I ended up using one theme, with certain elements showing only on desktop resolutions and others on mobile using media queries. The downside to that is that all the content gets loaded. I think I'll be using approach in the future.
I don't know if this is the best way, but what I have done is create a duplicate set of page types within an alternate mobile theme so I have two themes, Responsive Theme and Responsive Theme Mobile. Then in Dashboard/Pages & Themes/Themes I set the Mobile Theme option to use Responsive Theme Mobile. Within the theme Responsive Theme Mobile, I make adjustments to the Page Type so that it contains an Area(s) that I only want to show up on mobile devices. For example, I might have a "main" area that I want to change when on mobile, so I will change the name of that area within the Page Type code to "mobile main". The Page Type name remains the same. This way, when the page is requested on a mobile device, it will switch to the mobile theme and load the page using the areas found in the mobile Page Type. As long as all the other areas are named the same, the other content will remain the same as the desktop.
You may have discovered this already, but I thought I'd lay it out there to maybe help someone else that finds this.