How do you make a design that looks good on all devices?
Short translation of the article “Why is it so Easy to Get“ Mobile First ”Wrong?” with advice from the creative director of Crowd Favorite on a single design concept for all devices.
Many developments are limited by budget and deadline, and therefore represent a series of trade-offs that companies resort to to keep costs down. For example, the so-called mobile-oriented design is just an effective solution, but not at all ideal.
If you can design a product for one device and it works at the very least on others, it is often the right way to go this route, as it will save you a lot of time and money. In short, mobile-centric design is a trade-off solution for getting acceptable results on a tight budget, not a cornerstone of cross-platform interfaces. But at the same time, it will turn out better if it is based on several fundamental principles.
Don’t stop too early
The desktop version of your design doesn’t have to look like just a smudged version of the mobile interface on the big screen. Make it relevant to the context, even if it requires significant changes to many of its elements.
Don’t forget about the user
Users of your smartphone app do most of the action in portrait mode using their thumb, so it makes sense to place functional elements in the middle and bottom of the screen. On a tablet, they will often be interacted with with both hands, which gives more opportunities for placing additional functionality.
On desktop computers, people use a mouse or trackpad, they have a large screen that is capable of displaying richly detailed functional elements, and they expect to see them at the top of the screen.
Focus on functionality, not looks
Demanding users expect the mobile version to offer the full range of capabilities available in the desktop version. They will not forgive if something can be done on a computer, but not on a smartphone.
This is the core value of mobile-centric design.
Pay attention to context
If you are developing an interface for a program that allows you to monitor a nuclear power plant, it is logical to assume that it will be used in the workplace and on the desktop computer. Then it is quite justified to make the design focused specifically on desktops.
This does not mean that the mobile version can be just a stump of a desktop version with very limited functionality, but if the expected use clearly and obviously leans towards a particular device, at the development stage you need to boldly focus on it, and not try to simply extrapolate the interface design.
Don’t be afraid of striking differences in UI design
In some cases, it is perfectly normal for an interface to look and work completely differently on a mobile device than on a desktop computer, if this is appropriate in a particular case and can really help users.
Output: The minimalism of mobile-centric design is not the solution to all problems, but if you do it, do it wisely!