The scariest thing is a design that breaks on smartphones—The mobile-first mindset
“It looks perfectly fine on a PC, so why aren't we getting any inquiries?”
If you open the site on a smartphone in this state,
—the text is too small to read,
the images are overflowing,
the buttons are too small to tap,
and the layout is broken to begin with
—such cases are still not uncommon today.
According to Google data, web searches from smartphones in Japan account for over 60% of the total. For BtoC services (salons, restaurants, chiropractic clinics, sole proprietors, etc.), this ratio is even higher, and it is not rare for 70-80% of site visits to come from smartphones.
In other words, even if you create a beautiful design on a PC, if it breaks on a smartphone—the majority of visitors only see a “broken page.” No matter how carefully you craft your content, it is ruined at the very entrance.
Last time (Part 8), we talked about photos. This time, we will talk about the “foundation for delivering the pages you worked so hard to create correctly”—the mobile-first mindset.
Table of Contents
Why “breaking on mobile” is fatal
What is mobile-first?
6 points you must check on a smartphone
Common display breakage patterns and how to fix them
Tap-friendly design—Smartphone-specific interaction design
CSS basics for optimizing smartphone display
5 common mistakes in mobile optimization
How to check your mobile display right now
Summary
Why “breaking on mobile” is fatal
A "broken design" is not just a problem of looking bad.
Here is a breakdown of the impact it has on visitors.
1. Unreadable or unusable
If the text is too small, people lose the desire to read it. If buttons cannot be pressed, they cannot take action. If the layout breaks and the order of information is scrambled, the intended message will not get across.
2. The impression of being "unmanaged"
A page with a broken smartphone display is a sign that "no one has checked it on a smartphone." The impression that "this service does not pay attention to details" directly damages trust in the service.
3. Lower Google rankings
Since 2018, Google has adopted mobile-first indexing. When Google evaluates a page, it prioritizes the smartphone display. Pages with low display quality on smartphones risk having their search rankings lowered.
In other words, mobile optimization is not a "visual issue" but a "problem directly linked to attracting customers."
What is Mobile-First?
Mobile-first is a design sequence and philosophy of "thinking about the smartphone design first and then expanding it to the PC."
Previously, it was common to "create the PC design first and then adjust it for smartphones" (this is called "graceful degradation").
However, since smartphone browsing has become mainstream, "mobile-first"—designing for smartphones first and then adapting to larger PC screens later—is now recommended.
Why is the order important?
When starting from a PC and scaling down to a smartphone, you inevitably end up trying to cram an "overstuffed design" into a small screen. Smartphone support becomes an afterthought for a design that has too much information or is too complex.
When you start from a smartphone, you think from the beginning about the "amount of information and layout that can be conveyed even on a small screen." As a result, it is easier to create a simple, high-quality design that works on both smartphones and PCs.
Relationship with "Responsive Design"
Responsive design is a web design technique where the layout automatically changes according to the screen size. You design with CSS so that one HTML file displays appropriately on PCs, tablets, and smartphones.
Mobile-first is a "design philosophy," while responsive design is an "implementation technique." Currently, it has become standard to practice these two as a set.
6 points you must check on your smartphone
Before diving into theory, I will list exactly what you should check.
While opening your site on a smartphone, please check the following six points.
Check 1: Is there any horizontal scrolling?
A page that can be scrolled horizontally is a sign that the smartphone display is broken.
Content exceeding the screen width, elements with fixed widths, or images overflowing their parent elements—these are the causes.
Open the page on your smartphone and swipe horizontally to ensure the screen does not move. If it moves, the display is broken.
Check 2: Is the text 16px or larger and easy to read?
On your smartphone screen, try reading the body text as if you actually intended to read it.
If you feel like you have to squint or that it is hard to read without zooming, the font size is too small. As mentioned in the fourth installment (Typography), the standard for body text is 16px or larger.
Check 3: Is the CTA button easy to tap with your thumb?
Hold your smartphone in one hand and check if you can naturally tap the CTA button with your thumb.
A state where it is 'too small and hard to press' or 'you hit the adjacent element when you meant to press the button' results in lost opportunities. A height of 48px or more with sufficient surrounding margin (8px or more) is the guideline.
Check 4: Are images contained within the screen?
Check if images are overflowing horizontally or if they are too vertically long, occupying most of the screen.
If 'img { max-width: 100%; }' is set in your CSS, you can prevent images from overflowing the screen width. If you haven't set it yet, consider adding it immediately.
Check 5: Is the form easy to use?
If there is an inquiry form or reservation form, try entering information into it on your smartphone.
Input fields that are too small, pages that zoom in and become hard to see when typing, or too many items that make you want to give up halfway—these lead to form abandonment.
Simply setting the font size of input fields ('<input>') to 16px or larger will prevent Safari's automatic zooming.
Check 6: Is the navigation easy to use?
Check how the menu, which is side-by-side on a PC, is displayed on a smartphone.
If it is a hamburger menu (≡), check if it opens and closes correctly when tapped. Problems such as the menu not opening, not closing, or the tap area being too small occur frequently.
Common layout breakage patterns and how to fix them
We will organize common layout breakage patterns that actually occur and how to deal with them.
Pattern 1: Horizontal scrolling occurs
Cause: There is an element with a fixed width (e.g., `width: 800px`), or `overflow: hidden` is not set.
How to fix:
/* 全体に適用するリセット */
* {
box-sizing: border-box;
}
/* 横スクロールを防ぐ */
body {
overflow-x: hidden;
}
/* 画像が画面幅を超えないようにする */
img {
max-width: 100%;
height: auto;
}Pattern 2: The PC layout is shrunk as-is, making the text small
Cause: The viewport meta tag is not set.
Check if the following is included within the `<head>` of your HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without this, smartphone browsers will shrink the PC display, making everything look small. While this is set automatically in many CMS platforms like WordPress, it may be missing in older themes or hand-coded HTML.
Pattern 3: A 2-column layout remains 2 columns even on a smartphone
Cause: There is no setting in the media query to switch to 1 column.
It is standard practice to change a 2-column (side-by-side) layout on a PC to a 1-column (vertical) layout on a smartphone.
/* PCでは2カラム */
.container {
display: flex;
gap: 24px;
}
.column {
width: 50%;
}
/* スマートフォンでは1カラムに切り替え */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.column {
width: 100%;
}
}Pattern 4: A table overflows horizontally
Cause: `<table>` elements tend to have a fixed width and easily overflow on smartphone screens.
How to fix: Wrap the table in a container with `overflow-x: auto`.
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Alternatively, set CSS to convert the table into a vertically stacked list on smartphones.
Pattern 5: Font size remains as large as it is on a PC even on a smartphone
Even if headings are set to 48px on a PC, they may be too large on a smartphone, causing the layout to break.
h1 {
font-size: 48px;
}
@media (max-width: 768px) {
h1 {
font-size: 28px;
}
}The guideline for heading sizes on smartphones is 60–70% of the size used on PCs.
Design that is easy to tap—Operation design specific to smartphones
Smartphone operation is based on "finger taps" rather than "mouse clicks." This difference has a major impact on design.
Tap target size
The average contact area of a human finger is about 8–10mm. Buttons or links smaller than this create an experience where users "miss the target when they intended to press it."
Guideline: The minimum size for tappable elements is 44×44px or larger (a recommended value shared by Apple's HIG and Google's Material Design).
In practice, text links, icon buttons, and navigation items are the points most likely to become too small.
Spacing between tap elements
If buttons or links are crowded together, it becomes easy to tap unintended elements.
It is recommended to ensure a minimum margin of 8px between adjacent tappable elements.
Do not rely on "hover"-based design
In PC design, we often see designs where "menus expand on hover" or "explanatory text appears on hover."
However, the concept of "hover" does not exist on smartphones. It is a binary choice of either tapping or not tapping. Since designs that rely on hover do not function on smartphones, it is necessary to design in a way that delivers information in a format that can also be confirmed on smartphones.
Input form usability
When entering information into forms on a smartphone, the following settings significantly affect usability.
Properly set the `type` attribute of `input`
<!-- 電話番号入力欄は数字キーボードが開く -->
<input type="tel" name="phone">
<!-- メールアドレス入力欄は@が出やすいキーボードが開く -->
<input type="email" name="email">
<!-- 数値入力欄は数字キーボードが開く -->
<input type="number" name="quantity">By simply setting the appropriate `type`, the keyboard that is easiest for the user to input with will be displayed automatically.
Set form font size to 16px or larger
If the font size of `<input>` or `<textarea>` is less than 16px, iOS Safari will automatically zoom in on the page. You can prevent this by setting the `font-size` to 16px or higher.
Basics of CSS for optimizing smartphone displays
I will summarize more specific CSS settings. Applying these to all pages will resolve many display issues.
Minimal reset CSS
/* ボックスサイズの統一 */
*, *::before, *::after {
box-sizing: border-box;
}
/* 横スクロール防止 */
html, body {
overflow-x: hidden;
}
/* 画像の最大幅制限 */
img, video, iframe {
max-width: 100%;
height: auto;
}
/* 本文の行間・フォントサイズ基準 */
body {
font-size: 16px;
line-height: 1.75;
}
/* タップ要素の最小サイズ */
a, button, input, select, textarea {
min-height: 44px;
}Content width and margin settings
/* コンテンツの最大幅を設定し中央揃えにする */
.container {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px; /* スマートフォンで左右に余白を確保 */
}
/* スマートフォンでは余白を少し増やす */
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
}Media query breakpoints
/* スマートフォン向け（〜767px） */
@media (max-width: 767px) {
/* スマートフォン専用スタイル */
}
/* タブレット向け（768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
/* タブレット専用スタイル */
}
/* PC向け（1024px〜） */
@media (min-width: 1024px) {
/* PC専用スタイル */
}5 common mistakes in mobile optimization
Mistake 1: Publishing without checking on anything other than a PC
Releasing a design as soon as it is finished without checking it on a smartphone is the most common mistake.
It is necessary to incorporate "smartphone device testing" as a mandatory step in the production process. Since displays can differ between iOS and Android, checking on both is ideal.
Mistake 2: Relying only on the "smartphone simulation" in browser developer tools
Chrome and Safari developer tools have features to simulate smartphone displays. While convenient, they do not always match the display on actual devices.
In particular, font rendering, tap responsiveness, scrolling behavior, and Safari's zoom behavior can only be verified on actual devices. Make it a habit to perform final checks on real hardware.
Mistake 3: Trying to add smartphone support later
While it is possible to support smartphones after finishing the PC version, the later you add it, the more complex the fixes become.
Designing with the smartphone view in mind from the start reduces rework. Making "building while checking on a smartphone" a routine will lower the final man-hours required.
Mistake 4: The hamburger menu button does not function
The hamburger menu (≡) is commonly used for smartphone displays, but it is a part where issues like "not opening," "not closing," or "background not scrolling after closing" often occur due to incomplete JavaScript implementation.
If you are using a theme or CSS framework, it often works correctly, but if you have customized it, operational testing is mandatory.
Mistake 5: Not checking if Google considers the site "mobile-friendly"
You can check your mobile compatibility based on Google's evaluation criteria by using the free "Mobile-Friendly Test (Google Search Console)" provided by Google.
If there are any issues, it will tell you specific points to fix. By making it a habit to re-check after making adjustments, you can minimize the impact on your search rankings.
How to check your mobile site right now
Check 1: Open your site on an actual smartphone right now
Open your site's URL on an iPhone or Android device.
Check these three points: Does it scroll horizontally? Is the text easy to read? Are the CTA buttons easy to tap? If there is even one issue, it is a high-priority improvement.
Check 2: Use the Google Mobile-Friendly Test
Search for "Mobile-Friendly Test Google," access the site, and enter your site's URL.
Check if it is determined to be "mobile-friendly," and if there are any issues, list them out.
Check 3: Use the Chrome Developer Tools smartphone view
Open your site in Chrome on your PC and press the F12 key to open the developer tools. Click the "Toggle device toolbar" button (the smartphone and tablet icon) to check how it looks on various smartphone screen sizes.
Use this to supplement checking on an actual device.
Check 4: Check if the viewport meta tag is set
Open the page's HTML source (right-click in the browser -> View page source) and check if `<meta name="viewport"` is included.
<meta name="viewport" content="width=device-width, initial-scale=1.0">If this line is missing, add it immediately. This may resolve fundamental issues with smartphone display.
Check 5: Check if `img { max-width: 100%; }` is set in your CSS
Check your site's CSS file to see if a maximum width limit for images is set.
If it is not set, add it. Without this, images will exceed the screen width and cause horizontal scrolling.
Summary
A design that breaks on smartphones is not just a visual issue.
When more than half of your visitors are coming from smartphones and they only see a 'broken page,' it is a loss of customer acquisition opportunities and a loss of trust.
Let's summarize what we discussed today.
Over 60% of web access in Japan is from smartphones. This is even higher for BtoC.
Broken smartphone displays cause three problems simultaneously: 'unreadable, unclickable, and untrustworthy.'
Google prioritizes smartphone displays for evaluation. Mobile compatibility also affects search rankings.
Mobile-first is the philosophy of 'designing for smartphones first.'
6 points to always check: horizontal scrolling, text size, tap-friendliness, image fit, form operation, and navigation.
Many problems can be solved just by setting up minimal CSS (box-sizing, overflow-x, img max-width, viewport meta).
Three things you can do starting today.
Open your site on an actual smartphone right now and check these three points: horizontal scrolling, text size, and CTA tap-friendliness.
Check if the HTML source has <meta name="viewport" content="width=device-width, initial-scale=1.0"> set.
Check your site URL with the Google Mobile-Friendly Test and list the issues.
Next time, we will cover 'If your service page is weak, nothing will sell—How to create a compelling structure.' Now that the mechanism for attracting customers is in place, we will finally enter the design phase for the 'service sales' page. The service page is where visitors decide to 'sign up.' If the structure here is weak, no matter how many people visit, it will not lead to purchases or applications. Next time, I will talk about the core of this.
If you like or follow me, it will be easier for you to receive the next article. If you'd like, please do.