Design for mobile first
When most customers encounter your brand for the first time on their phones, the order of design is no longer just a technical detail.
Mobile-first design is a strategy that builds the interface starting from the smallest screen and then gradually expands to larger screens. This approach requires selecting core content and actions from the beginning, rather than trimming down from the desktop version later. For most commercial websites in Vietnam today, this is a reasonable starting point because Google ranks based on the mobile version, and customers often encounter the brand for the first time on their phones.
- retail, F&B, travel, content website where customers primarily access via mobile
- most traffic sources come from social media ads or mobile searches
- product is a complex work tool, users mainly sit at a computer
- beautiful design on a computer then adapted for mobile
The short answer is: for most commercial websites, designing for mobile first is the right starting point, not because of trends but because that is where your customers truly engage. The more practical question is: do your products and customer segments belong to the few exceptions?
Mobile-first means what
Mobile-first design, advocated by Luke Wroblewski in 2009 and later published as a book in 2011. The core principle: start from the smallest screen, the most restrictive conditions, and then gradually expand. It is not about scaling down from the desktop version.
This approach connects to a broader principle called progressive enhancement: building a foundation for the most limited cases first, then adding complexity when screens and conditions allow. Clients may use old phones, have weak networks, be outdoors, use one hand, or be interrupted at any moment. These are the conditions the design must withstand before worrying about beautiful effects on a 27-inch screen.
You need to clearly differentiate: responsive design is a technique that allows a website to automatically resize according to the screen. Mobile-first is a strategy, determining the order of implementation. Both work together but do not replace each other.
The practical reason to start with mobile.
There are two significant reasons beyond the fact that most customers use their phones.
First, Google uses mobile-first indexing: the mobile version of the page is what Google reads to determine search rankings. This is the default for Google for all websites. This means that if your mobile version lacks content, loads slowly, or is difficult to use, it directly affects your visibility on Google, regardless of how beautiful the desktop version is.
Second, the constraints of small screens serve as the best content filter. When space is limited, not everything can be kept. You must choose: which content is truly essential, which actions should customers take first. The result is that the desktop version is also more concise and clearer, as it has already gone through that filter.
When to reassess the focus
Prioritize mobile first when the website serves retail, F&B, tourism, content, consumer services, or when most traffic sources come from social media ads and mobile searches. This is a reasonable default for most small and medium enterprises in Vietnam.
Reconsider the focus when the main product is a complex work tool: spreadsheets with many columns, drag-and-drop operations, lengthy data entry, multi-step processes where users actually sit at a computer to work. In such cases, the design focus should align with how customers truly use it, not mechanically imposed.
Regardless of which scene is prioritized, the remaining versions must still be usable. Do not completely abandon them.
Common errors when working in reverse direction
- Beautiful design on a computer that is then crammed into mobile: content breaks, buttons overlap, layout loses order.
- Place content and call-to-action buttons too deep; customers on mobile must scroll a long way to see them.
- Heavy images that are not optimized slow down mobile downloads, especially on weak networks or unstable mobile connections.
- Small clickable areas, placed too close together, lead to continuous misclicks.
- Menus and forms are not designed for one-handed operation; customers must use both hands or zoom in on the screen.
- Forget that the mobile version is the Google version used for ranking, so editing the desktop version without checking the mobile version.
Mobile-first design is not about shrinking content. It is about making decisions on what is truly important.
Luke Wroblewski, Mobile First, A Book Apart, 2011
The viewpoint of Sinh Vũ
Sinh Vũ designs the user experience and interface with a responsive approach, prioritizing mobile for most projects as this is where customers first encounter the brand. In the content strategy phase at the beginning of the project, Sinh Vũ works with clients to identify the core elements that need to be prioritized on smaller screens first. This is not solely a technical task, as deciding what to prioritize is a business decision.
For some digital products that require heavy computer operations, Sinh Vũ recalibrates the focus based on how customers actually use them, rather than applying a mechanical formula. The principle is: understand the true behavior of customers first, then decide where to start the design.
Decision checklist
Topic: Designing for mobile first: should you or not?. Sinh Vũ guide, sinhvu.com
Select each item you find appropriate, then print or save as PDF to take with you.
If you have marked most of the signs above, this is the time to discuss in more detail. Sinh Vũ can help you review and propose a direction.
References
Understanding mobile-first indexing, Google Search Central (high reliability). Mobile First, Luke Wroblewski, A Book Apart, 2011 (high reliability). Mobile First, Interaction Design Foundation (high reliability).
Frequently asked questions
Is there a difference between responsive design and mobile-first design?
Yes, and this is the most commonly misunderstood point. Responsive design is a technique that allows a website to adapt to screen sizes. Mobile-first design is a strategic decision that starts from smaller screens. You can use responsive techniques while still designing in the opposite direction, meaning creating the desktop version first and then scaling down. These two concepts work together but do not replace each other.
If my product is primarily used on computers, should I still prioritize mobile?
It is not necessary to enforce strict machinery. If the product is a complex work tool, with spreadsheets and deep operations that users actually sit at a computer to work on, then the design focus should reflect how customers really use it. However, regardless of which screen is prioritized, you must ensure that the other version is usable and not completely neglected. And remember that the mobile version still affects search rankings.