Responsive คือจัดหน้าให้เหมาะกับพื้นที่จอ
หน้าเว็บที่รองรับหลายขนาดจอจะปรับการจัดวางตามพื้นที่ เช่น คอลัมน์บริการบนคอมพิวเตอร์เรียงลงมาเมื่อจอแคบ ไม่ใช่ย่อหน้าทั้งหน้าจนตัวอักษรเล็ก คุณควรยังอ่านเนื้อหาและกดปุ่มหลักได้สะดวก ทดสอบทั้งแนวตั้งและแนวนอน โดยเฉพาะเมนู ตารางราคา และข้อความที่ยาวกว่าตัวอย่างตอนออกแบบ
อ่านข้อความโดยไม่ซูมและไม่เลื่อนข้าง
เปิดหน้าเว็บแล้วอ่านจากต้นจนจบด้วยขนาดตัวอักษรปกติ สังเกตหัวข้อที่ตัดคำแปลก ตัวอักษรแน่น และข้อมูลที่หลุดนอกจอ หากต้องใช้นิ้วเลื่อนซ้ายขวาเพื่ออ่านย่อหน้าธรรมดา ให้แจ้งตำแหน่งที่พบ ไม่ต้องสรุปทั้งเว็บว่าเล็กเกินไป ส่งภาพพร้อมรุ่นเครื่องและหน้าที่เปิดจะช่วยให้แก้ได้ตรงจุด
ลองกดด้วยนิ้วและใช้เมนูจริง
ตรวจว่าปุ่มสำคัญไม่ติดกันจนเผลอกดผิด เมนูเปิดแล้วปิดได้ และแถบติดต่อไม่บังข้อความหรือปุ่มส่งแบบฟอร์ม ลองกรอกข้อมูลด้วยคีย์บอร์ดมือถือดูด้วยว่าป้ายชื่อช่องยังเห็นหรือไม่ หากต้องสลับไปแอปแชตแล้วกลับมา ข้อมูลที่กำลังอ่านควรยังหาเจอโดยไม่ทำให้หลงจากขั้นตอนเดิม
รูปสวยต้องเห็นส่วนที่จำเป็น
ภาพแนวนอนอาจถูกตัดเมื่อใช้ในช่องแนวตั้ง ลองตรวจหน้าคน โลโก้ และข้อความที่อยู่บนภาพ หากสารสำคัญอยู่ในรูปอย่างเดียวอาจเล็กจนอ่านไม่ออก ควรนำข้อมูลหลักมาเป็นข้อความบนหน้าเว็บด้วย พร้อมเลือกขนาดไฟล์ภาพให้พอดีกับหน้าจอ เพื่อไม่ให้มือถือดาวน์โหลดภาพใหญ่เกินที่ใช้งาน
ทำรายการรับงานตามเส้นทางลูกค้า
เลือกเส้นทางหนึ่ง เช่น เปิดบริการ ดูราคา แล้วกด LINE ลองครบทั้งบนมือถือและคอมพิวเตอร์ อย่าตรวจเฉพาะหน้าแรก ถ้ามีแบบฟอร์มให้ทดสอบกรณีเว้นช่องจำเป็นและกรอกถูกต้อง ส่งรายการปัญหาเป็นข้อพร้อมตำแหน่งหน้า เพื่อให้ผู้ทำเว็บแก้แล้วตรวจซ้ำเฉพาะจุดได้อย่างชัดเจน
เช็กลิสต์นำไปใช้
- อ่านย่อหน้าโดยไม่ซูม
- ไม่มีข้อความล้นจอ
- กดเมนูและปุ่มติดต่อครบเส้นทาง
- ตรวจรูปครอปและแบบฟอร์มด้วยมือถือจริง
แหล่งอ้างอิง
แหล่งข้อมูลประกอบหลักการทางเทคนิค ส่วนตัวอย่างการวางแผนและเช็กลิสต์เรียบเรียงขึ้นสำหรับเจ้าของธุรกิจ ตัวอย่างสมมติไม่ใช่ผลลัพธ์ของลูกค้าจริง
อยากมีเว็บไซต์ที่เข้ากับธุรกิจของคุณ?
เว็บไซต์ 1 หน้า เริ่มต้น 3,000 บาท สูงสุด 5 ส่วน รองรับมือถือและคอมพิวเตอร์ ดูขอบเขตแพ็กเกจและตัวอย่างก่อนส่งบรีฟได้เลย
บรีฟเว็บไซต์ ↗ดูแพ็กเกจและตัวอย่างเว็บไซต์ ↗