ทุกวันนี้ เป็นเรื่องปกติที่จะสร้างเว็บไซต์หรือแอพที่ปรับเปลี่ยนส่วนต่อประสานผู้ใช้ตามเบราว์เซอร์หรืออุปกรณ์ มีสองวิธีในการบรรลุเป้าหมายนี้ ประการแรกเกี่ยวข้องกับการสร้างเว็บไซต์หรือแอปเวอร์ชันต่างๆ สำหรับอุปกรณ์ต่างๆ แต่มันไม่มีประสิทธิภาพและสามารถนำไปสู่ข้อผิดพลาดที่คาดเดาไม่ได้
ในการค้นหาแนวทางที่เชื่อถือได้และพร้อมรองรับอนาคต การออกแบบที่ตอบสนองหรือปรับตัวได้ถูกสร้างขึ้น โดยมุ่งเน้นที่การสร้างเลย์เอาต์เวอร์ชันเดียวที่ปรับให้เข้ากับเบราว์เซอร์หรืออุปกรณ์ต่างๆ โดยอัตโนมัติ
ในบทความนี้ เราจะเรียนรู้เกี่ยวกับการออกแบบเว็บที่ตอบสนองและหลักการพื้นฐานที่จะช่วยคุณสร้างเว็บไซต์ที่ยอดเยี่ยม
ส่วนผสมการออกแบบเว็บไซต์ที่ตอบสนอง
การออกแบบเว็บแบบ Responsive ไม่ได้ซับซ้อนอย่างที่คิด เป็นชุดแนวทางปฏิบัติที่คุณสามารถใช้เมื่อเขียน CSS ไม่ใช่เทคโนโลยีแยกต่างหากที่คุณจะต้องเรียนรู้ตั้งแต่เริ่มต้น คุณอาจกำลังปฏิบัติตามหลักการเหล่านี้อยู่แล้วโดยไม่รู้ตัว คุณสามารถเข้าใจการออกแบบเว็บที่ตอบสนองได้ด้วยการสำรวจองค์ประกอบสี่อย่าง: เลย์เอาต์ที่ลื่นไหล หน่วยที่ตอบสนอง รูปภาพที่ยืดหยุ่น และการสืบค้นสื่อ
เลย์เอาต์ของไหล
ด้วยเลย์เอาต์แบบไหล คุณสามารถสร้างหน้าเว็บที่ปรับให้เข้ากับความกว้างและความสูงของวิวพอร์ตปัจจุบันได้ แนวทางปฏิบัติทั่วไปรวมถึงการใช้คุณสมบัติความกว้างสูงสุดแทนที่จะกำหนดความกว้างคงที่ให้กับองค์ประกอบ นอกจากนี้ การใช้เปอร์เซ็นต์ ( % ) ความสูงของวิวพอร์ต ( vh ) หรือความกว้างของวิวพอร์ต ( vw ) ช่วยปรับปรุงความสามารถในการปรับตัวที่ไม่สามารถทำได้ด้วยพิกเซล ( px ) ดังนั้น ครั้งต่อไปที่คุณสร้างเลย์เอาต์ อย่าลืมแนะนำการเปลี่ยนแปลงเล็กๆ น้อยๆ เหล่านี้ และเริ่มรับประโยชน์จากเทคนิคการออกแบบที่ตอบสนอง
หน่วยตอบสนอง
เมื่อคุณย้ายไปยัง CSS ขั้นสูง คุณมักจะเห็นการใช้หน่วยremและemสำหรับความยาวแทนที่จะเป็นหน่วยpx เนื่องจากหน่วยremทำให้ปรับขนาดเลย์เอาต์ทั้งหมดได้ง่ายมาก โดยค่าเริ่มต้น 1rem เท่ากับ 16px เนื่องจากเป็นสัดส่วนกับ
ขนาดตัวอักษรขององค์ประกอบ โดยทั่วไปคือ 16px อย่างไรก็ตาม คุณสามารถตั้งค่า 1rem ให้เท่ากับ 10px (หรือค่าอื่นใด) เพื่อการคำนวณที่ง่ายขึ้น โดยการปรับขนาดแบบอักษรระดับบนสุด
ภาพที่ยืดหยุ่น
รูปภาพเป็นปัญหาหลักในขณะที่ออกแบบแม้กระทั่งเลย์เอาต์พื้นฐานที่สุด คุณต้องดูแลขนาดให้เหมาะสมเสมอเพื่อให้พอดีกับการออกแบบ นอกจากนี้ ตามค่าเริ่มต้นแล้ว จะไม่ปรับขนาดตามการเปลี่ยนแปลงในวิวพอร์ต ดังนั้น คุณควรใช้%สำหรับขนาดของรูปภาพของคุณ พร้อมกับคุณสมบัติความกว้างสูงสุด
คุณสามารถทำให้ไซต์ที่ตอบสนองกลับมามีชีวิตได้โดยใช้คิวรีสื่อ กริดแบบไหลเป็นสิ่งที่ดีในการเริ่มต้น แต่คุณจะพบว่ามีบางจุดที่เลย์เอาต์เริ่มพัง การเพิ่มเบรกพอยต์สำหรับความกว้างของวิวพอร์ตเหล่านี้จะปรับเลย์เอาต์สำหรับอุปกรณ์ต่างๆ ข้อความค้นหาสื่อช่วยให้คุณเลือกใช้ CSS ที่คัดเลือกโดยพิจารณาจากผลการทดสอบคุณสมบัติสื่อ คุณสามารถสำรวจคุณสมบัติ CSSใหม่เพื่อสร้างเว็บไซต์ที่ตอบสนองได้ในเวลาอันสั้น
หลักการออกแบบเว็บที่ตอบสนองตามอุปกรณ์
แม้ว่าการออกแบบเว็บที่ตอบสนองตามอุปกรณ์จะช่วยแก้ปัญหาหลายหน้าจอ แต่คุณอาจไม่มีข้อจำกัดทางกายภาพที่แน่นอนในการอ้างอิง ดังนั้นจึงมีหลักการออกแบบเว็บที่ตอบสนองตามอุปกรณ์พื้นฐาน 6 ประการเพื่อเริ่มต้นเมื่อออกแบบเลย์เอาต์ที่ตอบสนอง
ใช้เบรกพอยต์ตามเนื้อหา
หลักการออกแบบขั้นพื้นฐานข้อหนึ่งระบุว่าการออกแบบเว็บไซต์ของคุณควรสนับสนุนเนื้อหา ไม่ใช่ในทางกลับกัน เนื้อหาสื่อ เช่น วิดีโอ ภาพถ่าย และเนื้อหาข้อความ เช่น สำเนาเว็บที่มีความยาวและสั้น ควรแสดงผลอย่างเหมาะสมที่สุดบนทุกหน้าจอ กุญแจสำคัญในการออกแบบเว็บที่ตอบสนองคือการใช้จุดพักตามเนื้อหามากกว่าจุดพักตามอุปกรณ์
เลือกแบบอักษรเว็บและแบบอักษรของระบบอย่างชาญฉลาด
แบบอักษรเว็บดูน่าทึ่ง! คุณมีตัวเลือกมากมายในการปรับเปลี่ยนการออกแบบของคุณด้วยแบบอักษรเว็บที่ดูเท่ แต่คุณควรรู้ว่าเบราว์เซอร์จะต้องดาวน์โหลดแต่ละแบบอักษรของเว็บ แบบอักษรเว็บเพิ่มเติม เวลาในการดาวน์โหลดที่มากขึ้น ในทางกลับกัน แบบอักษรของระบบนั้นรวดเร็วปานสายฟ้าแลบ หากผู้ใช้ไม่มีฟอนต์ระบบที่มีชื่อบนอุปกรณ์ท้องถิ่น ฟอนต์นั้นจะถอยกลับไปเป็นฟอนต์ถัดไปในฟอนต์ตระกูลสแต็ก ดังนั้น อย่าลืมพิจารณาเวลาในการโหลดและความต้องการในการออกแบบเมื่อเลือกแบบอักษร
เพิ่มประสิทธิภาพภาพบิตแมปและเวกเตอร์
คุณมีไอคอนต่างๆ บนเว็บไซต์ที่รองรับเนื้อหาหรือไม่ แนวทางปฏิบัติที่ดีในการใช้รูปแบบบิตแมปหากไอคอนของคุณมีรายละเอียดมาก ในทางกลับกัน รูปแบบเวกเตอร์เป็นหนทางไปสู่ไอคอนที่ขยายขนาดขึ้นและลงอย่างสวยงาม เวกเตอร์มักมีขนาดเล็ก แต่ข้อเสียคือเบราว์เซอร์รุ่นเก่าบางตัวอาจไม่รองรับ นอกจากนี้ยังมีบางกรณีที่เวกเตอร์มีน้ำหนักมากกว่าบิตแมป เช่น เมื่อภาพมีรายละเอียดมาก ดังนั้น ตรวจสอบให้แน่ใจเสมอว่าคุณกำลังเพิ่มประสิทธิภาพภาพบิตแมปและเวกเตอร์ก่อนที่จะออนไลน์
ทำการทดสอบสำหรับการพับครั้งแรกที่ตอบสนอง
ส่วนแรกของเว็บไซต์คือมุมมองที่ผู้เข้าชมเห็นเมื่อโหลดครั้งแรก ก่อนการเลื่อนใดๆ มักจะมีส่วนฮีโร่ที่มีแถบการนำทางที่ตอบสนองสำเนาเบื้องต้นและสื่อ และ CTA การตอบสนองไม่ได้จำกัดอยู่แค่อุปกรณ์เคลื่อนที่เท่านั้น คุณควรพิจารณาแท็บเล็ต เกมคอนโซล และหน้าจออื่นๆ ด้วย ดังนั้น สิ่งสำคัญคือต้องทำการทดสอบบ่อยๆ อย่างน้อยสำหรับการดูครึ่งหน้าแรกของเว็บไซต์ คุณสามารถใช้ Chrome DevTools ( Lighthouse ) เพื่อทดสอบคุณภาพของหน้าเว็บได้
อย่าซ่อนเนื้อหาบนหน้าจอที่เล็กลง
หลายคนเคยคิดว่าผู้ใช้อุปกรณ์พกพามักเร่งรีบโดยมองหาข้อมูลขนาดพอดีคำ ในขณะที่ผู้ใช้เดสก์ท็อปมักจะชอบเนื้อหาแบบยาว ตอนนี้เราตระหนักดีว่าสิ่งนี้ไม่เป็นความจริงในโลกปัจจุบัน ผู้คนกำลังใช้อุปกรณ์เคลื่อนที่ในทุกที่ โดยมองหาเนื้อหาที่สมบูรณ์และเข้าถึงบริการทั้งหมดได้อย่างเต็มที่ คุณควรตรวจสอบให้แน่ใจว่าแทนที่จะซ่อนเนื้อหา คุณกำลังจัดการเลย์เอาต์และเบรกพอยต์เพื่อนำเสนออย่างง่ายดายและง่ายดายที่สุด
จัดการเลย์เอาต์โดยใช้ Nested Objects
การสร้างเลย์เอาต์ไซต์และองค์ประกอบการวางตำแหน่งอย่างถูกต้องนั้นต้องใช้ความพยายามพอสมควร คุณอาจประสบปัญหาในการจัดการองค์ประกอบหลายอย่างที่พึ่งพาซึ่งกันและกัน ดังนั้น คุณควรพิจารณาห่อองค์ประกอบที่เกี่ยวข้องในภาชนะหรือ
. ซึ่งช่วยลดงานในการจัดวางองค์ประกอบหลายๆ อย่างให้เหลือเพียงองค์ประกอบเดียว
การออกแบบที่ตอบสนอง: คุณควรเลือกเดสก์ท็อปก่อนหรือมือถือก่อน
วิธีแรกบนเดสก์ท็อปหมายความว่าคุณจะเขียน CSS สำหรับหน้าจอขนาดใหญ่ แล้วใช้การสืบค้นสื่อเพื่อลดขนาดการออกแบบสำหรับหน้าจอขนาดเล็ก ในทางตรงกันข้าม วิธีแรกสำหรับอุปกรณ์เคลื่อนที่เกี่ยวข้องกับการเขียน CSS สำหรับอุปกรณ์เคลื่อนที่ด้วยหน้าจอที่เล็กกว่า จากนั้นจึงใช้การสืบค้นสื่อเพื่อขยายการออกแบบสำหรับหน้าจอที่ใหญ่ขึ้น จุดเน้นหลักคือการลดเว็บไซต์และแอพให้เหลือเพียงสิ่งจำเป็นอย่างยิ่ง
หากคุณเพิ่งเริ่มต้นกับการพัฒนาเว็บแบบตอบสนอง คุณควรใช้แนวทางเดสก์ท็อปเป็นอันดับแรก เช่นเดียวกับเมื่อสิ้นสุดวัน คุณจะต้องซ้อนคอนเทนเนอร์ทีละรายการบนอุปกรณ์เคลื่อนที่ แม้ว่าจะเป็นการตัดสินใจส่วนบุคคลโดยสมบูรณ์ แต่แนวทางแรกสำหรับอุปกรณ์เคลื่อนที่จะช่วยคุณในการจัดโครงสร้าง HTML ให้ดีขึ้น ในขณะที่แนวทางแรกบนเดสก์ท็อปจะช่วยคุณด้วยเทคนิคการจัดวางและการเว้นวรรค