Desktop Template & Mobile Template both in the same page?



  • 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



  • 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.



  • 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.



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



  • @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



  • @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.



  • @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 😉



  • @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?



  • @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.



  • @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… 🙂



  • 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


Log in to reply