Split app by device app

Questions / Help
, ,
1

Hi,

My hobby website is used by wide device and smartphone.
The design for each device is very different and using responsive technic for those differences is complex.

I have a plug using the user agent adding to the conn a Boolean smartphone(true/false). And I can pattern match on the controller function to have a specific layout.

But it’s heavy. My controllers are fat, css and js are not adapted to the device.

Is there a better way ?

2

Probably it’s should be solved at fronted. What stack do you have for frontend? is there React or something?

3

Hi,

No frontend stack. SPA is a very big hammer only to adapt the html to the device.

4

Agree on that :slight_smile: so, my thoughts on that is write some wrapper around render function. so you don’t have to have multiple controller actions for same page.

5

“Responsive design” is largely about CSS - designing the site layout “mobile first” and using media queries to re-style for wider displays.

Responsive Design with CSS (code)

3 Likes
6

What are those devices?

It does sound like you need a responsive site - frameworks like Foundation make things easier and the book in Peer’s post above should help :smiley:

7

Hi,

Thanks for the answers, but responsive is not always the right answer, nor mobile first design.

I was more thinking about a condition in router.ex splitting my app in two. Something similar to browser / api pipeline

8

Why similar? What is preventing you from using a Scoped Route for “mobile”.

1 Like
9

Because it’s a different url.
For api, it’s ok to have a scope.

10

But you yourself have stated that

but responsive is not always the right answer, nor mobile first design

and when it isn’t, the usual (easier) solution is usually to go with different URLs typically split by domains www.wombatcoffee.com vs m.wombatcoffee.com.

Github seems to use the User-Agent request header to route the request, though it allows that to be overridden by posting a token to /site/mobile_preference which I guess creates a cookie that overrides the request header.

So as you can see using the same URL but not relying on “mobile first” responsive design can get a bit involved.

<form class="js-mobile-preference-form" action="/site/mobile_preference" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="blahblah==">
  <input type="hidden" name="mobile" value="false">
  <input type="hidden" name="anchor" class="js-mobile-preference-anchor-field">

  <button type="submit" class="switch-to-desktop" data-ga-click="Mobile, switch to desktop, switch button">
    Desktop version
  </button>
</form>

So we’re basically back to

A simpler hybrid solution could use the user agent on a (mobile first, responsive design) landing page to populate the links (/... vs /m/...) but everywhere else use separate URLs for the desktop and mobile versions.

2 Likes