Ionic best practice: Responsive Design vs separate templates for Mobile/Tablet/Web

Hey guys,

I am currently outweighing the pros/cons of having a single responsive design for a Website/mobile/tablet app, vs having separate templates for each. I’m almost leaning toward separate templates since I would want full control over the design and not have a huge template with a bunch of conditional show/hide logic. Additionally navigation would be substantially different.

Is there an Ionic best practice for having separate templates for different form factors such as web/Mobile/Tablet? any things I should be aware of in making the decision?

Thanks,
Devin

Bump! I’m working on a hybrid phone/tablet app, and curious what solution other developers have come up with it to overcome this?

maybe one option is maybe a ternary statement for different templates based on window.innerWidth but that seems sorta icky.

.config(function($stateProvider) {
  $stateProvider
  .state('app.jobdashboard', {
    url: "/job/details",
    views: {
      'menuContent': {
        templateUrl: window.innerWidth < 500 ? "templates/job/dashboard.html" : "templates/job/dashboard-wide.html",
        controller: 'JobDashboardCtrl'
      }
    }
  });
})