Mobile-first กับ responsive design ต่างกันอย่างไร และออกแบบเพื่อมือถือก่อนทำอย่างไร

เปิดข้อเสนอโครงการทำเว็บไซต์แทบทุกฉบับ คุณจะเจอสองคำนี้อยู่ในประโยคเดียวกัน “ดีไซน์แบบ mobile-first และ responsive เต็มรูปแบบ” ฟังดูเหมือนเป็นคำสัญญาเดียวกัน แต่ mobile-first กับ responsive design ต่างกันจริง และความต่างนี้อธิบายได้ว่า ทำไมเว็บไซต์จำนวนมาก ที่ในทางเทคนิคใช้งานบนมือถือได้ ถึงยังใช้ยากอยู่ดี

responsive design อธิบายว่าเลย์เอาต์ปรับตัวตามหน้าจออย่างไร ส่วน mobile-first อธิบายว่าคุณวางแผนสำหรับหน้าจอไหนก่อน คุณมีอย่างแรกได้โดยไม่มีอย่างหลัง และผลลัพธ์ก็คุ้นตา คือหน้าเว็บเดสก์ท็อปที่ถูกเทลงในคอลัมน์แคบ ๆ โดยส่วนที่ผู้เข้าชมต้องการ ถูกฝังอยู่กลางหน้า

คำตอบสั้น ๆ

• responsive web design คือเทคนิค เว็บไซต์เดียวที่เลย์เอาต์ปรับตัวได้กับทุกหน้าจอ โดยใช้กริดที่ยืดหยุ่น รูปภาพที่ปรับขนาดได้ media query และล่าสุดคือ container query
• mobile-first design คือลำดับความสำคัญ คุณออกแบบและสร้างสำหรับหน้าจอที่เล็กที่สุดก่อน แล้วค่อยเพิ่มเลย์เอาต์และรายละเอียด เมื่อมีพื้นที่มากขึ้น
• ทั้งสองทำงานร่วมกัน เว็บไซต์สมัยใหม่ที่ดีเป็น mobile-first ในวิธีวางแผน และเป็น responsive ในวิธีสร้าง
• ลำดับนี้สำคัญ เพราะ Google ใช้เวอร์ชันมือถือของหน้าเว็บเป็นหลัก ในการ index และจัดอันดับ

สรุปภาพรวม mobile-first กับ responsive

responsive design: เทคนิค

Ethan Marcotte เป็นผู้บัญญัติคำนี้ ในบทความปี 2010 ที่เขียนให้ A List Apart สูตรของเขามีสามส่วนผสม คือกริดที่กำหนดขนาดเป็นสัดส่วนแทนพิกเซลตายตัว รูปภาพที่ปรับขนาดภายในกรอบของมัน และ CSS media query ที่เปลี่ยนเลย์เอาต์ที่ความกว้างหนึ่ง ๆ สูตรนี้ยังใช้ได้ แต่ชุดเครื่องมือขยายตัวขึ้น

• ขนาดตัวอักษรและระยะห่างที่ยืดหยุ่น ฟังก์ชัน clamp() ของ CSS ทำให้ตัวอักษรและช่องว่างขยายได้อย่างนุ่มนวล ระหว่างค่าต่ำสุดกับสูงสุด บทความ ตัวอักษรบนเว็บสำหรับเว็บไซต์ธุรกิจ ของเราอธิบายขนาดที่เหมาะสม
• รูปภาพแบบ responsive แอตทริบิวต์ srcset และ sizes ให้เบราว์เซอร์เลือกไฟล์ที่เหมาะกับหน้าจอ มือถือจึงไม่ต้องดาวน์โหลดรูป ที่ทำขนาดไว้สำหรับจอใหญ่
• เลย์เอาต์แบบ intrinsic CSS Grid และ Flexbox จัดการ์ดได้หลายคอลัมน์เท่าที่พื้นที่อำนวย บ่อยครั้งโดยไม่ต้องใช้ media query เลย

container query: คอมโพเนนต์ที่ปรับตามพื้นที่ของมัน

media query ตอบสนองต่อความกว้างของทั้งหน้าจอ การ์ดสินค้าอาจอยู่ในกริดสี่คอลัมน์ในหน้าหนึ่ง และอยู่ในแถบข้างแคบ ๆ ในอีกหน้า หน้าจอเดียวกัน แต่พื้นที่ต่างกันมาก

