Mobile-First Design

มีสองวิธีในการเขียน Responsive CSS วิธีแรกคือ Desktop-First: ออกแบบสำหรับหน้าจอกว้างแล้วเขียน max-width Media Queries เพื่อลดขนาดลงสำหรับหน้าจอเล็ก วิธีที่สอง — และเป็นมาตรฐานสมัยใหม่ — คือ Mobile-First: ออกแบบสำหรับหน้าจอที่เล็กที่สุดก่อน แล้วใช้ min-width Queries เพื่อ เพิ่ม ความซับซ้อนเมื่อมีพื้นที่มากขึ้น

ทำไมต้อง Mobile-First?

ผู้ใช้ส่วนใหญ่อยู่บนโทรศัพท์ การเขียนสำหรับหน้าจอเล็กก่อนหมายความว่า Baseline ทำงานได้กับผู้ใช้ส่วนใหญ่โดยไม่ต้องเขียน Media Query เลย
Default ที่เรียบง่ายกว่า เนื้อหาแบบ Single Column แทบไม่ต้องการ CSS เลย การเพิ่ม Two-Column Layout สำหรับหน้าจอใหญ่ใช้แค่ Media Query เดียว การทำตรงกันข้าม — ยุบ Grid ซับซ้อนให้เป็น Single Column — ต้องเขียน CSS มากกว่าและผิดพลาดง่ายกว่า
เร็วกว่าบน Connection ช้า Browser มือถือบน Network ช้าดาวน์โหลดและใช้งาน Base CSS ทันที Desktop Enhancements จะถูกใช้เมื่อจำเป็นเท่านั้น
ตรงกับ Figma Workflow ทีม Design ส่วนใหญ่ในปัจจุบันเริ่มด้วย Mobile Artboard ก่อนสร้างขึ้นไป Mobile-First CSS ตรงกับ Workflow นั้น

รูปแบบ

/* Base styles — หน้าจอเล็ก ไม่ต้องการ Media Query */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Tablet ขึ้นไป: สลับเป็น Row */
@media (min-width: 420px) {
  .nav {
    flex-direction: row;
  }
}

/* Desktop ขึ้นไป: เพิ่มช่องว่าง */
@media (min-width: 700px) {
  .nav {
    gap: 2rem;
  }
}

สังเกต Progression: Default = แคบที่สุด แต่ละ Query ต่อเติมด้านบน

เห็นผลจริง

Preview Pane คือหน้าจอของคุณ ย่อหน้าต่าง Browser ให้แคว (หรือดูบนโทรศัพท์) เพื่อดู Mobile Base Layout เมื่อกว้างเกิน 420 px Desktop Enhancement จะเริ่มทำงาน

<nav class="nav">
  <a class="nav__link nav__link--active" href="#">Home</a>
  <a class="nav__link" href="#">Work</a>
  <a class="nav__link" href="#">About</a>
  <a class="nav__link" href="#">Contact</a>
</nav>
<main class="main">
  <h1 class="hero__title">Design for every screen</h1>
  <p class="hero__sub">Start small, build up.</p>
</main>

ที่ความกว้างแคว Nav Links จะเรียงซ้อนกันในแนวตั้ง — รูปแบบ Mobile ตามธรรมชาติ เมื่อ Pane กว้างเกิน 420 px Media Query Block เดียวจะสลับ Nav เป็นแนวนอนและเพิ่มขนาด Heading

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ออกแบบ desktop ก่อนแล้วค่อย “ย่อ” เป็น mobile ทีหลัง ทำให้ mobile กลายเป็นของแถมที่ดูอัดแน่น
ลืมว่า mobile-first หมายถึงออกแบบให้ใช้งานได้ดีที่สุดบนจอเล็กก่อน แล้วค่อย “เพิ่ม” ให้จอใหญ่

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ต้องมี 2 design” แต่ developer เขียน CSS แบบ mobile เป็นค่าเริ่มต้น (ไม่มี media query) แล้วค่อยเพิ่มกฎสำหรับจอใหญ่ขึ้นทีละขั้น (progressive enhancement)

💡 ตัวอย่างจากของจริง

Instagram ออกแบบ mobile experience เป็นหลักก่อนเสมอ เพราะ traffic ส่วนใหญ่มาจากมือถือ ส่วน desktop เป็นแค่เวอร์ชันขยาย