รวิศ

Responsive Design ที่ดีไม่ใช่เอาหน้า Desktop มาบีบให้แคบ

นี่คือสิ่งที่ผมใช้แยกเว็บ Responsive จริงออกจากเว็บที่ “เปิดบนมือถือได้”

ถ้าจอเล็กลง เนื้อหาบางอย่างควรเปลี่ยนลำดับด้วย ไม่ใช่แค่เปลี่ยนจำนวนคอลัมน์

ตัวอย่างที่ชัดใน UFAGM

สมมติหน้ากีฬาบน Desktop มี:

ตาราง → ตัวกรอง → ข้อมูลเสริม → ภาพ → รายละเอียด

บนมือถือ ลำดับที่เหมาะอาจกลายเป็น:

วันที่ → ตัวกรอง → รายการ → รายละเอียด → ภาพประกอบ

เพราะพฤติกรรมการใช้จอต่างกัน

ผมจึงจะดู Responsive Behavior ผ่าน 4 Breakpoint Question:

อะไรควรหายไป?
ของตกแต่งบางส่วนอาจไม่จำเป็นบนมือถือ

อะไรควรขึ้นมาก่อน?
ข้อมูลที่ใช้ตัดสินใจควรอยู่สูงขึ้น

อะไรควรย่อ?
ข้อความยาวหรือ Navigation อาจต้องถูกจัดใหม่

อะไรต้องยังคงเดิม?
ชื่อหน้า สถานะ และปุ่มหลักไม่ควรเปลี่ยนความหมาย

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

จุดที่ผมชอบ

เว็บไซต์มีเนื้อหาแบบเป็นหมวดอยู่แล้ว จึงเหมาะกับ Component-based Responsive Design มาก เพราะสามารถออกแบบ Card, Policy Block และ Navigation Pattern แยกกันได้