เทคโนโลยีการพัฒนาเว็บไซต์เป็นกระบวนการที่หลากหลาย แต่ถึงกระนั้น ทุกขั้นตอนของมันสามารถแบ่งออกเป็นสององค์ประกอบหลัก - การใช้งานและเปลือกนอก หรือตามธรรมเนียมของผู้ดูแลเว็บ แบ็กเอนด์ และฟรอนต์เอนด์ ตามลำดับ ผู้ที่สั่งซื้อเว็บไซต์ของตนจากสตูดิโอพัฒนาเว็บมักจะเชื่ออย่างไร้เดียงสาว่าควรเน้นที่การทำงานเท่านั้น และนี่จะเป็นการตัดสินใจที่ถูกต้อง แต่นี่เป็นเรื่องจริงในกรณีที่หายากมาก ซึ่งปกติแล้วสำหรับโครงการเริ่มต้นที่อยู่ในขั้นตอนการทดสอบเบต้า มิฉะนั้น การออกแบบกราฟิกและอินเทอร์เฟซผู้ใช้จะต้องเป็นไปตามมาตรฐานการพัฒนาเว็บและสะดวกเท่านั้น
เสาหลักแรกที่ผู้ออกแบบอินเทอร์เฟซหรือนักออกแบบต้องเผชิญคือความกว้างของเค้าโครงไซต์ ท้ายที่สุดแล้วจำเป็นต้องวาดส่วนต่อประสาน มีสองวิธีเกิดขึ้นโดยสัญชาตญาณ - สร้างเลย์เอาต์แยกกันสำหรับความละเอียดหน้าจอยอดนิยมแต่ละอัน หรือสร้างเวอร์ชันเดียวของไซต์สำหรับจอแสดงผลทั้งหมด และทั้งสองตัวเลือกจะผิด แต่อย่างแรกเลย
ความกว้างเว็บไซต์มาตรฐานเป็นพิกเซลสำหรับรูน
ก่อนการพัฒนาเลย์เอาต์แบบปรับได้ การพัฒนาไซต์ที่มีความกว้างหนึ่งพันพิกเซลเป็นปรากฏการณ์จำนวนมาก ตัวเลขนี้ถูกเลือกด้วยเหตุผลง่ายๆ เพียงข้อเดียว - เพื่อให้ไซต์พอดีกับหน้าจอใดๆ และสิ่งนี้ก็มีตรรกะของมันเอง แต่สมมติว่าอย่างน้อยคนๆ นั้นยังมีจอภาพ HD บนเดสก์ท็อปเป็นอย่างน้อย ในกรณีนี้ เลย์เอาต์ของคุณจะดูเหมือนแถบเล็กๆ ตรงกลางหน้าจอ ซึ่งทุกอย่างจะรวมกันเป็นกองเดียว และด้านข้างจะมีพื้นที่ว่างขนาดใหญ่ที่ไม่ได้ใช้ ตอนนี้ สมมติว่ามีผู้เข้าถึงเว็บไซต์ของคุณบนแท็บเล็ตที่มีหน้าจอกว้าง 800px และทำเครื่องหมายที่ "แสดงเว็บไซต์ทั้งหมด" ในการตั้งค่า ในกรณีนี้ ไซต์ของคุณจะแสดงอย่างไม่ถูกต้อง เนื่องจากจะไม่พอดีกับหน้าจอ
จากการพิจารณาเหล่านี้ เราสามารถสรุปได้ว่าความกว้างคงที่สำหรับเลย์เอาต์นั้นไม่เหมาะกับเราอย่างแน่นอน และเราจำเป็นต้องหาวิธีอื่น มาวิเคราะห์แนวคิดการจัด Layout แยกกันสำหรับความกว้างหน้าจอแต่ละแบบ
เลย์เอาต์สำหรับทุกโอกาส
หากคุณเลือกเป็นกลยุทธ์ในการสร้างเลย์เอาต์สำหรับหน้าจอทุกขนาดในตลาด ไซต์ของคุณจะมีเอกลักษณ์เฉพาะตัวที่สุดบนอินเทอร์เน็ตทั้งหมด ท้ายที่สุด เป็นไปไม่ได้เลยในปัจจุบันที่จะครอบคลุมอุปกรณ์ทั้งหมด โดยพยายามปรับแต่งสำหรับแต่ละตัวเลือก แต่ถ้าคุณมุ่งเน้นไปที่ความละเอียดของจอภาพและหน้าจออุปกรณ์ที่ได้รับความนิยมมากที่สุด แนวคิดนี้ก็ไม่เลว ข้อเสียเพียงอย่างเดียวของมันคือต้นทุนทางการเงิน เมื่อผู้ออกแบบส่วนต่อประสาน ผู้ออกแบบ และผู้เขียนโค้ดถูกบังคับให้ทำงานเดียวกัน 5 หรือ 6 ครั้ง โครงการจะต้องเสียค่าใช้จ่ายสูงกว่าราคาที่ตั้งไว้แต่เดิมอย่างไม่เป็นสัดส่วน
ดังนั้น เว็บไซต์ที่มีหน้าเดียวจึงสามารถอวดเวอร์ชันต่างๆ มากมายสำหรับหน้าจอต่างๆ ได้ โดยมีจุดประสงค์เพื่อขายสินค้าชิ้นเดียวและต้องแน่ใจว่าทำได้ดี ถ้าคุณไม่มีแลนดิ้งเหล่านี้ แต่มีไซต์หลายหน้า คุณควรคิดให้มากขึ้น
ขนาดไซต์ยอดนิยม
การประนีประนอมระหว่างสองสุดขั้วคือการแสดงเลย์เอาต์สำหรับขนาดหน้าจอสามหรือสี่ขนาด หนึ่งในนั้นต้องเป็นเลย์เอาต์สำหรับอุปกรณ์พกพา ส่วนที่เหลือควรปรับให้เข้ากับหน้าจอเดสก์ท็อปขนาดเล็ก กลาง และใหญ่ วิธีการเลือกความกว้างของไซต์? ด้านล่างนี้ เรานำเสนอสถิติบริการ HotLog ประจำเดือนพฤษภาคม 2017 ซึ่งแสดงให้เราเห็นการกระจายความนิยมของความละเอียดหน้าจออุปกรณ์ต่างๆ รวมถึงการเปลี่ยนแปลงของตัวบ่งชี้นี้
จากตาราง คุณสามารถดูวิธีกำหนดขนาดของไซต์ที่คุณต้องการใช้ นอกจากนี้ เราสามารถสรุปได้ว่ารูปแบบที่พบบ่อยที่สุดในปัจจุบันคือหน้าจอขนาด 1366 x 768 พิกเซล หน้าจอดังกล่าวได้รับการติดตั้งในแล็ปท็อปราคาประหยัดดังนั้นความนิยมจึงเป็นเรื่องปกติ จอภาพที่ได้รับความนิยมมากที่สุดรองลงมาคือจอภาพ Full HD ซึ่งเป็นมาตรฐานระดับทองสำหรับวิดีโอ เกม และด้วยเหตุนี้สำหรับการสร้างเค้าโครงเว็บไซต์ เพิ่มเติมในตาราง เราเห็นความละเอียดของอุปกรณ์พกพา 360 x 640 พิกเซล เช่นเดียวกับตัวเลือกต่างๆ สำหรับหน้าจอเดสก์ท็อปและมือถือหลังจากนั้น
ออกแบบเลย์เอาต์
โซหลังจากวิเคราะห์สถิติแล้ว เราสามารถสรุปได้ว่าความกว้างของไซต์ที่เหมาะสมมี 4 รูปแบบ:
- รุ่นแล็ปท็อปที่มีความกว้าง 1366px
- เวอร์ชั่น Full HD
- A รูปแบบกว้าง 800px สำหรับแสดงผลบนจอภาพเดสก์ท็อปขนาดเล็ก
- เวอร์ชันมือถือของไซต์ - กว้าง 360 พิกเซล
สมมติว่าเราได้ตัดสินใจว่าจะใช้ขนาดใดสำหรับแหล่งที่มาที่สร้างขึ้นสำหรับไซต์ แต่โครงการดังกล่าวยังคงมีค่าใช้จ่ายสูง ลองมาดูตัวเลือกเพิ่มเติมกัน คราวนี้โดยไม่ต้องใช้ความกว้างคงที่
ทำให้เค้าโครงมีความยืดหยุ่น
มีทางเลือกอื่น เมื่อปรับให้เข้ากับขนาดหน้าจอขั้นต่ำเท่านั้น และขนาดไซต์จะถูกกำหนดเป็นเปอร์เซ็นต์ ในเวลาเดียวกัน องค์ประกอบอินเทอร์เฟซ เช่น เมนู ปุ่ม และโลโก้ สามารถตั้งค่าเป็นค่าสัมบูรณ์ โดยเน้นที่ขนาดต่ำสุดของความกว้างหน้าจอเป็นพิกเซล ในทางกลับกัน บล็อกที่มีเนื้อหาจะถูกยืดออกตามเปอร์เซ็นต์ที่ระบุของความกว้างของพื้นที่หน้าจอ วิธีนี้ช่วยให้คุณหยุดการรับรู้ขนาดของไซต์เป็นข้อจำกัดสำหรับนักออกแบบและเอาชนะความแตกต่างนี้ได้อย่างชำนาญ
อัตราส่วนทองคำคืออะไรและจะนำไปใช้กับรูปแบบหน้าเว็บได้อย่างไร
แม้แต่ในยุคเรอเนซองส์ สถาปนิกและศิลปินหลายคนพยายามที่จะสร้างสรรค์ผลงานของพวกเขาให้มีรูปทรงและสัดส่วนที่สมบูรณ์แบบ สำหรับคำตอบของค่านิยมสัดส่วนดังกล่าว กลับกลายเป็นราชินีแห่งทุกศาสตร์ - คณิตศาสตร์
ตั้งแต่สมัยโบราณ มีการประดิษฐ์สัดส่วนที่ดวงตาของเรารับรู้ว่าเป็นธรรมชาติและสง่างามที่สุดเพราะมันมีอยู่ทั่วไปในธรรมชาติ ผู้ค้นพบสูตรสำหรับอัตราส่วนดังกล่าวคือสถาปนิกชาวกรีกโบราณที่มีพรสวรรค์ชื่อ Phidias เขาคำนวณว่าหากสัดส่วนที่ใหญ่กว่าเกี่ยวข้องกับส่วนที่เล็กกว่า เนื่องจากส่วนทั้งหมดสัมพันธ์กับส่วนที่ใหญ่กว่า สัดส่วนดังกล่าวจะดูดีที่สุด แต่นี่เป็นกรณีถ้าคุณต้องการแบ่งวัตถุแบบอสมมาตร สัดส่วนนี้ภายหลังเรียกว่าส่วนสีทอง ซึ่งยังไม่ได้ประเมินค่าสูงไปสำหรับความสำคัญของประวัติศาสตร์วัฒนธรรมโลก
กลับไปที่การออกแบบเว็บ
ง่ายมาก - ใช้อัตราส่วนทองคำเพื่อออกแบบหน้าเว็บที่จะถูกใจมนุษย์มากที่สุด คำนวณตามคำจำกัดความของสูตรอัตราส่วนทองคำ เราได้จำนวนอตรรกยะ 1, 6180339887 … แต่เพื่อความสะดวก เราสามารถใช้ค่าที่ปัดเศษเป็น 1, 62 ได้ ซึ่งหมายความว่าบล็อกของหน้าของเราควรเป็น 62 % และ 38% ของทั้งหมด ไม่ว่าขนาดแหล่งที่มาที่สร้างขึ้นสำหรับไซต์ที่คุณใช้อยู่ คุณสามารถดูตัวอย่างได้ในแผนภาพนี้:
ใช้เทคโนโลยีใหม่
เทคโนโลยีเลย์เอาต์เว็บไซต์ที่ทันสมัยทำให้สามารถถ่ายทอดแนวคิดของนักวางแผนและนักออกแบบได้อย่างแม่นยำ ดังนั้นตอนนี้คุณจึงมีเงินพอที่จะนำแนวคิดที่กล้าหาญไปปฏิบัติมากกว่าเทคโนโลยีอินเทอร์เน็ตที่เริ่มต้นขึ้น คุณไม่จำเป็นต้องคิดหนักเกี่ยวกับขนาดของไซต์อีกต่อไป ด้วยการถือกำเนิดของสิ่งต่าง ๆ เช่นรูปแบบบล็อกที่ปรับเปลี่ยนได้ การโหลดเนื้อหาและแบบอักษรแบบไดนามิก การพัฒนาเว็บไซต์จึงน่าพอใจยิ่งขึ้น ท้ายที่สุดแล้ว เทคโนโลยีเหล่านี้คือข้อจำกัดน้อยลง แม้ว่าจะยังคงมีอยู่ก็ตาม แต่อย่างที่คุณทราบ หากไม่มีข้อจำกัดก็ไม่มีงานศิลปะ เราขอแนะนำให้คุณใช้วิธีการออกแบบที่สร้างสรรค์อย่างแท้จริง - อัตราส่วนทองคำ ด้วยวิธีนี้ คุณสามารถเติมพื้นที่ทำงานได้อย่างมีประสิทธิภาพและสวยงาม ไม่ว่าคุณจะตั้งค่าไซต์ในเทมเพลตของคุณขนาดใด
วิธีเพิ่มพื้นที่ทำงานของเว็บไซต์
มีโอกาสดีที่คุณจะไม่มีที่ว่างพอที่จะใส่องค์ประกอบ UI ทั้งหมดลงในเลย์เอาต์ขนาดเล็ก ในกรณีนี้ คุณจะต้องเริ่มคิดอย่างสร้างสรรค์หรือสร้างสรรค์มากกว่าเดิม
เพิ่มพื้นที่ว่างบนไซต์ให้สูงสุดโดยซ่อนการนำทางในเมนูป๊อปอัป มีเหตุผลที่จะใช้แนวทางนี้ไม่เพียง แต่บนอุปกรณ์พกพา แต่ยังรวมถึงบนเดสก์ท็อปด้วย ท้ายที่สุดแล้ว ผู้ใช้ไม่จำเป็นต้องดูตลอดเวลาว่าหัวเรื่องใดในเว็บไซต์ของคุณ - เขาเข้ามาเพื่อเนื้อหา และต้องเคารพความต้องการของผู้ใช้
ตัวอย่างวิธีที่ดีในการซ่อนเมนูคือรูปแบบต่อไปนี้ (ภาพด้านล่าง)
ที่มุมบนของพื้นที่สีแดง คุณจะเห็นเครื่องหมายกากบาท คลิกเพื่อซ่อนเมนูให้เป็นไอคอนเล็กๆ ปล่อยให้ผู้ใช้มีเนื้อหาในเว็บไซต์ตามลำพัง
อย่างไรก็ตาม คุณสามารถออกจากการนำทางซึ่งจะปรากฏให้เห็นอยู่เสมอ แต่คุณสามารถสร้างองค์ประกอบการออกแบบที่สวยงามได้ ไม่ใช่แค่รายการลิงก์ยอดนิยมบนเว็บไซต์ ใช้ไอคอนที่ใช้งานง่ายนอกเหนือจากหรือแทนลิงก์ข้อความ มันเหมือนกันจะทำให้ไซต์ของคุณใช้พื้นที่หน้าจอบนอุปกรณ์ของผู้ใช้ได้อย่างมีประสิทธิภาพมากขึ้น
เว็บไซต์ที่ดีที่สุดคือตอบสนอง
หากคุณไม่รู้ว่าจะเลือกเลย์เอาต์ไหนสำหรับไซต์ ทุกอย่างก็ง่ายสำหรับคุณ เพื่อประหยัดค่าใช้จ่ายในการพัฒนาและในขณะเดียวกันก็ไม่ทำให้ผู้ชมของคุณเสียไปเนื่องจากเลย์เอาต์ที่ไม่ดีสำหรับอุปกรณ์บางตัว ให้ใช้การออกแบบที่ตอบสนองได้ดี
การออกแบบที่ตอบสนองคือการออกแบบที่ดูดีเท่าเทียมกันบนอุปกรณ์ต่างๆ แนวทางนี้จะช่วยให้ไซต์ของคุณเข้าใจและสะดวกแม้บนแล็ปท็อป แท็บเล็ต แม้แต่ในสมาร์ทโฟน เอฟเฟกต์นี้ทำได้โดยการเปลี่ยนความกว้างของพื้นที่ทำงานของหน้าจอโดยอัตโนมัติ ด้วยการใช้สไตล์ชีตที่ตอบสนองสำหรับไซต์ของคุณ คุณกำลังตัดสินใจได้ดีที่สุด
การออกแบบที่ตอบสนองและเวอร์ชันเว็บไซต์แตกต่างกันอย่างไร
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์นั้นแตกต่างจากรุ่นมือถือของเว็บไซต์ ซึ่งในกรณีหลัง ผู้ใช้จะได้รับโค้ด html ที่แตกต่างจากเดสก์ท็อป นี่เป็นข้อเสียในแง่ของการเพิ่มประสิทธิภาพประสิทธิภาพของเซิร์ฟเวอร์ตลอดจนการเพิ่มประสิทธิภาพกลไกค้นหา นอกจากนี้ การคำนวณสถิติสำหรับไซต์เวอร์ชันต่างๆ กลายเป็นเรื่องยากมากขึ้น แนวทางการปรับตัวไม่มีข้อเสียเหล่านี้
การตอบสนองต่ออุปกรณ์ต่างๆ ทำได้โดยใช้เลย์เอาต์ที่มีเปอร์เซ็นต์ของความกว้างที่ระบุหรือโดยการโอนบล็อกไปยังพื้นที่ว่าง (ในระนาบแนวตั้งบนสมาร์ทโฟนแทนแนวนอนบนเดสก์ท็อป) หรือสร้างเลย์เอาต์แต่ละรายการสำหรับหน้าจอต่างๆ
เรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนองและการพัฒนาในบทช่วยสอนของเรา
