ลูกค้าส่วนใหญ่ของธุรกิจไทยเปิดเว็บจากมือถือ ถ้าเว็บไซต์รองรับมือถือได้ไม่ดี ตัวหนังสือเล็ก ปุ่มกดยาก หรือหน้าล้นจอ ลูกค้าจะปิดไปก่อนอ่านข้อมูลของคุณ บทความนี้อธิบายว่า responsive คืออะไร ทำไม Google ให้ความสำคัญ และคุณเช็กเว็บของตัวเองได้อย่างไรโดยไม่ต้องเป็นนักพัฒนา
Responsive คืออะไร
Responsive Web Design คือการออกแบบให้ เว็บเดียวปรับการแสดงผลตามขนาดหน้าจอโดยอัตโนมัติ บนคอมพิวเตอร์อาจแสดงสามคอลัมน์ บนแท็บเล็ตเหลือสอง บนมือถือเรียงเป็นคอลัมน์เดียว เนื้อหาเหมือนกัน แต่จัดวางให้อ่านง่ายในแต่ละจอ
แนวทางนี้ต่างจากสมัยก่อนที่ทำเว็บมือถือแยก เช่น m.example.com ซึ่งต้องดูแลสองชุดและข้อมูลไม่ตรงกันบ่อย ปัจจุบัน responsive เป็นมาตรฐานที่แนะนำ
Mobile-first indexing ของ Google คืออะไร
Google ใช้ เวอร์ชันมือถือของเว็บเป็นหลัก ในการเก็บข้อมูลและจัดอันดับ หมายความว่าสิ่งที่ Google เห็นคือหน้าเว็บแบบที่เปิดบนมือถือ
ผลที่ตามมาสำหรับเจ้าของเว็บ
- ถ้าเนื้อหาบางส่วนถูกซ่อนหรือตัดออกบนมือถือ Google อาจไม่นับเนื้อหานั้น
- รูปภาพ หัวข้อ และข้อมูลสำคัญต้องมีครบในเวอร์ชันมือถือ
- ความเร็วและการใช้งานบนมือถือส่งผลต่อประสบการณ์ผู้ใช้ ซึ่งเป็นหนึ่งในหลายปัจจัยที่ Google พิจารณา
เว็บที่รองรับมือถือดีไม่ได้รับประกันอันดับ แต่ เว็บที่ใช้บนมือถือไม่ได้ เสียเปรียบตั้งแต่ต้น
วิธีเช็กว่าเว็บไซต์รองรับมือถือดีไหม
1. เปิดด้วยมือถือจริง
วิธีที่ง่ายและได้ผลที่สุด เปิดเว็บด้วยมือถือของคุณและของคนรอบตัวที่ใช้รุ่นต่างกัน ลองทำสิ่งที่ลูกค้าทำจริง เช่น หาราคา กดโทร กรอกแบบฟอร์ม
2. ใช้เครื่องมือของ Google
- PageSpeed Insights วัดความเร็วและปัญหาการแสดงผลบนมือถือ อ่านวิธีตีความผลได้ในบทความอธิบาย PageSpeed
- Google Search Console แจ้งปัญหาด้านประสบการณ์ใช้งานที่ Google พบจากผู้เข้าชมจริง
3. ใช้โหมดจำลองในเบราว์เซอร์
เบราว์เซอร์บนคอมพิวเตอร์มีเครื่องมือนักพัฒนาที่จำลองหน้าจอมือถือได้ เหมาะสำหรับไล่ดูหลายขนาดจอเร็ว ๆ แต่ควรยืนยันกับมือถือจริงอีกครั้ง
เช็กลิสต์ทดสอบด้วยตัวเอง
| ข้อ | ผ่านเมื่อ |
|---|---|
| ตัวอักษร | อ่านได้โดยไม่ต้องซูม |
| ความกว้าง | ไม่ต้องเลื่อนซ้ายขวา ไม่มีส่วนล้นจอ |
| ปุ่มและลิงก์ | กดง่ายด้วยนิ้ว ไม่กดโดนปุ่มข้างเคียง |
| เมนู | เปิดปิดได้ ลิงก์ครบเหมือนบนคอมพิวเตอร์ |
| แบบฟอร์ม | กรอกได้สะดวก แป้นพิมพ์ตรงประเภท เช่น ช่องเบอร์โทรเปิดแป้นตัวเลข |
| เบอร์โทร | แตะแล้วโทรออกได้ทันที |
| รูปภาพ | ไม่เบี้ยว ไม่ตก และไม่หนักจนโหลดช้า |
| ป๊อปอัป | ไม่บังเนื้อหาทั้งจอ ปิดได้ง่าย |
จุดที่พังบ่อยบนมือถือ
- ตารางและรูปกว้างเกินจอ ทำให้ทั้งหน้าเลื่อนซ้ายขวาได้ แก้โดยให้ตารางเลื่อนได้เฉพาะในกรอบ หรือจัดข้อมูลใหม่สำหรับมือถือ
- ปุ่มเล็กและชิดกันเกินไป ผู้ใช้กดผิดบ่อย ควรมีพื้นที่กดกว้างพอสำหรับปลายนิ้ว
- รูปภาพไฟล์ใหญ่ เว็บดูดีบนคอมพิวเตอร์ที่ต่ออินเทอร์เน็ตแรง แต่ช้ามากบนเครือข่ายมือถือ ควรย่อรูปตามขนาดที่แสดงจริงและใช้ไฟล์สมัยใหม่อย่าง WebP
- ป๊อปอัปเต็มจอ บนจอเล็ก ป๊อปอัปปิดเนื้อหาทั้งหมดและหาปุ่มปิดยาก
- เมนูมือถือใช้งานไม่ได้ เปิดแล้วปิดไม่ได้ หรือหน้าเด้งกลับขึ้นบนสุด
- ข้อความในรูปภาพ เช่น แบนเนอร์โปรโมชันที่ตัวหนังสือเล็กจนอ่านไม่ออกเมื่อย่อลงบนมือถือ
- ปุ่มติดต่อซ่อนลึก ลูกค้าต้องเลื่อนหาจนเบื่อ ควรมีปุ่มโทรหรือ LINE ที่เข้าถึงได้เร็ว
ออกแบบโดยคิดถึงมือถือก่อน
แนวคิด mobile-first คือเริ่มออกแบบจากจอมือถือ แล้วค่อยขยายไปจอใหญ่ วิธีนี้บังคับให้จัดลำดับความสำคัญของเนื้อหาตั้งแต่ต้น เพราะพื้นที่จำกัด สิ่งที่ไม่จำเป็นจะถูกตัดออก ผลที่ได้มักเป็นเว็บที่เรียบง่ายและเร็วขึ้นทุกขนาดจอ งานออกแบบทุกโปรเจกต์ของเราใช้แนวทางนี้ ดูรายละเอียดได้ที่บริการออกแบบเว็บไซต์
สรุป
เว็บไซต์รองรับมือถือไม่ใช่ทางเลือกเสริมอีกต่อไป เพราะลูกค้าส่วนใหญ่ใช้มือถือ และ Google ใช้เวอร์ชันมือถือเป็นหลักในการทำความเข้าใจเว็บ เช็กเว็บของคุณด้วยมือถือจริง ใช้เครื่องมือของ Google ประกอบ และไล่แก้จุดที่พังบ่อย ทั้งตารางล้นจอ ปุ่มเล็ก รูปหนัก และป๊อปอัป เท่านี้ก็ช่วยให้ลูกค้าอยู่ในเว็บนานขึ้นและติดต่อคุณง่ายขึ้น
อยากรู้ว่าเว็บของคุณมีปัญหาบนมือถือตรงไหน ปรึกษาเราฟรี เราช่วยตรวจและแนะนำวิธีแก้ให้