container query ให้คอมโพเนนต์ตอบสนองต่อความกว้าง ของอิลิเมนต์ที่มันอยู่ การ์ดจึงเปลี่ยนจากเรียงซ้อน เป็นวางคู่กัน เมื่อกรอบของมันกว้างพอ เบราว์เซอร์หลักทุกตัวรองรับมาตั้งแต่ต้นปี 2023 และมันทำให้ design system แข็งแรงขึ้น เพราะคอมโพเนนต์แต่ละตัวพกกฎของตัวเองไปด้วย

breakpoint: กำหนดตามเนื้อหา ไม่ใช่ตามอุปกรณ์

breakpoint คือความกว้างที่เลย์เอาต์เปลี่ยน การลอกความกว้างของมือถือรุ่นยอดนิยมมาใช้ดูน่าทำ แต่รายการนั้นล้าสมัยทุกปี และมองข้ามมือถือจอพับ รวมถึงคนที่ซูมหน้าจอ

วิธีที่ดีกว่าคือ เริ่มจากจอแคบ ค่อย ๆ ขยายเบราว์เซอร์ แล้วเพิ่ม breakpoint ตรงที่เนื้อหาเริ่มดูผิด เช่น บรรทัดยาวเกินไป หรือเมนูนำทางเริ่มล้นแถว เว็บไซต์ส่วนใหญ่ต้องการแค่ไม่กี่จุด กำหนดเป็นหน่วย em หรือ rem เพื่อให้เลย์เอาต์ปรับตัวด้วย เมื่อมีคนตั้งขนาดตัวอักษรเริ่มต้นให้ใหญ่ขึ้น

mobile-first design: ลำดับความสำคัญ

นักออกแบบ Luke Wroblewski ทำให้แนวคิดนี้เป็นที่รู้จัก ในหนังสือ Mobile First ปี 2011 โดยเสนอว่า การเริ่มจากหน้าจอเล็กที่สุด บังคับให้ตัดสินใจได้ดีขึ้น มือถือมีที่พอสำหรับสิ่งที่สำคัญ และแทบไม่มีที่ให้อย่างอื่น ถ้าอะไรไม่คุ้มที่จะมีที่บนหน้าจอกว้าง 360 พิกเซล ก็ควรถามว่า ทำไมมันถึงอยู่บนเวอร์ชันเดสก์ท็อปตั้งแต่แรก

mobile-first ในโค้ด

ใน CSS แบบ mobile-first สไตล์เริ่มต้นเขียนไว้สำหรับจอเล็ก แล้วใช้ media query แบบ min-width เพิ่มเลย์เอาต์เมื่อหน้าจอใหญ่ขึ้น แบบ desktop-first ทำกลับกัน คือใช้ query แบบ max-width ยกเลิกบางส่วนของเลย์เอาต์เดสก์ท็อปสำหรับจอเล็ก

สิ่งที่ได้คือดูแลรักษาง่าย การเพิ่มคอลัมน์เมื่อมีพื้นที่ ง่ายกว่าการรื้อคอลัมน์ออก และเลย์เอาต์บนมือถือจะไม่กลายเป็นกองโค้ดแก้ทับ ที่พังทุกครั้งที่มีคนแก้ดีไซน์เดสก์ท็อป

คิดแบบมือถือก่อน เปลี่ยนการตัดสินใจเรื่องเนื้อหาอย่างไร

mobile-first เป็นงานเรียบเรียงเนื้อหา มากกว่างานจัดเลย์เอาต์ บนมือถือทุกอย่างอยู่ในคอลัมน์เดียว ทุกหน้าจึงกลายเป็นรายการที่เรียงลำดับ และต้องมีใครสักคนตัดสินลำดับนั้น

ตัดสินว่าอะไรมาก่อนในทุกหน้า

ก่อนเริ่มออกแบบหน้าตา ให้เขียนลำดับของหน้าสำคัญแต่ละหน้า ว่าผู้เข้าชมต้องเข้าใจอะไรก่อน อะไรสร้างความมั่นใจต่อ และ CTA อยู่ตรงไหน บนมือถือ หน้าจอแรกมีที่สำหรับพาดหัว ข้อความสนับสนุนหนึ่งบรรทัด และการกระทำหนึ่งอย่าง บทความ การออกแบบหน้าแรก ของเราไล่ลำดับนั้นทีละส่วน

