เราทราบดีว่าการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์เป็นแนวคิดที่ดีในการมอบประสบการณ์การใช้งานแบบหลายอุปกรณ์ที่ดีที่สุด แต่การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ยังช่วยให้การช่วยเหลือพิเศษดีขึ้นด้วย
ลองดูเว็บไซต์อย่าง Udacity
ผู้ใช้ที่มีสายตาเลือนรางซึ่งอ่านตัวพิมพ์ขนาดเล็กได้ยากอาจซูมหน้าเว็บ อาจซูมถึง 400% เนื่องจากเว็บไซต์ใช้การออกแบบที่ตอบสนองตามอุปกรณ์ อินเทอร์เฟซจึงจัดเรียงตัวเองใหม่สำหรับ "Viewport ที่เล็กลง" (ซึ่งจริงๆ แล้วคือหน้าเว็บที่ใหญ่ขึ้น) ซึ่งเหมาะสำหรับผู้ใช้เดสก์ท็อปที่ต้องการขยายหน้าจอและผู้ใช้โปรแกรมอ่านหน้าจอบนอุปกรณ์เคลื่อนที่ ถือว่าได้ประโยชน์ทั้งสองฝ่าย ต่อไปนี้คือหน้าเว็บเดียวกันที่ขยายเป็น 400%
ที่จริงแล้ว การออกแบบที่ปรับตามหน้าจอช่วยให้เราปฏิบัติตามกฎ 1.4.4 ของรายการตรวจสอบ WebAIM ซึ่งระบุว่าหน้าเว็บต้อง "อ่านได้และใช้งานได้เมื่อขนาดข้อความเพิ่มขึ้นเป็น 2 เท่า"
การอธิบายการออกแบบที่ตอบสนองทั้งหมดอยู่นอกขอบเขตของคู่มือนี้ แต่เรามีประเด็นสำคัญบางอย่างที่จะช่วยปรับปรุงประสบการณ์การใช้งานที่ตอบสนองและช่วยให้ผู้ใช้เข้าถึงเนื้อหาได้ดียิ่งขึ้น
ใช้เมตาแท็ก Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
การตั้งค่า width=device-width จะตรงกับความกว้างของหน้าจอในพิกเซลที่ไม่ขึ้นกับอุปกรณ์
และการตั้งค่า initial-scale=1 จะสร้างความสัมพันธ์แบบ 1:1 ระหว่างพิกเซล CSS
กับพิกเซลที่ไม่ขึ้นกับอุปกรณ์ การทำเช่นนี้จะสั่งให้เบราว์เซอร์ปรับเนื้อหาให้พอดีกับขนาดหน้าจอ เพื่อให้ผู้ใช้ไม่เห็นเพียงข้อความที่บีบอัด
ดูข้อมูลเพิ่มเติมได้ที่ปรับขนาดเนื้อหาให้เหมาะสมกับวิวพอร์ต
อนุญาตให้ผู้ใช้ซูม
คุณใช้เมตาแท็ก Viewport เพื่อป้องกันการซูมได้โดยตั้งค่า
maximum-scale=1 หรือ user-scaleable=no หลีกเลี่ยงการทำเช่นนี้ และอนุญาตให้ผู้ใช้
ซูมเข้าหากต้องการ
ออกแบบโดยคำนึงถึงความยืดหยุ่น
หลีกเลี่ยงการกำหนดเป้าหมายขนาดหน้าจอที่เฉพาะเจาะจง แต่ให้ใช้ตารางกริดที่ยืดหยุ่นแทน และทำการเปลี่ยนแปลงเลย์เอาต์เมื่อเนื้อหาต้องการ ดังที่เราเห็นในตัวอย่าง Udacity วิธีนี้ช่วยให้มั่นใจได้ว่าการออกแบบจะตอบสนองไม่ว่าพื้นที่ที่ลดลง จะเกิดจากหน้าจอที่เล็กลงหรือระดับการซูมที่สูงขึ้น
อ่านเพิ่มเติมเกี่ยวกับเทคนิคเหล่านี้ได้ในพื้นฐานการออกแบบเว็บที่ตอบสนองตามอุปกรณ์
ใช้หน่วยสัมพัทธ์สำหรับข้อความ
หากต้องการใช้กริดแบบยืดหยุ่นให้ได้ประโยชน์สูงสุด ให้ใช้หน่วยสัมพัทธ์ เช่น em หรือ rem สำหรับ สิ่งต่างๆ เช่น ขนาดข้อความ แทนค่าพิกเซล เบราว์เซอร์บางตัวรองรับการปรับขนาด ข้อความเฉพาะในการตั้งค่าของผู้ใช้ และหากคุณใช้ค่าพิกเซลสำหรับข้อความ การตั้งค่านี้ จะไม่มีผลต่อสำเนา อย่างไรก็ตาม หากคุณใช้หน่วยสัมพัทธ์ ตลอดทั้งเว็บไซต์ สำเนาของเว็บไซต์จะอัปเดตให้สอดคล้องกับค่ากำหนดของผู้ใช้
ซึ่งจะช่วยให้ทั้งเว็บไซต์ปรับโฟลว์ใหม่ได้เมื่อผู้ใช้ซูมเข้า ทำให้ผู้ใช้ได้รับประสบการณ์การอ่าน ที่จำเป็นต่อการใช้เว็บไซต์ของคุณ
หลีกเลี่ยงการยกเลิกการเชื่อมต่อมุมมองภาพจากคำสั่งซื้อต้นทาง
ผู้ใช้แป้นพิมพ์ที่ใช้แท็บผ่านเว็บไซต์จะทำตามลำดับเนื้อหาในเอกสาร HTML เมื่อใช้วิธีการจัดเลย์เอาต์ เช่น Flexbox และ Grid คุณจะเปลี่ยนลำดับภาพ ขององค์ประกอบได้ ซึ่งอาจทำให้ลำดับไม่ตรงกับลำดับแหล่งที่มา ซึ่งอาจทำให้ผู้ใช้เลื่อนไปมาในหน้าเว็บด้วยแท็บต่างๆ
ทดสอบการออกแบบที่แต่ละจุดพักโดยการกด Tab ผ่านเนื้อหา ถามตัวเองว่า "การไหลผ่านหน้าเว็บยังคงสมเหตุสมผลอยู่ไหม"
อ่านเพิ่มเติมเกี่ยวกับการเชื่อมต่อระหว่างแหล่งที่มากับภาพ ที่แสดง
โปรดระมัดระวังเกี่ยวกับคำใบ้เชิงพื้นที่
เมื่อเขียนข้อความขนาดเล็ก ให้หลีกเลี่ยงการใช้ภาษาที่ระบุตำแหน่งขององค์ประกอบในหน้าเว็บ สำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น อาจไม่มีบริบทที่แชร์นั้น และจะได้รับประโยชน์มากขึ้นจากการระบุสำเนาขององค์ประกอบที่แน่นอน ซึ่งทำให้ค้นหาได้
นอกจากนี้ยังช่วยผู้ใช้ทุกคนด้วย เนื่องจากการอ้างอิงการนำทางว่า "ทางซ้าย" อาจไม่สมเหตุสมผลในเวอร์ชันอุปกรณ์เคลื่อนที่ ซึ่งการนำทางอาจย้ายไปอยู่ที่อื่น
ตรวจสอบว่าเป้าหมายการแตะมีขนาดใหญ่พอในอุปกรณ์หน้าจอสัมผัส
ในอุปกรณ์หน้าจอสัมผัส ให้ตรวจสอบว่าเป้าหมายการแตะมีขนาดใหญ่พอที่จะทำให้ เปิดใช้งานได้ง่ายขึ้นโดยไม่แตะลิงก์อื่นๆ ขนาดที่เหมาะสมสำหรับองค์ประกอบที่แตะได้คือ 48 พิกเซล ดูคำแนะนำเพิ่มเติมเกี่ยวกับเป้าหมายการแตะ