Our standard of craft.
หกด้านนี้ไม่ใช่รายการฟีเจอร์ที่เลือกซื้อเพิ่ม แต่เป็นมาตรฐานที่ใช้กับทุกโครงการ และส่วนใหญ่พิสูจน์ได้เองบนหน้านี้
Adaptive Light
สวยทั้งโหมดสว่างและโหมดมืด
Designed for darkness, not inverted for it.
[data-theme] · --color-signal · --image-grade
Dark mode ที่ดีไม่ใช่การสลับพื้นหลังจากขาวเป็นดำ แต่คือการออกแบบใหม่ให้เหมาะกับบริบทของแสง เราปรับความสว่างของภาพ คอนทราสต์ ตัวอักษร และสีแบรนด์ ให้แต่ละโหมดรักษาบุคลิกเดิมไว้ได้
- สีแบรนด์ถูกเลือกใหม่ต่อโหมด ไม่ใช่ค่าเดิมที่หรี่ลง
- ภาพถูกปรับ luminance เพราะภาพหน้าจอถูกถ่ายมาบนพื้นขาว
- คอนทราสต์ตัวอักษรผ่านเกณฑ์ทั้งสองโหมด
- เส้นคั่นเปลี่ยนน้ำหนักตามพื้น ไม่ใช่ความทึบเดียวกัน
light · Editorial Type
ภาษาไทยอ่านสบาย
Every language deserves its own rhythm.
--tracking-display · line-height · ch measure
ภาษาไม่ใช่ข้อความที่แทนกันได้ตรง ๆ ไทยและอังกฤษมีความหนาแน่นและจังหวะต่างกัน ระบบตัวอักษรจึงต้องคิดแยกภาษา ทั้งสเกล ระยะบรรทัด ความยาวบรรทัด และการตัดคำ
- ระยะบรรทัดของไทยสูงกว่าอังกฤษ เพราะมีสระบนและล่าง
- letter-spacing ติดลบใช้ได้กับอังกฤษ แต่ทำลายสระของไทย
- ความยาวบรรทัดคุมเป็นจำนวนตัวอักษร ไม่ใช่ความกว้างคงที่
- หัวข้อใหญ่ตัดคำภายในคำได้ เพื่อไม่ให้ล้นจอเล็ก
รายละเอียดไม่ใช่การตกแต่ง รายละเอียดคือสิ่งที่ทำให้ประสบการณ์ดิจิทัลมีชีวิต
- line-height
- 1.78
- letter-spacing
- 0em
- measure
- 34rem
สระบนและล่างต้องการระยะบรรทัดสูงกว่า และ tracking ติดลบทำให้รูปสระชนกัน
Fluid Space
ใช้ได้ดีทุกขนาดจอ
No device should feel like an afterthought.
clamp() · minmax(0, 1fr) · no breakpoint jumps
Responsive ไม่ได้แปลว่าเดสก์ท็อป แท็บเล็ต มือถือ แต่คือผืนผ้าใบที่เปลี่ยนขนาดตลอดเวลา เราใช้ระบบที่ไล่ค่าอย่างต่อเนื่อง ตั้งแต่มือถือจนถึงจอกว้างพิเศษ
- ตัวอักษรและระยะไล่ค่าด้วย clamp ไม่กระโดดตาม breakpoint
- กริดคอลัมน์ลดจำนวนตามพื้นที่จริง ไม่ใช่ตามชื่ออุปกรณ์
- สัดส่วนภาพคงที่ ไม่ว่าคอลัมน์จะกว้างเท่าไร
- ทุกพื้นที่กดได้ไม่ต่ำกว่า 44px บนจอสัมผัส
Fluid Space
- canvas width
- 760px
- display size
- 41.8px
- columns
- 2
ขนาดตัวอักษรไล่ค่าอย่างต่อเนื่องตามความกว้าง ไม่ได้กระโดดตาม breakpoint ส่วนจำนวนคอลัมน์เปลี่ยนตามพื้นที่ที่มีจริง
Invisible Speed
เปิดเร็ว แม้เน็ตช้า
The best performance is the one you never notice.
PerformanceObserver · navigation timing
ประสิทธิภาพที่ดีที่สุดคือสิ่งที่ผู้ใช้ไม่ต้องนึกถึงมันเลย เราวางโครงสร้างไฟล์และสถาปัตยกรรมโดยคิดถึงรูปแบบภาพสมัยใหม่ การโหลดตามการมองเห็น การแบ่งโค้ด และสภาพเครือข่ายจริง
- ภาพเสิร์ฟเป็น WebP พร้อมขนาดตามคอลัมน์ที่ใช้จริง
- เนื้อหาสำคัญอยู่ใน HTML ตั้งแต่โหลดแรก ไม่รอ JavaScript
- ไม่มีไลบรารี animation ในหน้า จึงไม่มีน้ำหนักที่ไม่ได้ใช้
- ตัวเลขจริงดูได้เองจาก Proof Mode ไม่ต้องเชื่อคำโฆษณา
ตัวเลขของหน้านี้ วัดสดในเครื่องคุณ
- LCP
- —
- เวลาจนภาพหรือข้อความหลักขึ้นจอ
- Transfer
- —
- ขนาดที่โหลดจริงของหน้านี้
- Requests
- —
- จำนวนไฟล์ที่ขอ
- DOM nodes
- —
- ขนาดของโครงหน้า
Intentional Motion
ขยับเท่าที่ช่วยให้เข้าใจ
Nothing moves without a reason.
transform · opacity · prefers-reduced-motion
Motion ไม่ได้มีไว้ทำให้เว็บดูแพง แต่มีไว้นำสายตา บอกลำดับ สื่อสถานะ และคุมจังหวะ ทุก interaction ต้องมีเหตุผล และทุกระบบต้องรองรับผู้ใช้ที่ขอให้ลดการเคลื่อนไหว
- เคลื่อนไหวเฉพาะ transform และ opacity ไม่แตะ layout
- ไม่มี scroll reveal เพราะเนื้อหาไม่ควรต้องรอให้เลื่อนถึง
- ใช้ easing ที่ตั้งชื่อไว้ ไม่ใช้ค่าเริ่มต้นของเบราว์เซอร์
- prefers-reduced-motion ยุบการเคลื่อนที่เหลือการเปลี่ยนความทึบ
ชี้ที่แถวเพื่อดูการเลื่อน 8px ตามแกนเดียว ระยะสั้นพอที่จะบอกว่าแถวนี้กดได้ โดยไม่ดึงความสนใจไปจากเนื้อหา
Machine-Readable Meaning
Google และ AI อ่านเว็บคุณเข้าใจ
SEO · AEO · GEO
Built to be understood by people, search engines and AI.
semantic HTML · JSON-LD @graph
เว็บไซต์ยุคนี้ไม่ได้ถูกอ่านโดยมนุษย์อย่างเดียว แต่ถูกอ่านโดยเครื่องมือค้นหา ระบบตอบคำถาม และผู้ช่วย AI เราจึงออกแบบความหมายของหน้าไว้ในโครงสร้าง ไม่ใช่แค่ในภาพ
- HTML เชิงความหมาย ลำดับหัวข้อสะท้อนโครงเนื้อหาจริง
- JSON-LD อธิบายองค์กร ผลงาน และคำถามที่พบบ่อย
- ความสัมพันธ์ระหว่างสิ่งต่าง ๆ ผูกด้วย id ไม่ใช่ข้อความลอย
- เปิด Semantic View ดูโครงสร้างจริงของหน้านี้ได้ทันที
JSON-LD ที่หน้านี้ส่งออกจริง
// อ่านได้เมื่อหน้าโหลดในเบราว์เซอร์ไม่ใช่ตัวอย่างที่เขียนไว้ให้ดู แต่เป็นสิ่งเดียวกับที่ Google และผู้ช่วย AI อ่านจากหน้านี้ ตรวจซ้ำได้จาก View Source