เขียนสำหรับจอแคบด้วย พาดหัวหกบรรทัดดันทุกอย่างหลุดออกจากจอ และปุ่มควรบอกว่าจะเกิดอะไรขึ้น (“ขอใบเสนอราคา”) แทนคำว่า “ส่ง”

จัดลำดับ อย่าตัดทิ้ง

การตัดเนื้อหาสำหรับผู้ใช้มือถือ คือการสมมติว่าคนบนมือถือต้องการข้อมูลน้อยกว่า แต่จริง ๆ แล้วพวกเขาต้องการข้อมูลเดิม ในลำดับที่ดีกว่า จึงควรเก็บสเปก ราคา และนโยบายไว้ แล้วใช้ accordion สำหรับรายละเอียด ในหน้าสินค้า หมายถึงข้อเท็จจริงสำคัญและปุ่มซื้อมาก่อน สเปกเต็มอยู่ข้างใต้ ตามที่บทความ การออกแบบหน้าสินค้าของร้านค้าออนไลน์ อธิบายไว้

คิดใหม่กับส่วนที่จัดยาก

เมนูนำทาง เมนูบนมือถือมักซ่อนอยู่หลังปุ่ม การกระทำที่สำคัญที่สุดจึงต้องมองเห็นได้นอกเมนู บทความ การออกแบบเมนูนำทางเว็บไซต์ อธิบายรูปแบบเมนูอย่างละเอียด

ตาราง เปลี่ยนแถวให้เป็นการ์ดเรียงซ้อน หรือให้ตารางเลื่อนได้ภายในกล่องของมันเอง ไม่ใช่ทั้งหน้า

รูปภาพ เลือกการครอปที่ใช้ได้ในแนวตั้ง และอย่าใส่ข้อความไว้ในรูป เพื่อให้ข้อความจัดเรียงใหม่ได้ แปลได้ และโปรแกรมอ่านหน้าจออ่านได้

ทำไมเวอร์ชันมือถือคือเวอร์ชันที่ Google ใช้

Google ใช้เนื้อหาเวอร์ชันมือถือของหน้า ที่ครอว์ลด้วย crawler สำหรับสมาร์ตโฟน ในการ index และจัดอันดับ Google เรียกสิ่งนี้ว่า mobile-first indexing โดยประกาศการเปลี่ยนแปลงในปี 2016 และบอกในเดือนตุลาคม 2023 ว่าการย้ายเสร็จสมบูรณ์แล้ว สิ่งที่เว็บไซต์ของคุณแสดงบนมือถือ คือเว็บไซต์ของคุณในสายตา Google

• เนื้อหาเท่ากันทุกเวอร์ชัน ข้อความ รูปภาพ ลิงก์ และ structured data ที่มีบนเดสก์ท็อปแต่ไม่มีบนมือถือ อาจไม่ถูกนับเลย title, meta description และหัวข้อก็ควรตรงกันด้วย
• เนื้อหาต้องอยู่ในหน้าตั้งแต่แรก เอกสารของ Google บอกว่าจะไม่โหลดเนื้อหา ที่ต้องให้ผู้ใช้โต้ตอบก่อนถึงจะปรากฏ เช่น การปัด คลิก หรือพิมพ์ accordion ที่ยุบไว้ไม่เป็นไร ถ้าข้อความอยู่ใน HTML แต่เนื้อหาที่ดึงมาเฉพาะตอนแตะ อาจไม่เคยถูกเห็นเลย
• ที่อยู่เดียวต่อหน้าง่ายที่สุด Google แนะนำ responsive design ว่าเป็นรูปแบบที่ทำและดูแลง่ายที่สุด เว็บไซต์มือถือแยกแบบ “m.” ทำให้งานเพิ่มเป็นสองเท่า และเปิดช่องให้เวอร์ชันต่าง ๆ ไม่ตรงกัน
• ความเร็วก็วัดบนมือถือด้วย Core Web Vitals รายงานแยกระหว่างมือถือกับเดสก์ท็อป และมือถือมักเป็นการทดสอบที่ยากกว่า Google ให้คะแนนการโหลดว่าดี เมื่อ Largest Contentful Paint อยู่ที่ 2.5 วินาทีหรือน้อยกว่า ในอย่างน้อย 75% ของการเข้าชมหน้า ถ้าผลบนมือถือของคุณไม่ดี บทความ ทำไมเว็บไซต์ช้า? ช่วยให้คุณหาสาเหตุได้

