3

With the huge explosion of mobile devices and addition of HTML5/CSS3, there seems to be a shift towards "responsive" designs (i.e., adapting to smaller screen sizes) which seems to be achieved using CSS3's Media Queries.

My question is, given the current need of adapting to both desktop and mobile, is it common practice to actually organize two versions of your website (one for desktop and one for mobile)? Or is there just one version with different css files for targeting different devices and screens?

Handling just cross-browser (ie6, ff3, opera9, etc...) HTML4/5, CSS2/3 was already hard enough, but now we're expected to handle cross-device (phone, tablet, etc...) as well, so my assumption is company's would create a separate project for mobile and redirect based on the user agent, but this is just a guess.

Improve this question

1 Answer 1

Reset to default
3

Having two versions is common, but usually it's one version for touch (aka "mobile") and one version for mouse. You end up offering very different UI flows based on what the input mechanism is.

Be careful about server-side redirection based on user agent because it's easy to get it wrong. When redirecting, pay attention to these things:

  1. Always allow the user to change which version of the site/app they're looking at. Remember this setting.
  2. External links should never redirect you to a generic landing page.
  3. All content should be presented in both the desktop and mobile sites.

Just as was the case with multi-browser support, feature detection is more robust than user agent detection. For example, with windows 8 we can expect desktop users to start switching between metro (touch) and desktop (mouse) on-the-fly. What page do you present them?

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.