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