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