Answers.Body: <p>In general, I'd discourage the idea of having separate versions of a page depending on whether it is mobile or not. Typically you can do this more effectively via responsive design, media breakpoints, CSS Grid, and so on.</p>
  
  <p>If you still really want to do it, you can have a conditional like:</p>
  
  <pre><code>{% if craft.app.request.isMobileBrowser() %}
      {% cache using key ("mobile" ~ craft.app.request.pathInfo) %}
          {% include "mobile-page.html" %}
      {% endcache %}
  {% else %}
      {% cache using key ("desktop" ~ craft.app.request.pathInfo) %}
          {% include "desktop-page.html" %}
      {% endcache %}
  {% endif %}
  </code></pre>
  
  <p>...but again, the idea of a separate mobile page vs. a desktop page is generally a bit dated these days.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-12T03:25:31.413Z
Answers.Text: This idea is great, but I do not want to load craft at all, I would like to load the nginx files html files which was stored. So I am not planing to use the mobile version (btw that was the solution what we have been used right now, and it is working fine). Reflecting the idea to have different file is oke, but I would like to serve different page for AMP and different page for desktop. Yes we can do it over responsive design, will consider that approach also...
Answers.UserDisplayName: Visky Máté
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-12T05:34:02.510Z
Answers.Text: As for amp, this might be a good resource https://www.google.com/amp/s/nystudio107.com/blog/google-amp-should-you-care/amp
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-12T11:11:06.007Z
Answers.Text: So if you want a different page for AMP, this is how I do it: https://nystudio107.com/blog/google-amp-should-you-care
Answers.UserDisplayName: andrew.welch
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-12T03:21:02.087Z
Answers.LastActivityDate: 2018-10-12T03:21:02.087Z
Answers.UserDisplayName: andrew.welch
Body: <p>Is there any good practice to how to serve mobile pages differently from Twig?</p>
  
  <p>What I would like to achieve is the following, right now we have pages like:
  <a href="http://myawsomecraftpage.com/stories/aaa-bbb-ccc" rel="nofollow noreferrer">http://myawsomecraftpage.com/stories/aaa-bbb-ccc</a></p>
  
  <p>In the template we are doing many things differently, if the browser is mobile, or not mobile.</p>
  
  <p>I would like to split the template, and have 1 for mobile 1 for desktop. The issue I also would like to cache this pages (ofc differently for mobile, and for desktop)</p>
  
  <p>So the best practice would be to have pages like:
  <a href="http://myawsomecraftpage.com/m/stories/aaa-bbb-ccc" rel="nofollow noreferrer">http://myawsomecraftpage.com/m/stories/aaa-bbb-ccc</a></p>
  
  <p>The issue here this is not supported in Craft routing... I mean to generate mobile-aware URL</p>
  
  <p>So another option I guess to add another site right? like
  <a href="http://m.myawsomecraftpage.com/stories/aaa-bbb-ccc" rel="nofollow noreferrer">http://m.myawsomecraftpage.com/stories/aaa-bbb-ccc</a></p>
  
  <p>This should work I guess...</p>
  
  <p>So again, the issue here is we have different templates (optimization point of view) for desktop and mobile pages, and we would like to cache them (with bitz for example)</p>
  
Tags: <templating><cache>
Title: Mobile page support
ThreadText: # Mobile page support
  
  (Asked by: username_0 on 2018-10-12)
  
  Is there any good practice to how to serve mobile pages differently from Twig?
  
  What I would like to achieve is the following, right now we have pages like:
  <http://myawsomecraftpage.com/stories/aaa-bbb-ccc>
  
  In the template we are doing many things differently, if the browser is mobile, or not mobile.
  
  I would like to split the template, and have 1 for mobile 1 for desktop. The issue I also would like to cache this pages (ofc differently for mobile, and for desktop)
  
  So the best practice would be to have pages like:
  <http://myawsomecraftpage.com/m/stories/aaa-bbb-ccc>
  
  The issue here this is not supported in Craft routing... I mean to generate mobile-aware URL
  
  So another option I guess to add another site right? like
  <http://m.myawsomecraftpage.com/stories/aaa-bbb-ccc>
  
  This should work I guess...
  
  So again, the issue here is we have different templates (optimization point of view) for desktop and mobile pages, and we would like to cache them (with bitz for example)
  
  **Tags:** templating, cache
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-10-12. Score: 2
  
  In general, I'd discourage the idea of having separate versions of a page depending on whether it is mobile or not. Typically you can do this more effectively via responsive design, media breakpoints, CSS Grid, and so on.
  
  If you still really want to do it, you can have a conditional like:
  
  ```
  {% if craft.app.request.isMobileBrowser() %}
      {% cache using key ("mobile" ~ craft.app.request.pathInfo) %}
          {% include "mobile-page.html" %}
      {% endcache %}
  {% else %}
      {% cache using key ("desktop" ~ craft.app.request.pathInfo) %}
          {% include "desktop-page.html" %}
      {% endcache %}
  {% endif %}
  
  ```
  
  ...but again, the idea of a separate mobile page vs. a desktop page is generally a bit dated these days.
  
  > **Comments:**
  > **username_0**: This idea is great, but I do not want to load craft at all, I would like to load the nginx files html files which was stored. So I am not planing to use the mobile version (btw that was the solution what we have been used right now, and it is working fine). Reflecting the idea to have different file is oke, but I would like to serve different page for AMP and different page for desktop. Yes we can do it over responsive design, will consider that approach also...  
  > **username_2**: As for amp, this might be a good resource https://www.google.com/amp/s/nystudio107.com/blog/google-amp-should-you-care/amp  
  > **username_1**: So if you want a different page for AMP, this is how I do it: https://nystudio107.com/blog/google-amp-should-you-care  
  
  ---
  
  