Design for Mobile First: 390px Layouts, Touch, and Chinese Text

Mobile-first means reprioritizing, not shrinking everything

If you scale a desktop page down, the text may get smaller while the information overload remains. Five navigation links wrap awkwardly, three table columns become unreadable, and an action button covers the article. Designing for mobile starts by deciding what matters most on a narrow screen, what can collapse, and what needs a different component.

I usually begin at a 390px viewport, then check 320px. The first reflects a common phone reading width; the second exposes long English terms, fixed widths, and minimum button sizes. Do not rely only on dragging a desktop browser window until it looks phone-sized. Check a real viewport and touch behavior.

Find the source of horizontal overflow

When a page slides sideways, do not immediately add overflow-x: hidden to the body. That can hide content the reader needs. Inspect elements whose scrollWidth exceeds their clientWidth. Common causes include fixed pixel widths, wide tables, unbroken URLs, pre blocks, absolutely positioned controls, and excessive padding.

Temporary outlines can make the offending element easier to spot:

* { outline: 1px solid rgba(255, 0, 0, .15); }

Remove that debugging rule afterward. Keep content containers within the viewport and let images scale with their width. Put code and tables that genuinely need more space inside their own horizontal scroll containers, rather than widening the whole page.

Let Chinese headings wrap without leaving an orphaned character

Chinese does not rely on spaces between words in the same way English does. A large font and narrow heading container can leave a single character on the final line. Start by adjusting the mobile font size and line height, then give the text enough usable width. Avoid a fixed heading height or hard-coded <br> to force two lines; a small edit to the title will break that solution.

Use overflow-wrap: anywhere as a fallback for long product names, email addresses, and URLs. Avoid applying word-break: break-all to every paragraph, since it can split English words at arbitrary letters. Test Chinese, English, and mixed-language headings.

Decide whether a table is a comparison or a list of records

A two- or three-column comparison can remain a table with its own horizontal scroll area; a sticky first column may help. A seven- or eight-column admin table is often better as grouped records on a phone, with “Field: value” pairs. Compressing eight columns into the viewport makes dates, categories, and statuses collide.

On desktop, set column priorities too. Keep the title and actions legible. Less important metrics can be shortened if a detail view still provides the full value. Dates must not overlap neighboring columns. Choose a table's minimum width from real content, not an arbitrary total.

Make touch controls usable without a mouse

A 20px icon can look tidy but be difficult to tap. Enlarge the clickable area and leave space between actions. Do not rely on color alone to communicate status or hide essential controls behind hover-only menus. Keyboard focus, screen-reader labels, and visible text should agree.

Use an appropriate input type for each form field. Put errors next to the field and move focus to the first error after submission. Test whether a small input font causes an unexpected browser zoom and layout shift when the field receives focus.

A practical test sequence

1. Open the page at 320px, 390px, 768px, and a desktop width.
2. Scroll from top to bottom and confirm the page itself never moves horizontally.
3. Use real examples with the longest heading, longest URL, widest table, and most action buttons.
4. Navigate and submit forms with a keyboard, checking that focus remains visible.
5. Increase system text size and confirm fixed-height containers do not clip content.
6. Load the page on a slow connection and check that image placeholders do not shift buttons.

Passing on mobile does not excuse a poor desktop layout. Return to a wide screen and check body line length and spacing; mobile fixes should not leave text stretched across the entire display. Next, address two of the heaviest first-screen resources with the image and font optimization guide.