Best practice for mobile redirect

The CMS Questions
1

Hello there,

I hope this beginner question fits into the Kirby forum, if not, please let me know and I’ll close it.
I am working on an artist portfolio page. The mobile version of this page has a different layout, different interaction and a different markup. So all, CSS, JS and HTML differ somewhat from the desktop version.

Now, using Kirby, is it recommended to keep all these different layout variants in the same template files and use PHP-if-statements to differentiate between them? By that I mean so do something like this:

  <?php if ($mobile): ?>
    <?= css('assets/css/site-mobile.css') ?>
  <?php else: ?>
    <?= css('assets/css/site.css') ?>
  <?php endif ?>

// ...

  <?php if ($mobile): ?>
    <?php snippet('mobile-markup') ?>
  <?php else: ?>
    <?php snippet('desktop-markup') ?>
  <?php endif ?>

// ...

  <?php if ($mobile): ?>
    <?= js('assets/js/main-mobile.js') ?>
  <?php else: ?>
    <?= js('assets/js/main.js') ?>
  <?php endif ?>

Or is it rather recommended to create an own template for the mobile site? If so, why is this of advantage and how and where would I redirect the user to this site? Would this need to have its own separate url (I would prefer the mobile and desktop Urls to be just the same).

Hope someone could give me some insights.

Thank you!

2

I would encourage you to implement a responsive design for this.

In short: layout variants should be handled with CSS. So Kirby has really nothing to do with it :wink:

2 Likes
3

I do my mobile detection via mobiledetect, so does your answer mean that I – for example – just assign a class mobile to the body tag and then handle all the styling with one and the same CSS file?

Do I also just keep have one JavaScript file, even though the interactivity differs between two versions?

Lastly: If my markup differs, how do I handle that? Would you just hide elements via CSS? Would it not be preferrable to use PHP to not render these elements in the first place?

4

In short (responsive design can get extensive pretty quickly), you design “mobile first” and use css media queries (usually on width) to detect you’re on mobile (note: narrow browser windows on desktops are also supported automatically then).

I don’t know your use case, but for me JS is considered to be a progressive enhancement. So I build website in a way they just work without JS. If I can enhance certain interactivity, I add a layer of JS on top. You can load JS via JS, so you could load different javascript files based on viewport size as well.

Imo, markup is tied closely to the content (it “describes” your content in a semantic manner). As you’re displaying the same content on mobile/desktop/whatever, the markup should be the same?

Hiding things on mobile is usually a very bad idea since your users who regularly visit your site on desktop, suddenly need something whilst they’re on the go, they want to be able to access that info as well.

3 Likes
5

This.

6

Ok, thanks, your input is helpful to me.

While I agree that is usually the case, in my specific scenario the structure of the two versions is rather different. While the content is all still there, the order and arrangement of the content it totally different to an extent that I am not sure, if I can handle all the changes with pure CSS. I will see how far I can sort this out with CSS and if necessary will throw in a PHP-if-clause here and there.

Thank you.