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

**URL:** <https://forum.ionicframework.com/t/ionic-best-practice-responsive-design-vs-separate-templates-for-mobile-tablet-web/12817>\
**Category:** uncategorized\
**Created:** [November 17, 2014, 6:41pm UTC](https://forum.ionicframework.com/t/ionic-best-practice-responsive-design-vs-separate-templates-for-mobile-tablet-web/12817 "2014-11-17T18:41:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![djett](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/djett/32/10369_2.png) [@djett](https://forum.ionicframework.com/u/djett)\
**Post date:** [November 17, 2014, 6:41pm UTC](https://forum.ionicframework.com/t/ionic-best-practice-responsive-design-vs-separate-templates-for-mobile-tablet-web/12817/1 "2014-11-17T18:41:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![uxtx](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uxtx/32/90504_2.png) [@uxtx](https://forum.ionicframework.com/u/uxtx)\
**Post date:** [November 3, 2015, 7:16pm UTC](https://forum.ionicframework.com/t/ionic-best-practice-responsive-design-vs-separate-templates-for-mobile-tablet-web/12817/2 "2015-11-03T19:16:43Z")

</div>

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'
      }
    }
  });
})
```