เว็บไซต์เดิมของผู้พัฒนาอสังหาริมทรัพย์รายหนึ่ง ทั้งช้าและพังบนมือถือ หลังรีดีไซน์ เวลาโหลดลดจาก 9 วินาทีเหลือ 2 วินาที และการติดต่อสอบถามจากผู้ซื้อเพิ่มขึ้น 40% ในสามเดือนหลังเปิดตัว กรณีศึกษา แสดงให้เห็นว่าอะไรเปลี่ยนไป

เช็กลิสต์ออกแบบเพื่อมือถือก่อน

การอ่านและเลย์เอาต์

• ตั้งค่าแท็ก meta viewport แล้ว (width=device-width, initial-scale=1) และไม่ได้ปิดการซูม
• ข้อความเนื้อหาอ่านได้โดยไม่ต้องซูม โดยทั่วไปคือ 16px ขึ้นไป
• ไม่มีอะไรเลื่อนออกด้านข้างที่ความกว้าง 320 CSS พิกเซล ซึ่งเป็นความกว้างที่เกณฑ์ Reflow ของ WCAG 2.2 ใช้ (ยกเว้นตารางกว้าง ๆ ที่เลื่อนได้ภายในกล่องของตัวเอง)
• หน้าจอแรกแสดงว่าหน้านี้เกี่ยวกับอะไร และการกระทำหลักคืออะไร
• ป๊อปอัปไม่บังเนื้อหาหลัก แนวทางเรื่องประสบการณ์หน้าเว็บของ Google ก็เตือนเรื่องป๊อปอัปคั่นหน้าที่รบกวนไว้เช่นกัน

ออกแบบให้นิ้วโป้งกดง่าย และขนาดพื้นที่แตะ

การออกแบบให้นิ้วโป้งกดง่าย หมายถึงการกำหนดขนาดและตำแหน่งของปุ่มควบคุม สำหรับปลายนิ้ว ไม่ใช่เมาส์ แนวทางหลักกำหนดขนาดไว้ดังนี้

• ปุ่มและลิงก์ที่อยู่เดี่ยว ๆ มีขนาดอย่างน้อย 24 × 24 หรือมีพื้นที่รอบ ๆ มากพอ ที่จะไม่กดโดนปุ่มข้าง ๆ โดยไม่ตั้งใจ
• การกระทำหลักใหญ่กว่านั้นอีก ใกล้ 44–48 พิกเซล และอยู่ในระยะที่นิ้วโป้งเอื้อมถึงง่าย

ฟอร์มและการกรอกข้อมูล

• ช่องกรอกใช้ input type ที่ถูกต้อง (tel, email) และค่า autocomplete เพื่อให้มือถือแสดงแป้นพิมพ์ที่ใช่ และกรอกรายละเอียดให้อัตโนมัติได้
• ตัวอักษรในฟอร์มอย่างน้อย 16px เพื่อไม่ให้ iPhone ซูมเข้าเมื่อมีคนแตะช่องกรอก
• ป้ายกำกับยังมองเห็นได้เหนือช่องกรอก ไม่ได้อยู่แค่ในข้อความตัวอย่าง (placeholder)
• ข้อความแจ้งข้อผิดพลาดและปุ่มส่ง ไม่ถูกแป้นพิมพ์บนจอบังไว้

บทความ การออกแบบฟอร์มบนเว็บไซต์ ของเราครอบคลุมส่วนที่เหลือ

การโต้ตอบ

• ไม่มีอะไรที่ต้องพึ่งการเอาเมาส์ไปวาง (hover) เมนู tooltip และรายละเอียดของรูป ใช้งานได้ด้วยการแตะ
• เบอร์โทรศัพท์เป็นลิงก์แตะเพื่อโทร เขียนพร้อมรหัสโทรระหว่างประเทศ
• ลูกค้าที่ชอบส่งข้อความ แตะเข้าแชทในแอปที่ใช้อยู่แล้วได้ทันที

ทดสอบบนมือถือจริง ไม่ใช่แค่ย่อจอ

เครื่องมือนักพัฒนาในเบราว์เซอร์ จำลองขนาดหน้าจอมือถือได้ แต่จำลองนิ้วโป้ง โปรเซสเซอร์ระดับกลาง สัญญาณที่ขาด ๆ หาย ๆ หรือแป้นพิมพ์บนจอไม่ได้ การทดสอบสั้น ๆ บนมือถือจริง จับสิ่งที่เครื่องมือพลาดได้

