Fixed width, liquid และ elastic layout

วันนี้เรามารู้จักการจัดเลเอาท์หน้าเว็บแบบต่าง ๆ กันดีกว่า จะได้เอามาปรับใช้กับความต้องการของเราได้ ในการจัดเลเอาท์ที่นิยมกันส่วนใหญ่จะมี การจัดแบบ Fixed width, การจัดแบบ Liquid และการจัดแบบ Elastic ซึ่งจะมีความแตกต่างกันไปตามนี้

Fixed Width Layout หรือ Fixed Layout

แปลตามตัวเลย คือการจัดเลเอาท์ที่เรากำหนดค่าอย่างแน่นอน เช่น หน้าเว็บกว้าง 960 พิกเซล หรือว่า รูปนี้ กว้าง 30 พิกเซล สูง 20 พิกเซล เป็นต้น

ภาพการจัดเลเอาท์แบบ fixed width – smashingmagazine.com

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

ความละเอียดหน้าจอน้อยกว่าที่กำหนดไว้ ผู้ใช้ต้องเลื่อนไปมา

หน้าเว็บบน smart phone

ผู้ใช้ต้อง zoom เพื่ออ่าน – blue-bucket.com

Liquid Layout

หรือบางที่เราจะเจอว่า fluid layout ซึ่งการจัดหน้าเว็บแบบนี้ จะไม่กำหนดตายตัวแบบ fixed layout แต่จะจัดโดยยึดขนาดหน้าต่างเวบเบราว์เซอร์เป็นหลัก เช่น กว้าง 90% นั่นคือ ถ้าหน้าต่างเว็บเบราว์เซอร์เรากว้าง 1000 พิกเซล ส่วนนี้ก็จะกว้าง 900 พิกเซล ถ้าเราหดหน้าจอเหลือ 100 พิกเซล ส่วนนี้ก็จะหดเหลือ 90 พิกเซล เป็นต้น การจัดหน้าเว็บแบบนี้จะช่วยให้ใช้พื้นที่ในการแสดงผลได้อย่างมีประสิทธิภาพ ซึ่งในปัจจุบันจะมักนำมาใช้กับแนวคิดการออกแบบที่เรียกว่า Responsive web design นั่นคือเราจะสามารถเขียนหน้าเว็บที่สามารถเข้าได้ทั้ง จากคอมพิวเตอร์ จากมือถือ หรือแท็บเล็ต (จะเขียนเรื่องนี้ภายหลัง)

ตัวอย่างหน้าเว็บที่ปรับตามขนาดหน้าต่างเว็บเบราว์เซอร์

ตัวอย่างหน้าเว็บที่ปรับตามขนาดหน้าต่างเว็บเบราว์เซอร์ – mediaqueri.es

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

ตัวอย่าง liquid layout โดยไม่ได้กำหนดค่าต่ำสุด

ตัวอย่าง liquid layout โดยไม่ได้กำหนดค่าต่ำสุด

Elastic Layout

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

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

ขนาดฟอนต์ปกติ

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

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

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

สรุป

  • Fixed Layout เป็นการกำหนดความกว้าง อย่างแน่นอนตายตัว
  • Liquid Layout เป็นการกำหนดความกว้าง เทียบกับความกว้างเว็บเบราว์เซอร์เป็นหลัก
  • Elastic Layout เป็นการกำหนดความกว้าง เทียบกับขนาดของตัวอักษร

อ้างอิง:
Elastic layout
Liquid layout
Fixed layout
Liquid layouts the easy way
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s