Desktop Template & Mobile Template both in the same page?

[Ben Hayat]

Hi Guys;

I see some apps which purely rely on Bootstrap or Material design’s responsiveness when it comes to displaying a page on desktop size or mobile size.
In fact, the majority start creating their app on desktop size first and let BS or MD to force it onto Mobile size.

I personally feel that is a poor UX, as re-arranging the components is not good enough. I think we should consciously determine what should and what should not be on Mobile form to make it appear properly.

And that brings me to this topic or question.
Within each Vue page, do you think this desire to have multiple custom UIs for each device size can be accomplished via having multiple templates in the same page and at runtime we can check if this is mobile or desktop and only show the appropriate template?
Is this a good way of going about this solution while we share the same code logic with multiple templates?

Or, do you basically design as “Mobile-First” with single template and then let it run on desktop?

Love to hear your experiences in this regard?
Thanks!

p.s. When I say “Mobile” I mean HTML/CSS running on Mobile and not native or hybrid.

[s.molinari]

To me, honest efforts to make a really good mobile web site mean the user is taken to a different URL (like m.my-site.com or a different app is served) and a totally new “app” is presented for the mobile experience. Thing is, to do that, you have to work on two different projects and usually you’d have a team. I’d say, it is comes down to the complexity of the site. If there is, for instance, the need for a lot of human interaction, even though it may seem counter-intuitive, that is when I think a split should be made. It’s to make sure the mobile experience is the best it can be, because at some point complexity will be harder to do right for both mobile and desktop within just one website/ app.

Scott

[Ben Hayat]

@s-molinari
Thanks Scott;
That would require a lot of logic duplicates and maintaining states and etc.

In my case, the logic is the same, it’s just the UI presentation that needs to be more customed.

Easiest way is to do Desktop-first and let UI framework do rearrangement
More work, is to do Mobile-first and then Developer creates different CSS for flexibility between the two.
More time consuming, would be two templates with custom CSS.
And I like to see which one is the most popular among developers using Quasar.

[s.molinari]

Agreed, there would be some duplication, but in the world of Quasar, Vue and SFCs, it would only be the composition being different in the end. It might also be my lack of understanding of how design can work, but any decent sized web app I’ve seen always seems to offer a totally different mobile to desktop experience. In other words, simply “rearranging” the UI to fit mobile can go only so far. I too would be interested in others’ practices, especially those working on larger enterprise type of web sites, where users are expected to interact a lot.

Scott

[Ben Hayat]

That’s why I mentioned three methods of going about it.
The third one offers a total customization for either platform, which means some components may not even surface in Mobile or the DataTables have less columns and etc. In the third option you get to redesign the mobile from ground up and share data with the desktop.
This is suited best for one code (meaning code logic) for all platforms.

However, if you plan to have “Native”, then it’s a different ballgame. I have tested many sites, where they don’t sent you to another site for mobile. That was popular before the responsiveness came along. However, 90% do it the easy way, Desktop-First.

[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