1. ดู analytics ของคุณ รายงาน Tech ใน Google Analytics แสดงว่าผู้เข้าชมใช้อุปกรณ์อะไร และการติดต่อสอบถามจากแต่ละอุปกรณ์ เทียบกันอย่างไร
2. ใช้มือถือสองเครื่อง คือ iPhone รุ่นใหม่ และ Android รุ่นเก่าหรือรุ่นระดับกลาง
3. ปิด Wi-Fi แล้วใช้อินเทอร์เน็ตมือถือ
4. ทำงานหลักให้สำเร็จด้วยมือเดียว ทั้งหาบริการ เช็กราคา และส่งการติดต่อสอบถาม
5. หมุนมือถือ และเพิ่มขนาดตัวอักษร มองหาข้อความที่ซ้อนกันหรือถูกตัด
6. รัน PageSpeed Insights ซึ่งแสดงผลบนมือถือก่อน และดูฝั่งมือถือของรายงาน Core Web Vitals ใน Search Console

Google ปลดระวาง Mobile-Friendly Test และรายงาน Mobile Usability ใน Search Console เมื่อวันที่ 1 ธันวาคม 2023 และแนะนำให้ใช้ Lighthouse ใน Chrome แทน แต่ทั้งสองอย่างก็แทนนิ้วโป้งจริง บนมือถือจริงไม่ได้

คำถามที่พบบ่อย

ต้องมีเว็บไซต์มือถือแยกต่างหาก หรือทำแอปไหม?

ส่วนใหญ่ไม่ต้อง เว็บไซต์ responsive เดียว ให้บริการทุกหน้าจอจากที่อยู่เดียวกัน ซึ่ง Google แนะนำ และดูแลง่ายกว่ามาก แอปจะคุ้มค่าเมื่อคนกลับมาใช้บ่อย ๆ สำหรับงานอย่างการจอง และถึงอย่างนั้น เว็บไซต์ก็ยังต้องใช้งานบนมือถือได้ดี

mobile-first แปลว่าดีไซน์เดสก์ท็อปได้รับความใส่ใจน้อยลงไหม?

ไม่ใช่ mobile-first กำหนดลำดับการตัดสินใจ ไม่ใช่ปริมาณความใส่ใจ เลย์เอาต์เดสก์ท็อปยังถูกออกแบบอย่างดี บนลำดับเนื้อหาที่ผ่านการทดสอบ บนหน้าจอที่ยากที่สุดมาแล้ว

เว็บไซต์ที่รองรับมือถือ พอจะติดอันดับบน Google ไหม?

มันคือพื้นฐาน ไม่ใช่ความได้เปรียบ เพราะ Google index เวอร์ชันมือถือ เวอร์ชันนั้นจึงต้องมีเนื้อหาครบ โหลดเร็ว และเลย์เอาต์ใช้งานได้ นอกเหนือจากนั้น อันดับขึ้นอยู่กับว่าหน้านั้นเกี่ยวข้อง และมีประโยชน์กับการค้นหาแค่ไหน

ขั้นต่อไป

responsive design คือวิธีที่เว็บไซต์ถูกสร้างกันในปัจจุบัน ความต่างมาจากการคิดแบบ mobile-first คือตัดสินว่าแต่ละหน้าพูดอะไรก่อน กำหนดขนาดปุ่มควบคุมสำหรับนิ้วโป้ง เก็บเนื้อหาให้ครบสำหรับ Google และทดสอบบนมือถือจริง กลยุทธ์ เนื้อหา การออกแบบ การพัฒนา ประสิทธิภาพ และ SEO ล้วนมาบรรจบกันบนหน้าจอเล็ก ๆ นั้น ตามที่บทความ อะไรทำให้เว็บไซต์ดี ของเราอธิบายไว้

ถ้าคุณกำลังวางแผนเว็บไซต์ใหม่ งาน ออกแบบและพัฒนาเว็บไซต์ ของเราเริ่มจากการวางกลยุทธ์และแผนผังเว็บไซต์ สิ่งที่แต่ละหน้าพูดก่อนบนมือถือ จึงถูกกำหนดไว้ก่อนเริ่มออกแบบ ไม่แน่ใจว่าเว็บไซต์ปัจจุบันทำงานบนมือถืออย่างไร? ตรวจสอบเว็บไซต์ฟรี จะตรวจประสบการณ์บนมือถือ ควบคู่กับความเร็วและการมองเห็นบน Google