ตั้งแต่เริ่มต้น เวิลด์ไวด์เว็บได้รับการออกแบบมาให้เล่นได้โดยไม่จำเป็นต้องเข้าใจภาษาที่พูด ไม่ว่าคุณจะมีฮาร์ดแวร์ใด ไม่ว่าอุปกรณ์ของคุณจะใช้ระบบปฏิบัติการใด ตราบใดที่คุณเชื่อมต่ออินเทอร์เน็ตได้ คุณก็จะเข้าถึงเวิลด์ไวด์เว็บได้
ในช่วงแรกๆ ที่เข้าเว็บ คนส่วนใหญ่ใช้คอมพิวเตอร์เดสก์ท็อป ทุกวันนี้ เว็บพร้อมใช้งานทั้งบนเดสก์ท็อป แล็ปท็อป แท็บเล็ต โทรศัพท์แบบพับได้ ตู้เย็น และรถยนต์ ผู้ใช้คาดหวังว่าเว็บไซต์จะดูดีไม่ว่าจะใช้อุปกรณ์ใด การออกแบบให้รองรับขนาดหน้าจอสำหรับอุปกรณ์ทุกชนิด
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ไม่ใช่วิธีการแรกในการออกแบบเว็บไซต์ ในปีก่อนการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ นักออกแบบและนักพัฒนาเว็บได้ลองใช้เทคนิคที่แตกต่างกันมากมาย
ดีไซน์ความกว้างคงที่
ในช่วงต้นทศวรรษที่ 1990 เมื่อเว็บเริ่มได้รับความนิยมเป็นครั้งแรก จอภาพส่วนใหญ่มีขนาดหน้าจอกว้าง 640 พิกเซล สูง 480 พิกเซล ซึ่งก็คือท่อรังสีแคโทดนูน ไม่เหมือนกับจอแสดงผลคริสตัลเหลวแบนราบที่เรามีในปัจจุบัน
ในยุคแรกๆ ของการออกแบบเว็บ การออกแบบหน้าเว็บที่มีความกว้าง 640 พิกเซลก็ปลอดภัยแล้ว แต่ในขณะที่เทคโนโลยีอื่นๆ เช่น โทรศัพท์และกล้อง ลดขนาดลง บนหน้าจอต่างๆ ก็ใหญ่ขึ้น (และในที่สุดก็ดีขึ้น) ก่อนหน้านี้ หน้าจอส่วนใหญ่มีขนาด 800 x 600 พิกเซล การออกแบบเว็บจึงเปลี่ยนแปลงตามไปด้วย นักออกแบบและนักพัฒนาซอฟต์แวร์เริ่มสันนิษฐานว่า 800 พิกเซลเป็นค่าเริ่มต้นที่ปลอดภัยแล้ว
หน้าจอก็ใหญ่ขึ้นอีกครั้ง 1024 x 768 กลายเป็นค่าเริ่มต้น ให้ความรู้สึกเหมือนการประลองกำลังกันระหว่างนักออกแบบเว็บกับผู้ผลิตฮาร์ดแวร์
ไม่ว่าจะเป็น 640, 800 หรือ 1024 พิกเซล การเลือกความกว้างเฉพาะที่จะออกแบบนั้นเรียกว่า "การออกแบบความกว้างคงที่"
หากคุณระบุความกว้างคงที่สำหรับเลย์เอาต์ เลย์เอาต์จะดูดีที่ความกว้างเฉพาะดังกล่าวเท่านั้น หากผู้เข้าชมเว็บไซต์มีหน้าจอกว้างกว่าความกว้างที่คุณเลือกไว้ พื้นที่บนหน้าจอนั้นก็จะเสียไปโดยเปล่าประโยชน์ คุณสามารถจัดเนื้อหาหน้าเว็บไว้กึ่งกลางเพื่อกระจายพื้นที่เท่าๆ กันให้มากขึ้น (แทนที่จะมีพื้นที่ว่างในด้านหนึ่ง) แต่คุณอาจไม่ได้ใช้ประโยชน์จากพื้นที่ว่างที่มีอยู่อย่างเต็มที่
ในทำนองเดียวกัน หากผู้เข้าชมเข้ามาโดยมีหน้าจอที่แคบกว่าความกว้างที่คุณเลือกไว้ เนื้อหาจะไม่พอดีกับแนวนอน เบราว์เซอร์จะสร้าง Crawlbar ซึ่งมีลักษณะเทียบเท่าแถบเลื่อนในแนวนอน และผู้ใช้ต้องเลื่อนหน้าทั้งหน้าไปทางซ้ายและขวาเพื่อดูเนื้อหาทั้งหมด
เลย์เอาต์แบบของเหลว
แม้ว่านักออกแบบส่วนใหญ่จะใช้เลย์เอาต์ที่มีความกว้างคงที่ แต่บางคนก็เลือกที่จะทำให้เลย์เอาต์มีความยืดหยุ่น แทนที่จะใช้ความกว้างคงที่สำหรับเลย์เอาต์ คุณสามารถสร้างเลย์เอาต์ที่ยืดหยุ่นได้โดยใช้เปอร์เซ็นต์สำหรับความกว้างของคอลัมน์ การออกแบบเหล่านี้ทำงานได้ในหลายๆ สถานการณ์มากกว่าเลย์เอาต์ที่มีความกว้างคงที่ซึ่งเหมาะกับขนาดที่เฉพาะเจาะจงเพียงขนาดเดียว
ซึ่งเรียกว่าเลย์เอาต์แบบไหล แต่แม้ว่าเลย์เอาต์แบบไหลจะดูดีในหลายๆ ความกว้าง แต่จะเริ่มแย่ลงเมื่อสิ้นสุด ในหน้าจอกว้าง เลย์เอาต์จะมีลักษณะยืดยาว ในหน้าจอแคบ เลย์เอาต์ดูไม่เป็นระเบียบ ซึ่งยังไม่ใช่วิธีที่ดีที่สุด
คุณลดปัญหาเหล่านี้ได้โดยใช้ min-width และ max-width สำหรับเลย์เอาต์ของคุณ
แต่ในขนาดที่ต่ำกว่าความกว้างขั้นต่ำหรือเกินความกว้างสูงสุด คุณก็ยังพบปัญหาเดียวกับเลย์เอาต์ที่มีความกว้างคงที่อยู่
บนหน้าจอกว้าง คุณจะมีพื้นที่ที่ไม่ได้ใช้เหลืออยู่อย่างสูญเปล่า
ในหน้าจอที่แคบ ผู้ใช้จะต้องเลื่อนทั้งหน้าไปทางซ้ายและขวาเพื่อดูทุกอย่าง
คำว่า liquid เป็นเพียงคำที่ใช้อธิบายเลย์เอาต์ประเภทนี้เท่านั้น การออกแบบประเภทนี้เรียกอีกอย่างว่าเลย์เอาต์แบบไหลหรือเลย์เอาต์แบบยืดหยุ่น และคำศัพท์ก็ไหลลื่นไม่แพ้เทคนิค
หน้าจอขนาดเล็ก
ในศตวรรษที่ 21 เว็บยังคงเติบโตขึ้นเรื่อยๆ เช่นเดียวกับจอภาพ แต่มีหน้าจอใหม่ๆ ที่เล็กกว่าอุปกรณ์เดสก์ท็อปทุกเครื่อง เมื่อโทรศัพท์มือถือที่มีเบราว์เซอร์ซึ่งมาพร้อมฟีเจอร์ครบถ้วน นักออกแบบต้องเผชิญกับความยากลำบาก พวกเขาจะมั่นใจได้อย่างไรว่างานออกแบบของตัวเองจะดูดีบนคอมพิวเตอร์เดสก์ท็อปและโทรศัพท์มือถือ บริษัทต้องการวิธีจัดรูปแบบเนื้อหาสำหรับหน้าจอที่มีขนาดเล็ก 240 พิกเซลและใหญ่เท่ากับความกว้างหลายพันพิกเซล
เว็บไซต์แยกกัน
ทางเลือกหนึ่งคือการสร้างโดเมนย่อยแยกต่างหากสำหรับผู้เข้าชมบนอุปกรณ์เคลื่อนที่ แต่คุณต้องเก็บรักษาโค้ดเบสและการออกแบบ 2 แบบแยกกัน และหากต้องการเปลี่ยนเส้นทางผู้เข้าชม ทางอุปกรณ์เคลื่อนที่ คุณจะต้องทำ การดักจับ User Agent ซึ่งอาจทำให้ไม่น่าเชื่อถือและปลอมแปลงได้ง่าย Chrome จะเลิกใช้งานสตริง User Agent ด้วยเหตุผลด้านความเป็นส่วนตัว รวมถึงยังไม่มีเส้นที่ชัดเจนระหว่างอุปกรณ์เคลื่อนที่กับไม่ใช่อุปกรณ์เคลื่อนที่ คุณส่งอุปกรณ์แท็บเล็ตไปที่เว็บไซต์ใด
เลย์เอาต์แบบปรับอัตโนมัติ
แทนที่จะมีเว็บไซต์แยกกันในโดเมนย่อยต่างๆ คุณสามารถมีเว็บไซต์เดียวที่มีเลย์เอาต์ความกว้างคงที่ 2-3 เลย์เอาต์
เมื่อการค้นหาสื่อเข้ามาใน CSS เป็นครั้งแรก ก็เข้ามาเปิดประตูสู่การทำให้เลย์เอาต์มีความยืดหยุ่นมากขึ้น แต่นักพัฒนาซอฟต์แวร์จำนวนมากยังคงสะดวกใจมากที่สุดที่จะสร้างเลย์เอาต์แบบความกว้างคงที่ เทคนิคหนึ่งเกี่ยวข้องกับการสลับระหว่างเลย์เอาต์ที่มีความกว้างคงที่จำนวนหนึ่งที่ความกว้างที่ระบุ บางคนเรียกวิธีนี้ว่าการออกแบบที่ปรับเปลี่ยนได้
การออกแบบที่ปรับเปลี่ยนได้ช่วยให้นักออกแบบแสดงเลย์เอาต์ที่ดูดีในขนาดที่แตกต่างกันได้ 2-3 ขนาด แต่การออกแบบกลับดูไม่แม่นยำนักเมื่อดูจากขนาดต่างๆ เหล่านี้ ปัญหาพื้นที่ส่วนเกินยังคงมีอยู่ แม้ว่าจะไม่แย่เท่ากับเลย์เอาต์ที่มีความกว้างคงที่
การใช้คิวรี่สื่อ CSS จะช่วยแสดงเลย์เอาต์ที่ใกล้กับความกว้างของเบราว์เซอร์ให้กับผู้ใช้มากที่สุด แต่เนื่องจากอุปกรณ์มีหลายขนาด เลย์เอาต์อาจดูไม่ค่อยเหมาะกับผู้ใช้ส่วนใหญ่
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์
หากเลย์เอาต์แบบปรับได้เป็นการผสมผสานระหว่างคำค้นหาสื่อและเลย์เอาต์แบบความกว้างคงที่ การออกแบบเว็บที่ตอบสนองตามอุปกรณ์จะเป็นการผสมผสานคำค้นหาสื่อและเลย์เอาต์แบบไหล
คำนี้จัดทำโดย Ethan Marcotte ใน บทความใน A List Apart ในปี 2010
Ethan ได้กำหนดเกณฑ์ 3 ข้อสำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ดังนี้
- ตารางกริดแบบไหล
- สื่อแบบไหล
- คำค้นหาสื่อ
เลย์เอาต์และรูปภาพของเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์จะดูดีในทุกอุปกรณ์ แต่มีปัญหา 1 ข้อ
องค์ประกอบ meta สำหรับ viewport
เบราว์เซอร์บนโทรศัพท์มือถือต้องจัดการกับเว็บไซต์ที่ออกแบบโดยมีเลย์เอาต์ความกว้างคงที่สำหรับหน้าจอที่กว้างขึ้น โดยค่าเริ่มต้น เบราว์เซอร์บนอุปกรณ์เคลื่อนที่มีสมมติฐานว่า 980 พิกเซลคือความกว้างที่ผู้ใช้ออกแบบ (และไม่ใช่สิ่งผิด) ดังนั้น แม้ว่าคุณจะใช้เลย์เอาต์แบบไหล เบราว์เซอร์จะใช้ความกว้าง 980 พิกเซล แล้วปรับขนาดหน้าเว็บที่แสดงผลลงเท่ากับความกว้างจริงของหน้าจอ
ถ้าคุณใช้การออกแบบที่ตอบสนองตามอุปกรณ์ คุณต้องบอกเบราว์เซอร์ว่าอย่าทำการปรับขนาดนั้น
ซึ่งทำได้โดยใช้เอลิเมนต์ meta ใน head ของหน้าเว็บ ดังนี้
<meta name="viewport" content="width=device-width, initial-scale=1">
มี 2 ค่า คั่นด้วยเครื่องหมายจุลภาค
รายการแรกคือ width=device-width
ซึ่งจะบอกเบราว์เซอร์ให้คิดว่าความกว้างของเว็บไซต์เท่ากับความกว้างของอุปกรณ์
(แทนที่จะสมมติว่าความกว้างของเว็บไซต์เท่ากับ 980 พิกเซล)
ค่าที่ 2 คือ initial-scale=1
ซึ่งจะบอกให้เบราว์เซอร์ทราบว่าต้องทำการปรับขนาดมากน้อยเพียงใด
ด้วยการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ คุณคงไม่อยากให้เบราว์เซอร์ทำการปรับขนาดเลย
เมื่อมีเอลิเมนต์ meta ดังกล่าว หน้าเว็บของคุณก็พร้อมที่จะตอบสนอง
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ที่ทันสมัย
ปัจจุบันเราสามารถสร้างเว็บไซต์ที่มีการตอบสนองได้ไกลกว่าขนาดของวิวพอร์ต
ฟีเจอร์สื่อช่วยให้นักพัฒนาแอปเข้าถึงค่ากำหนดของผู้ใช้และเปิดใช้ประสบการณ์การใช้งานที่ปรับแต่งได้
การค้นหาคอนเทนเนอร์ช่วยให้คอมโพเนนต์เป็นเจ้าของข้อมูลที่ปรับเปลี่ยนตามอุปกรณ์ของตนเองได้
องค์ประกอบ picture ช่วยให้นักออกแบบตัดสินใจเกี่ยวกับทิศทางงานศิลป์โดยอิงตามอัตราส่วนหน้าจอ
ตรวจสอบความเข้าใจ
ทดสอบความรู้ด้านการออกแบบเว็บที่ตอบสนองตามอุปกรณ์
ในปี 2021 การออกแบบหน้าเว็บที่มีความกว้างคงที่จะปลอดภัยไหม
โดยทั่วไปแล้วเลย์เอาต์แบบไหลมักจะพบปัญหาบนหน้าจอประเภทใดบ้าง
เกณฑ์เดิม 3 ข้อสำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์คือ
การออกแบบที่ตอบสนองตามอุปกรณ์คือโลกที่น่าตื่นเต้นและเติบโตขึ้นเรื่อยๆ ของความเป็นไปได้ ในส่วนที่เหลือของหลักสูตรนี้ คุณจะได้เรียนรู้เกี่ยวกับเทคโนโลยีเหล่านี้ และวิธีใช้งานเพื่อสร้าง ที่ตอบสนองตามอุปกรณ์สำหรับทุกคน