Desktop Template & Mobile Template both in the same page?

[qyloxe]

Agree with @s-molinari it is rather budget/team/resources dependent BUT if you want do JUST decide desktop-first or mobile-first I encourage to look at existing site logs/stats/analytics. In every major website I know, as for now, it is about 80% for mobile and less than 20% for desktop. Desktop is declining.

Of course we are talking about website or simple web app, but not about full app, pwa or mobile/desktop app.

We talked about it long time ago as I remember - well, ideally we would have in Quasar a set of presentation components like “page with image on the left and content on the right” or “page with big title and three sections on the bottom” or “page with carousel with sections with title, image and simple content”. Those component would just KNOW how to present themselves on desktop/mobile and a designer could build her site from those blocks filling content only. As for now, there’s no such library of visual components for Quasar framework. We talked about it when compatibility with B4 was discussed.

[walfin]

This is simple enough to do if you want, you just need lots of v-if="$q.platform.is…"

[Ben Hayat]

@walfin said in Desktop Template & Mobile Template both in the same page?:

This is simple enough to do if you want, you just need lots of v-if="$q.platform.is…"

That was my exact thoughts. Simple but effective

[Ben Hayat]

@qyloxe
I 'll be taking two approaches.
For responsiveness and auto arranging, I’ll design it as “Mobile-First” as default and then add proper CSS for other sizes.

However, the more important part would be, to have custom templates per page, where the custom template not ONLY decides the arrangement at design time, but what components will be available for each platform. This was the core of my question and not responsiveness.
each device size to have it’s own UX.

[qyloxe]

@Ben-Hayat said in Desktop Template & Mobile Template both in the same page?:

@qyloxe
I 'll be taking two approaches.
For responsiveness and auto arranging, I’ll design it as “Mobile-First” as default and then add proper CSS for other sizes.

In ideal world I would use something like this:

<section-title-with-content>
  <template #title-mobile> this is shorter, mobile title
  </template>
  <template #title-desktop> this is much longer, decriptive, desktop title
  </template>
  <template #content>
    <section-image-content>
       <template #image-mobile>
          ... some optimized mobile image in svg ...
       </template>
       <template #image-desktop>
              ... in desktop it could be carousel/slider...
       </template>
       <template #content-mobile>
           ... here is a copy for mobile users....
       </template>
       <template #content-mobile>
               ... here is a looooong text for desktop oldtimers...
       </template>
     </section-image-content>
  </template>
</section-title-with-content>

I do not want to use if-s, or manually decide css breakpoints. I want declarative, easy to use, always beautiful blocks

[Ben Hayat]

@qyloxe

Very nice, perhaps I’m missing something, it does not address where different templates (i.e. Mobile or desktop), each needs to have their own set of Quasar components. For Example, for Mobile template, I might use a simple DataTable with 3 columns but in desktop I might use a different DataTable to show parent/child data with more columns. In Desktop I might not offer certain complex features (using components) to user, where in desktop I will.

I agree with you to create blocks, but I still need “if’s” to decide which template to show.
Does it make sense?

[qyloxe]

@Ben-Hayat said in Desktop Template & Mobile Template both in the same page?:

… I’m missing something, it does not address where different templates (i.e. Mobile or desktop), each needs to have their own set of Quasar components. For Example, for Mobile template, I might use a simple DataTable with 3 columns but in desktop I might use a different DataTable to show parent/child data with more columns. In Desktop I might not offer certain complex features (using components) to user, where in desktop I will.

It addresses exactly that by using slot sufixes - -mobile and -desktop. In example above you have a simple embedded svg image in mobile (need to fill the valid code in your head of course) and in desktop this static part of the section has a carousel/slider with lots of images (also need to imagine that).

The section designer should decide what slots are needed and how to present them. I just want to fill the content - maybe even with other sections (as in above example I’m filling the content slot of section-title-with content, with the component section-image-content).

Bear in mind, that in reality you do not only have “desktop” and “mobile” targets. There are more - for example in most mobile browsers there is a mode called “show as desktop site” which is just … different … from both mobile and desktop.

[Ben Hayat]

@qyloxe
Thanks for the clarification. I had missed the slot part. I’ll look into it. I also don’t like “IF” coding as much as possible. :If" coding hunts you for life…

[cipsss]

In the quasar conf, there was a speaker that mentioned he made different components layouts and using the platform detection, he loaded the mobile-component.vue when the platform is mobile and desktop-component.vue - i dont remember much sorry
i would use the same principle, make duplicate components if the component is radically different from desktop to mobile and probably lazy load them on demand, didnt try it yet…its just an ideea so far

[renaudham]

Hi.
Frankly i think duplicating 2 separated code sources is really overhead.
On the other hand making a unique common UI working for both is not great.
And v-if to show hide elements can get all heavy.

For me it could be a mix
Some main UI elements can be responsive and with some v-if cases plus good css logic
Then some routes can be conditionnal based on device, when UI of a page needs really to be different
But also in some common pages for both UI you can apply
-using components with specific slots
-or using the dynamic components loading.
Loading some parts of the page as Mobile component or desktop components.
<component v-bind:is=“currentTabComponent”>

I think there is a lot of solution to mix in VueJs
To have a perfect single source code logic