การออกแบบสำหรับเว็บและแท็บเล็ต - การออกแบบที่ตอบสนองได้

• อาจ 18, 2024

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

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

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

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

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