เราทราบดีว่าการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์เป็นแนวคิดที่ดีเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุดในอุปกรณ์หลายประเภท แต่การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ยังส่งผลดีต่อการช่วยเหลือพิเศษด้วย
ลองดูเว็บไซต์อย่าง Udacity
ผู้ใช้ที่มีสายตาเลือนรางซึ่งมีปัญหาในการอ่านสิ่งพิมพ์ขนาดเล็กอาจซูมเข้าหน้าเว็บได้มากถึง 400% เนื่องจากเว็บไซต์ออกแบบมาให้ตอบสนองตามอุปกรณ์ UI จะจัดเรียงตัวเองใหม่สำหรับ "วิวพอร์ตที่เล็กลง" (จริงๆ แล้วคือหน้าเว็บที่ใหญ่ขึ้น) ซึ่งเหมาะสำหรับผู้ใช้เดสก์ท็อปที่ต้องการการขยายหน้าจอ และผู้ใช้โปรแกรมอ่านหน้าจอบนอุปกรณ์เคลื่อนที่ด้วย ถือว่าได้ประโยชน์ทั้งสองฝ่าย ต่อไปนี้คือหน้าเว็บเดียวกันที่ขยายเป็น 400%
ความจริงแล้ว การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ก็เพียงพอแล้วที่จะทำให้เป็นไปตามกฎ 1.4.4 ของเช็กลิสต์ WebAIM ซึ่งระบุว่าหน้าเว็บ "… ควรอ่านได้และใช้งานได้เมื่อขนาดข้อความเพิ่มขึ้นเป็น 2 เท่า"
รายละเอียดทั้งหมดเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์อยู่นอกเหนือขอบเขตของคู่มือนี้ แต่ต่อไปนี้เป็นประเด็นสำคัญ 2-3 ข้อที่เป็นประโยชน์ต่อประสบการณ์การใช้งานที่ปรับเปลี่ยนตามอุปกรณ์และช่วยให้ผู้ใช้เข้าถึงเนื้อหาของคุณได้ดียิ่งขึ้น
ใช้เมตาแท็ก 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 สำหรับสิ่งต่างๆ เช่น ขนาดข้อความ แทนค่าพิกเซล บางเบราว์เซอร์รองรับการปรับขนาดข้อความตามค่ากำหนดของผู้ใช้เท่านั้น และหากคุณใช้ค่าพิกเซลสำหรับข้อความ การตั้งค่านี้จะไม่ส่งผลต่อการคัดลอก อย่างไรก็ตาม หากคุณใช้หน่วยแบบสัมพัทธ์ตลอด ข้อความในเว็บไซต์จะอัปเดตให้สอดคล้องกับความต้องการของผู้ใช้
ซึ่งจะช่วยให้ทั้งเว็บไซต์จัดเรียงใหม่เมื่อผู้ใช้ซูม สร้างประสบการณ์การอ่านที่ผู้ใช้ต้องการเพื่อใช้เว็บไซต์
หลีกเลี่ยงการยกเลิกการเชื่อมต่อมุมมองภาพกับลําดับแหล่งที่มา
ผู้เข้าชมที่กด Tab ไปยังส่วนต่างๆ ของเว็บไซต์ด้วยแป้นพิมพ์จะดูเนื้อหาตามลําดับในเอกสาร HTML เมื่อใช้วิธีการจัดวางสมัยใหม่ เช่น Flexbox และ Grid ก็อาจทำให้การแสดงผลภาพไม่ตรงกับลําดับแหล่งที่มาได้ ซึ่งอาจทำให้คนที่ใช้แป้นพิมพ์เลื่อนไปรอบๆ หน้าได้อย่างน่าอึดอัด
อย่าลืมทดสอบการออกแบบที่จุดพักแต่ละจุดโดยกด Tab ผ่านเนื้อหาเพื่อดูว่าหน้าเว็บยังดูสมเหตุสมผลอยู่ไหม
อ่านเพิ่มเติมเกี่ยวกับแหล่งที่มาและจอแสดงผลตัดการเชื่อมต่อ
ระวังเบาะแสเชิงพื้นที่
เมื่อเขียนด้วยกล้องจุลทรรศน์ หลีกเลี่ยงการใช้ภาษาที่ระบุตำแหน่งขององค์ประกอบในหน้า เช่น การอ้างอิงการนําทาง "ทางด้านซ้าย" นั้นไม่เหมาะสมในเวอร์ชันอุปกรณ์เคลื่อนที่เมื่อการนําทางอยู่ด้านบนของหน้าจอ
ตรวจสอบว่าเป้าหมายการแตะมีขนาดใหญ่พอในอุปกรณ์หน้าจอสัมผัส
ในอุปกรณ์หน้าจอสัมผัส ให้ตรวจสอบว่าเป้าหมายการแตะมีขนาดใหญ่พอที่จะทำให้เปิดใช้งานได้ง่ายโดยไม่ต้องแตะลิงก์อื่นๆ ขนาดที่เหมาะสมสําหรับองค์ประกอบที่โต้ตอบได้คือ 48 พิกเซล อ่านคําแนะนําเพิ่มเติมเกี่ยวกับเป้าหมายการแตะ