การออกแบบที่ตอบสนองคืออะไร?

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

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

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

หมายเหตุบรรณาธิการ: ต่อไปนี้เป็นการแนะนำเบื้องต้นเกี่ยวกับการออกแบบที่ตอบสนองซึ่งไม่ได้มีไว้สำหรับนักออกแบบเว็บไซต์ที่มีประสบการณ์มากกว่า

องค์ประกอบหลักของการออกแบบที่ตอบสนอง

นั่นคือที่มาของ Responsive Web Design เนื้อหาและ/หรือเลย์เอาต์ที่ปรับให้เข้ากับขนาดของหน้าจอที่จะดูโดยอัตโนมัติ โดยพื้นฐานที่สุด องค์ประกอบหลักสามประการของ Responsive Design คือ ตารางที่ยืดหยุ่น รูปภาพที่ยืดหยุ่น และ Media Queries ซึ่งส่วนหลังนี้นำมาใช้เป็นส่วนหนึ่งของ CSS3 เพิ่มเติมเกี่ยวกับสิ่งเหล่านั้นในอีกสักครู่

กริดแบบยืดหยุ่น

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

ภาพที่ยืดหยุ่น

ขั้นพื้นฐาน ภาพที่ยืดหยุ่นที่สุดสร้างได้ง่ายกว่านั้นโดยการเขียนกฎง่ายๆ ที่ระบุว่า:

 img { max-width: 100%; }

โดยพื้นฐานแล้ว นี่หมายความว่าหากองค์ประกอบมีขนาดใหญ่กว่าคอนเทนเนอร์ กฎจะบังคับให้ตรงกับความกว้างของคอนเทนเนอร์นั้น และเนื่องจากเบราว์เซอร์สมัยใหม่ปรับขนาดภาพตามสัดส่วน อัตราส่วนภาพของภาพจึงถูกรักษาไว้เช่นกัน ยิ่งไปกว่านั้น กฎ 100% ยังสามารถใช้กับองค์ประกอบอื่นๆ เกือบทั้งหมดได้เช่นกัน เช่น วิดีโอแบบฝัง

คำถามสื่อ

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

Media Queries ขึ้นอยู่กับศักยภาพนั้นและบางส่วน แต่แทนที่จะต้องคำนึงถึงประเภทของอุปกรณ์แบบที่ Media Types ทำ Media Queries จะพิจารณาที่ความสามารถของอุปกรณ์แทน

Media Query อย่างง่ายอาจมีลักษณะดังนี้:

คอมโพเนนต์สองอย่างของข้อความค้นหาคือประเภทสื่อ ตั้งค่าเป็นหน้าจอ แล้วตามด้วยข้อความค้นหาจริง (max-device-width: 480px) ซึ่งจะถามว่าความกว้างของอุปกรณ์คือ 480px หรือน้อยกว่านั้น หากเป็นกรณีนี้ อุปกรณ์จะโหลด generic.css หากไม่เป็นเช่นนั้น ลิงก์จะถูกละเว้น เช่นเดียวกับส่วนอื่นๆ จนกว่าจะระบุความละเอียดที่ถูกต้องและโหลดสไตล์ชีตที่เหมาะสม

มากกว่าแค่ความละเอียด

แต่ความละเอียดไม่ได้เป็นเพียงองค์ประกอบการออกแบบเดียวที่สามารถควบคุมได้ผ่านการใช้ Media Queries ความกว้างและความสูงของหน้าต่างเบราว์เซอร์ การวางแนวนอนและแนวตั้ง แม้กระทั่งเลย์เอาต์ เป็นพารามิเตอร์อื่นๆ บางส่วนที่สามารถตั้งค่าได้

ตัวอย่างเช่น หาก Media Query ตรวจพบว่าอุปกรณ์เป็นสมาร์ทโฟน การออกแบบที่อาจโหลดโดยแสดงสามคอลัมน์พร้อมพื้นที่ข้อความและแถบด้านข้างแนวตั้งสองแถบบนหน้าจอคอมพิวเตอร์อาจโหลดบนหน้าจอสมาร์ทโฟนเป็นพื้นที่ข้อความแบบเต็มความกว้างด้วย แถบด้านข้างสองแถบเป็นองค์ประกอบแนวนอนด้านล่าง

ความคิดที่ยืดหยุ่น

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

แม้ว่าจะมีช่วงการเรียนรู้ในการรวม Media Queries เข้ากับสไตล์ชีต แต่การเปลี่ยนจากการออกแบบด้วยพิกเซลเป็นการออกแบบด้วยเปอร์เซ็นต์ที่หยุดนักออกแบบเว็บไซต์บางคน แม้ว่าในความเป็นจริงแล้ว การออกแบบที่มีเปอร์เซ็นต์ไม่แตกต่างกันมากนัก และง่ายกว่าด้วย

ตัวอย่างเช่น พิจารณาความแตกต่างระหว่างการกำหนดความกว้าง 100% และ 100 พิกเซลให้กับสององค์ประกอบที่เหมือนกัน ในข้อเดียว คุณสามารถมั่นใจได้ว่าองค์ประกอบจะเต็มหน้าจอ ไม่ว่าจะเป็นหน้าจอของเดสก์ท็อป แล็ปท็อป หรือ iPhone แต่องค์ประกอบที่มีความกว้าง 100 พิกเซลจะมีขนาดใหญ่บนหน้าจอ iPhone 480 พิกเซล แต่จะค่อนข้างเล็กเมื่อเทียบกับหน้าจอเดสก์ท็อปที่มีความละเอียด 1600×900

การออกแบบที่ตอบสนองหมายถึงธุรกิจ

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

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

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