Desktop vs Mobile UI

Turbo 360
dkwon360
June 21st, 2020
0 points
View Demo

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.

Desktop UI

The desktop UI is shown below:

The template can be found under the "views/desktop/index.mustache" file which is also shown here:

Mobile UI

The mobile UI is shown below:


The template can be found under the "views/mobile/index.mustache" file which is also shown here:

Static Assets

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:

Routing

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:

Join Free

Join for free today and deploy your site in seconds


Already have an account? Sign in HERE