เว็บไซต์แบบ Responsive

เว็บไซต์แบบ Responsive ปรับตามขนาดหน้าจออย่างไร

เว็บไซต์แบบ Responsive จะกำหนดกฎไว้ล่วงหน้าว่า “ถ้าหน้าจอแคบกว่าเท่านี้ให้จัดวางแบบนี้” แล้วเลือกกฎที่ตรงกับความกว้างหน้าจอของลูกค้ามาแสดง ความกว้างที่กฎเปลี่ยนนี้เรียกว่า “เบรกพอยต์ (Breakpoint)”

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

ด้านบนสุดของโค้ดเว็บไซต์จะมีบรรทัดหนึ่ง (การตั้งค่า viewport) ที่บอกว่า “ให้แสดงหน้านี้ตามความกว้างของอุปกรณ์” ถ้าขาดบรรทัดนี้ไป บนมือถือจะเห็นหน้าจอคอมพิวเตอร์ที่ถูกย่อเล็กลง

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

Responsive, Adaptive และเว็บไซต์สำหรับมือถือโดยเฉพาะต่างกันอย่างไร

Responsive คือเว็บไซต์เดียวที่ปรับตามทุกหน้าจอ ส่วน Adaptive และเว็บไซต์สำหรับมือถือโดยเฉพาะคือการแสดงเวอร์ชันที่ทำแยกตามหน้าจอ Google แนะนำแบบ Responsive เพราะทำง่ายและดูแลง่าย

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

ถ้าใช้เว็บไซต์สำหรับมือถือโดยเฉพาะอย่าง m.ชื่อร้าน.kr อยู่แล้ว ตอนทำใหม่ให้รวมเป็นแบบ Responsive และตั้งให้ที่อยู่ m. เดิมเชื่อมไปยังที่อยู่ใหม่อัตโนมัติ ลูกค้าที่เข้ามาจากลิงก์เก่าที่กระจายอยู่จะได้ไม่หลงทาง

บนหน้าจอมือถือ อะไรบ้างที่ควรต่างออกไป

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

เช่น ตารางราคาของร้านทำผม บนคอมพิวเตอร์แสดงเป็นตารางกว้างได้ แต่บนมือถือต้องแบ่งเป็นการ์ดตามบริการ จึงจะดูได้โดยไม่ต้องเลื่อนไปด้านข้าง ตารางคลาสของร้านงานฝีมือก็เช่นกัน บนมือถือรายการวันที่ดูง่ายกว่าปฏิทิน

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

ถ้าเป็นคาเฟ่หรือร้านอาหาร เวลาเปิดทำการ วันนี้หยุดหรือไม่ และปุ่มนำทาง ควรอยู่ใกล้หน้าจอแรกบนมือถือ เพราะลูกค้าที่หยิบมือถือขึ้นมาใกล้ ๆ ร้านจะหา 3 อย่างนี้ก่อน

• ตัวอักษรเนื้อหาใหญ่พอที่จะอ่านได้โดยไม่ต้องซูม
• ปุ่มและลิงก์มีขนาดและระยะห่างพอให้กดด้วยนิ้วได้ (โดยทั่วไปแนะนำราว 48 พิกเซลทั้งกว้างและสูง)
• เบอร์โทรกดแล้วโทรออกได้ทันที ที่อยู่กดแล้วเปิดแอปแผนที่
• ไม่บังหน้าจอแรกด้วยป๊อปอัปขนาดใหญ่
• อย่าใส่ข้อความไว้ในรูปภาพ ให้ข้อความเป็นข้อความ (บนมือถือจะเล็กจนอ่านไม่ออก)
• ย่อรูปภาพให้พอดีกับหน้าจอมือถือเพื่อให้โหลดเร็ว

เปลี่ยนเว็บไซต์ปัจจุบันเป็นแบบ Responsive ได้ไหม

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

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

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

ตรวจเว็บไซต์แบบ Responsive อย่างไร

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

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

1. 01ใช้มือถือของคุณเลื่อนดูตั้งแต่หน้าจอแรกจนสุด และดูว่ามีส่วนไหนเลื่อนไปด้านข้างไหม
2. 02หมุนมือถือเป็นแนวนอนแล้วดูอีกรอบ
3. 03เปิดดูบนมือถือรุ่นอื่น (iPhone · Galaxy) และแท็บเล็ตด้วย
4. 04บนคอมพิวเตอร์ ค่อย ๆ ลดความกว้างหน้าต่างเบราว์เซอร์ แล้วดูว่าการจัดวางเปลี่ยนอย่างเป็นธรรมชาติไหม
5. 05ลองกดปุ่มโทร · เปิดแผนที่ · จองด้วยตัวเอง
6. 06ปิด Wi-Fi แล้วเปิดด้วยอินเทอร์เน็ตมือถือ ดูว่ารูปภาพโหลดช้าเกินไปไหม

ตอนจ้างทำเว็บไซต์แบบ Responsive มักมองข้ามอะไรบ้าง

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

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

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

• จะแสดงแบบร่างดีไซน์หน้าจอมือถือแยกให้ดูด้วยไหม
• ตารางราคา · ตาราง · ตารางเวลา จะเปลี่ยนไปอย่างไรบนมือถือ
• รูปภาพถูกย่อให้พอดีกับขนาดหน้าจอก่อนอัปโหลดหรือไม่
• ก่อนเปิดเว็บไซต์ จะตรวจด้วยอุปกรณ์อะไรบ้าง