Responsive CSS frameworks such as Bootstrap are great for creating web interfaces that look good on both desktop and mobile. But sometimes, we need even more separation between the two UIs and dedicated designs for each become necessary. This task shows how to manage multiple design interfaces on a single site and render the right one based on mobile vs desktop browsers. You can view the demo HERE. To see the different interfaces, visit the link from a mobile phone and a desktop browser.
The desktop UI is shown below:
The template can be found under the "views/desktop/index.mustache" file which is also shown here:
The mobile UI is shown below:
The template can be found under the "views/mobile/index.mustache" file which is also shown here:
The static assets (JS, images, CSS) are stored in the "public" directory with each UI division having its own folder: mobile and desktop. The directory structure is shown below with the mobile template shown referencing an image from the "public/mobile/images" folder:
The router file ("routes/index.js") determines which UI to render based on the "user-agent" string contained in the request headers. On line 8 below, we grab the user agent from the req object and check if it contains "iphone" or "android" (lines 14 and 17). If so, we return the template from the mobile directory. Otherwise, we return the desktop template: