Mobile-first design = สร้างเว็บไซต์สำหรับมือถือก่อน แล้วใช้ CSS media queries ควบคุมลุคบนจอใหญ่กว่า tablet ถึง desktop กล่าวคือ ใช้ media queries ทำให้ responsive (adaptive ต่อ screen sizes ต่างๆ)
ใช้ media queries เรียกว่า breakpoints ถ้าตัดสินใจ layout เปลี่ยนจาก mobile เป็น tablet ที่ screen width 800px สร้าง media query:
@media screen and (min-width: 800px) { /* Add Tablet styles here */ }800px = breakpoint แรก
ถ้า desktop breakpoint = 1200px:
@media screen and (min-width: 1200px) { /* Add Desktop styles here */ }breakpoint ที่ 2 รวม 2 breakpoints
Demo layout ใช้ breakpoint model ข้างต้น: https://codepen.io/StrengthandFreedom/pen/abzywPd
เห็นได้ 3 screen size ranges: mobile: 0-800px, tablet: 800-1200px, desktop: 1200+ ต้องสร้าง 2 breakpoints ด้วย CSS Media Queries
ตัวอย่างง่าย แต่สื่อความเข้าใจครบ ปรับทุกอย่างระหว่าง breakpoints ได้: font sizes ถึง layout width
ถ้าต้องการมากกว่า 2 breakpoints?
บางสถานการณ์ต้องการ fine-grained approach มากกว่า 2 breakpoints เห็นเว็บบางที่ใช้ถึง 10 breakpoints ทุก 100-200px
น่าจะ overdo สำหรับ most use cases
จำนวน Breakpoints ที่เหมาะสมสำหรับเว็บไซต์คือเท่าไหร่?
ไม่มีคำตอบคงที่ ให้ context นำทาง decisiones ยิ่งเว็บซับซ้อน ยิ่งต้องการ breakpoints มาก เพื่อ presentable บน devices/screen sizes สำคัญของ target audience
Rule of thumb: average website ต้องการ 2-4 breakpoints จากประสบการณ์ ผมมักใช้ 4
เห็นตัวอย่าง 2 breakpoints แล้ว ลองตัวอย่าง 4 breakpoints
Responsive Layout 4 Breakpoints
ใช้ article layout เดิม เพิ่ม breakpoints ให้ control มากขึ้น คิดว่า jump 0-800px mobile ใหญ่เกินไป landscape mode บน handheld devices ไมทำงานดีเสมอไป
เหตุผล: font sizes ใช้ได้ดีบน handheld ใหญ่ แต่ h1 (headline) overpowering เล็กน้อย content width กว้างเกินไป super 500px width point ทำ measure (line-length) ยาวเกิน ไม reader-friendly characters per line มากเกินไป ideal reading line-length = 40-80 characters per line
แก้: เพิ่ม breakpoint แรกที่ 480px แทนที่จะใช้ 1200px เป็น desktop-and-up เพิ่มอีกที่ 1900px (really big screens)
Demo 4 breakpoints: https://codepen.io/StrengthandFreedom/pen/mdyMMeL
Resize browser window เห็นว่า typography scale up/down (adapts) gracefully กว่า 2-breakpoint example เพราะ additional breakpoint ระหว่าง mobile-tablet ให้ control content-width, spacing (padding/margins), font sizes ได้ precise
1900px breakpoint useful สำหรับ really big screens external monitors — คนใช้เพิ่มขึ้น ไมควรละเลย
ทำเว็บด้วยแค่ 1 breakpoint ได้ไหม?
ชอบ simple fewer moving parts = easier maintenance แต่มีขีดจำกัด
Designers/developers บางคนใช้แค่ 1 breakpoint ทั้งเว็บ 1 breakpoint =
- Mobile layout
- Desktop layout
Breakpoint นั้นมักอยู่ 600-960px screen width range
นั่น optimistic เกินไปสำหรับ modern times ที่ design สำหรับ myriad screen sizes/device types
ถ้าสนใจให้ broad range of users (devices/screen sizes ต่างๆ) UX ดี มักต้องการมากกว่า 1 breakpoint
ซ้ำอีกครั้ง: ให้ context นำทาง design decisions
