1

I have an html5 application that consists of two different interfaces. The desktop interface demands a minimum of 900 pixels in width to function properly. The mobile version is built in an entirely different manner to continue the same functionality in a mobile friendly way. Each view receives and uses the same data in the exact same way to make the app easily interchangeable between mobile and desktop.

My go-to method is to track the users screen width from page load and before/after screen resizing. If the screen width is smaller than the 900px threshold, the user will be automatically re-directed to the mobile version of that view they are currently in. Is this process bad practice? Will it hold up as the app becomes more robust and if not, what is a suffice method of handling a desktop/mobile app that cannot utilize css3 responsive design standards.

Improve this question
3
  • By directed do you mean you have to navigate them to a different URL or load a different page, or does a new view shift into place via javascript or something?
    – DasBeasto
    Commented Nov 8, 2017 at 14:15
  • Sorry for not specifying that. They would be directed to the mobile router which would route them to the view that correlates to their current desktop view. So their would be additional page loading
    – Colin Rickels
    Commented Nov 8, 2017 at 14:46
  • It's now common practice to reuse the same DOM with different styling explicitly to avoid reloading a mobile-specific view. Is there a possibility to do this, or is the project too mature?
    – msanford
    Commented Feb 6, 2018 at 21:48

3 Answers 3

Reset to default
1

It isn’t necessary to use a different website url for mobile screen sizes. Simply hide and reposition elements to turn the page into mobile-friendly on certain screen size (or whatever method you use to determine device)

This is easier to address before you start, but the simplest solution now is to have both views in the app, with one shown and the other hidden depending on device.

Improve this answer
0

The best answer to this strongly depends on the workflow of your users. Can they accomplish their task, albeit with greater difficulty, on a small screen, or does the application cease to function altogether? Is there a need for your mobile users to access the full featureset on the go? Or would it be acceptable if a mobile user didn't have access to a certain feature?

Either way, I would definitely use a better method than simply screen-size before redirecting the user. It wouldn't be unexpected for a user to open a website in a smaller screen, or opening the app with their device tilted to the side.

If your desktop app can't support media queries, design "desktop first". That is, a desktop that ignores media queries will just use the desktop-design CSS. A mobile browser which does support media queries will override the desktop styles with the mobile ones.

Improve this answer
0

In this case that your app cannot utilize CSS 3 responsive design standards, Your solution is good enough. Some time straight forward solutions are the best.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.