0

I have developed a web application using node. Now I want to convert that site into a mobile version. Responsive design is likely not an option here since my site is pretty much like facebook which has a look of functionalities that could not be fit into a fluid grid without radically redesigning of the website. So my question is 1. where should my application register the type of devices that it is viewed on ? (front-end or back-end) And how(with examples preferably) ? 2. Do I have to rewrite all html templates and css to fit into a mobile browser? if so what are the best practices to tell node which template to render ? (with examples) ?

Thanks in advance.

Jeremy Huang
  • 211
  • 6
  • 13

1 Answers1

0

I would suggest you to render the same template for mobile or desktop. You will need to add few css classes to support small screen devices and you can toggle between them using mustache sections.

Eg:

<div class="nav-bar"><div style="padding-bottom: 4px;" class="{{^isMobile}}desktop-width mh-auto{{/isMobile}}{{#isMobile}}full{{/isMobile}}"></div>

Here if isMobile exists class will be full, else class will be desktop-width mh-auto

More details can be found here: http://mustache.github.io/mustache.5.html

And I would recommend bootstrap or any responsive frameworks to make your task easier.

You can use the below link to detect a device. Detecting a mobile browser

Answers for your questions: 1. You will have to check the type of browser using javascript and pass the hash(like {isMobile: true}check mustache) to the template so that the template knows which style to render. 2. So you don't need to rewrite your template. but you have to update your template to support small screen devices. And you can keep your back end code as it is.

Community
  • 1
  • 1
Abhilash Chelankara
  • 408
  • 3
  • 10