6

I am currently working on a web based administration interface which has a lot of controls, such as sliders, check boxes, input fields, etcetera. The interface should work on desktops, tablets and mobile phones. It is important that the controls are kept at a reasonable size across all platforms so that they remain useful on all sorts of screens and when using different input methods.

The working hypothesis is to use some flavour of responsive design, based on CSS media queries floated elements and relative units for the layout. The problem arises when determining the size of the control elements and font sizes.

The vast number of different pixel densities and physical sizes of the screens makes this an interesting problem. As if it was not hard enough knowing what way to choose, some vendors are experimenting with the good ol' pixel measurement (px) and adopting new interpretations of it to be able to display current websites in some kind of readable way.

Given the current and future development of screens, devices, input methods and so fourth, how would one go about to tackle this problem? Is there a way to adjust font sizes for instance so that they seem to be of similar sizes across all mobile devices? Is this the way to go or is there any best practices to consider when dealing with this kind of questions?

Improve this question

2 Answers 2

Reset to default
9

Use the em unit of measurement. That way you can easily scale between various devices based on the base font size that you're using. That way you can achieve a lot of what you need in terms of sizes simply by changing the default font size with media queries.

Different devices have (or should have) different base font sizes with the default size order usually something like: computer < tablet < smartphone.

This is the method that Sencha Touch use to handle various devices and after a lot of research came to agree that this method makes the most sense.

Improve this answer
9
  • 2
    also start your design mobile > tablet > computer. There are lots of articles about this.
    – Igor-G
    Dec 6, 2012 at 16:21
  • 1
    Note: The em unit is a size relative to the default font size, thus making your UI and its elements relative to font size rather than to screen size.
    – kontur
    Dec 6, 2012 at 16:25
  • 1
    To clarify, @Igor-G is talking about the order of design, not the size. As in mobile -> tablet -> computer.
    – JohnGB ♦
    Dec 6, 2012 at 16:26
  • @kontur but you usually set your font size relative to your screen size, but in the proportion you want, with media queries.
    – JohnGB ♦
    Dec 6, 2012 at 16:27
  • 2
    @JohnGB I merely wanted to point out that em refers to font size, in contrast to pixels or length measurements, which refer to physical device size. Of corse you adjust the size of an em to different devices.
    – kontur
    Dec 6, 2012 at 16:30
0

Is this the way to go or is there any best practices to consider when dealing with this kind of questions?

I personally don't believe in a one-design-for-all-platforms-strategy, simply because:

  1. The way a user uses an application depends on the platform, so a design that works on one platform might be a usability disaster on the other.
  2. The intention of the user could be different on several platforms, for example on mobile devices it is more likely that a user wants to read information whereas the user uses a desktop environment to fill in forms.

You might have to think about wanting to have a one size fits all solution, even though it sounds nice right now.

Improve this answer
3
  • This depends on the site and the dev budget. I followed the followed the Nielsen vs. responsive school debate earlier this year and think each side has it's points, and sometimes Neilsen's 2 version approach is clearly favorable but when the budget is limited the responsive approach is often the only viable option.
    – obelia
    Dec 6, 2012 at 22:06
  • Be aware of the fact that developing a web interface for both mobile and desktop can be a real pain in the ass, it might take longer and be more expensive (man hours) than when developing both versions separately.
    – Thomas
    Dec 7, 2012 at 8:38
  • @Thomas: I do agree with you on some points, and if I had the privilege to choose I might have opted for another solution, but this is how the client wants it. I still think it might work out since a lot of clutter is supposed to be hidden on mobile platforms.
    – dotmartin
    Dec 10, 2012 at 7:31

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.