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