Fixed width

Fixed Width Layout หรือ Fixed Layout

กำหนดความกว้างแบบคงที่ ตายตัว
– ทำได้ง่าย
– ออกแบบโดยอิงกับขนาดความละเอียดหน้าจอเฉลี่ยที่มีอยู่ในตลาดขณะนั้น
เมื่อหน้าจอมีความละเอียดน้อยกว่าข้อมูลก็จะล้นออกไปทำให้ดูได้ยากขึ้น และถ้าใช้หน้าจอขนาดใหญ่ ก็จะเห็นเป็นพื้นที่ว่าง ๆ หรือ การใช้ smart phone หรือ tablet ก็ยิ่งจะทำให้ดูยากยิ่งขึ้น ต้อง zoom

liquid หรือ fluid layout

– ไม่กำหนดตายตัวแบบ fixed layout
– จัดโดยยึดขนาดหน้าต่างเวบเบราว์เซอร์เป็นหลัก เช่น กว้าง 90%
ถ้าหน้าเว็บเบราว์เซอร์ กว้าง 1000 พิกเซล ก็จะกว้าง 900 pixel
ถ้าหดหน้าจอเหลือ 100 พิกเซล ส่วนนี้ก็จะหดเหลือ 90 พิกเซล

การจัดหน้าเว็บแบบนี้จะช่วยให้ใช้พื้นที่ในการแสดงผลได้อย่างมีประสิทธิภาพ
ปัจจุบันจะนำมาใช้กับแนวคิดการออกแบบที่เรียกว่า Responsive web design นั่นคือเราจะสามารถเขียนหน้าเว็บที่สามารถเข้ากันได้ทั้ง คอมพิวเตอร์ มือถือ หรือแท็บเล็ต

ข้อเสียของ
– เมื่อปรับขนาดหน้าต่างใหญ่ขึ้น หรือเล็กลงมาก ๆ เกินกว่าที่เราได้ออกแบบไว้อาจจะทำให้การอ่านเนื้อหาบนเว็บเป็นไปด้วยความยากลำบาก เราจึงมักจะแก้โดยการกำหนด ค่าสูงสุด หรือค่าต่ำสุด เช่นว่า ส่วนนี้กว้าง 90% นะ แต่จะไม่กว้างไปกว่า 1200 พิกเซล

width:90%;max-width:1200px;

elastic layout

– คล้ายการจัดแบบ Liquid layout (Liquid layout จะจัดโดย ยึดขนาดเบราว์เซอร์ เป็นหลัก)
– การจัด แบบ Elastic Layout จะยึดขนาดของตัวอักษรเป็นหลัก เช่น กว้าง 90 em มักจะใช้กับการเขียนบทความซึ่งจะมีตัวอักษรจำนวนมาก การกำหนดความกว้างเทียบกับขนาดตัวอักษร ซึ่งจะเป็นการช่วยไม่ให้ข้อความในแต่ละบรรทัดยาวหรือสั้นเกินไป เมื่อเราปรับขนาดตัวอักษรให้เล็กลง หรือใหญ่ขึ้น

ตัวอย่างด้านล่าง สังเกตว่าเมื่อเราปรับขนาดตัวอักษรให้ใหญ่ขึ้น ข้อความจะไม่ถูกตัดให้ขึ้นบรรทัดใหม่

ขนาดฟอนต์ปกติ – webreference.com

ปรับขนาดฟอนต์ใหญ่ขึ้น – webreference.com

responsive

กำหนดหน้า layout เปลี่ยนไปตาม หน้าจออุปกรณ์ที่ใช้เปิด เช่น มือถือ tablet pc