Surely you've also had a headache when the website layout you worked hard to code on your desktop "falls apart" when viewed on your phone, right? It's not just a story about superficial aesthetics, but it's also silently "killing" your SEO rankings on search engines. But don't worry too much, with just a few basic lines of code, I will show you how to design a responsive website with Media Query thoroughly, with SEO standards and closely following mobile-first thinking.
Instructions for using Media Query to have a "standard, no need to adjust" responsive website
Using Media Query is a core technique in CSS3 that helps the browser check the device's Viewport size, thereby applying the corresponding CSS code to adjust the display interface to best suit.
To get started with this technique, you need a solid foundation in web structure. If you are new and not familiar with basic tags, Learn basic HTML CSS for beginners is a mandatory stepping stone before touching more complex responsive concepts. Once you have a solid foundation, using Media Query will become extremely simple and logical.
What is Responsive Web Design that every developer must know?
What is responsive web design? This is a method of web design and development so that the user interface (UI) automatically responds, scales, and changes layout to fit all different device screen sizes.
At Pham Hai, we always emphasize to our interns that being responsive is not about creating 3 different websites for phones, tablets and PCs. That is, you use the same HTML source code, but use CSS to "shape" the interface. The ultimate goal is to bring the most consistent and perfect user experience (UX), whether they are holding a tiny iPhone or sitting in front of a 32-inch Ultrawide screen.
Basic Media Query syntax: min-width, max-width and what you need to know
Cú pháp cơ bản của Media Query thường bắt đầu bằng từ khóa @media, kết hợp với các điều kiện như min-width (chiều rộng tối thiểu) hoặc max-width (chiều rộng tối đa) để làm điểm kích hoạt các đoạn mã CSS bên trong.
Hiểu đơn giản, bạn đang ra lệnh cho trình duyệt: "Này, nếu màn hình rộng từ 768px trở lên (min-width), hãy áp dụng đoạn code này cho tôi". Ngược lại, với max-width, bạn đang giới hạn: "Đoạn code này chỉ chạy khi màn hình nhỏ hơn hoặc bằng 768px thôi nhé". Việc kết hợp nhuần nhuyễn giữa min-width và max-width chính là chìa khóa để bạn kiểm soát hoàn toàn giao diện trên mọi thiết bị di động hay máy tính bàn.
The most popular breakpoints today: Don't guess, use these numbers!
Popular breakpoints in responsive design today are often standardized around the following milestones: 320px (small phones), 768px (tablets), 1024px (laptops) and 1440px or more (large screens).
During my career, I see many people often "guess" the size to set a breakpoint. This can easily cause display errors on new devices. Up to now, you should stick to the following standard table to optimize your responsive website with the best SEO standards:
| Device type | Breakpoint (min-width) | Practical application |
|---|---|---|
| Phone (Mobile) | 320px - 480px |
1-column display, large font, easy-to-touch buttons. |
| Tablet | 768px |
Display 2 columns, hamburger menu. |
| Computer (Desktop) | 1024px trở lên |
Multi-column display, full horizontal menu. |
Media Query example: Let's look at the actual code for easy visualization
A typical Media Query example is converting a layout from the default 1-column layout on a phone to a 3-column grid on a desktop screen using modern properties like CSS Grid or Flexbox.
When doing real projects, especially when web design with wordpress, you will have to continuously write Media Query to align content blocks. Even if you want to improve your skills and manually code a wordpress theme from a to z without depending on the page builder, writing proficient responsive code is a vital skill.
Below is a sample code that is extremely easy to understand:
/* Mặc định cho Mobile (1 cột) */
.container {
display: flex;
flex-direction: column;
}
/* Khi màn hình lớn hơn 768px (Tablet trở lên sẽ thành 2 cột) */
@media screen and (min-width: 768px) {
.container {
flex-direction: row;
}
}
Why does Google "favor" responsive websites? Direct benefits to SEO
The benefit of Responsive Web Design for SEO is that it helps Googlebot easily crawl and index with a single URL, while completely avoiding penalties for duplicate content errors.
Trước đây, nhiều người làm web kiểu m.domain.com cho mobile và domain.com cho desktop. Cách này giờ đã quá lỗi thời và cực kỳ hại SEO. Google hiện tại áp dụng chính sách ưu tiên lập chỉ mục thiết bị di động (Mobile-First Indexing). Nếu trang của bạn không responsive bằng Media Query, thứ hạng của bạn chắc chắn sẽ "chạm đáy".
Improve user experience (UX) - Golden factor in Google's eyes
Smooth user experience (UX) on mobile devices helps retain visitors longer, without having to zoom in and out to read text, this is a positive signal that Google uses to evaluate website rankings.
Think about it, are you annoyed when you're surfing your phone looking for information and you come across a website with tiny text and buttons stuck together? Surely you will exit immediately. A well-optimized user interface (UI) using Media Query will completely solve this pain, bringing maximum comfort to readers.
Increase page loading speed on mobile devices
Using Media Query properly helps the browser only load and render the necessary resources and images for each screen size, thereby significantly contributing to optimizing page loading speed.
In order for your website to achieve "altar" speed, besides writing neat CSS, you should combine minify css html js wordpress to compress the file size to the lowest level. Fast page loading speed plays a key role when you want to optimize core web vitals wordpress - a set of user experience metrics that Google is extremely strict about today.
Reduce bounce rate and increase time on page
When the interface is intuitive and easy to operate on the phone, users will tend to read more articles and click on internal links, helping to reduce bounce rate and effectively increase time-on-page.
These behavioral indicators are iron evidence sent to Google that: "My content is useful and users really like it." And your reward is the top positions on the search results page.
Mobile-First: “Guideline” for modern responsive design
Thiết kế mobile-first là phương pháp ưu tiên viết mã CSS cho màn hình điện thoại trước tiên (mặc định), sau đó mới dùng Media Query với thuộc tính min-width để mở rộng giao diện cho các thiết bị lớn hơn.
What is mobile-first design? Why is it so important?
What is mobile-first design? That is the mindset of starting to sketch and code from the most compact interface, helping to eliminate redundant details and focus entirely on core content, in line with current web browsing trends.
With experience implementing hundreds of projects at Pham Hai, I realize that more than 80% of current traffic comes from smartphones. If you design for a large screen first and then make it smaller, you are going against the habits of the majority of users. Mobile-first thinking makes your source code lighter on phones, because weaker mobile browsers don't have to carry dozens of lines of complex CSS code for desktops.
Instructions on the steps of responsive design according to the mobile-first method
Hướng dẫn thiết kế responsive mobile-first cơ bản gồm 3 bước: viết CSS mặc định cho mobile không cần @media, dùng Media Query min-width cho tablet, và cuối cùng là thêm breakpoint cho desktop.
Bước 1: Bạn viết CSS bình thường, giả định màn hình hiện tại chỉ rộng cỡ 320px. Các khối nội dung thường xếp chồng lên nhau (1 cột).
Bước 2: Cấu hình Viewport trong thẻ <head> của HTML: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Bước 3: Bắt đầu chèn các breakpoint min-width để tinh chỉnh khi màn hình rộng ra.
Hiện nay, với sự hỗ trợ của công nghệ, bạn thậm chí có thể tìm hiểu Cách viết theme wordpress bằng ai để các công cụ trí tuệ nhân tạo tự động tạo ra bộ khung CSS mobile-first chuẩn xác chỉ trong vài phút, giúp tiết kiệm rất nhiều thời gian code tay.
Quick comparison between Mobile-First and Desktop-First
Điểm khác biệt lớn nhất là Mobile-First dùng min-width để nâng cấp giao diện từ nhỏ lên lớn, trong khi Desktop-first dùng max-width để thu hẹp và ẩn bớt các thành phần từ màn hình lớn xuống màn hình nhỏ.
Desktop-first used to be the standard many years ago. However, this method causes the mobile phone to have to download all of the computer's CSS before reading the hide command, wasting resources and slowing down the web. Switching to a Mobile-first mindset means you're optimizing performance from the ground up, helping mobile devices load pages as smoothly as possible.
Mastering and applying responsive website design with Media Query does not just stop at making the website more beautiful. In an era where Google evaluates everything through a mobile lens, this is a must-have skill for your project to survive and thrive. Start changing your coding habits to mobile-first today, you will see a clear improvement in both performance and keyword rankings.
Have you applied mobile-first thinking and standard breakpoints to your website project? Please share your practical experience or any code that is causing you problems in the comments section below, I will directly take a look and support you right away!
Note: The information in this article is for reference only. For the best advice, please contact us directly for specific advice based on your actual needs.
