ความกว้างคงที่เทียบกับความกว้างแบบไดนามิก

ฉันสังเกตเห็นว่ามีไซต์จำนวนมากเข้ามาในเลย์เอาต์ที่มีความกว้างคงที่ซึ่งการปรับขนาดหน้าต่างเบราว์เซอร์เพียงแค่ทำให้แถบเลื่อนปรากฏขึ้นเมื่อเทียบกับเลย์เอาต์ที่มีความยืดหยุ่นซึ่งการปรับขนาดเบราว์เซอร์ .
ไซต์ StackExchange เช่นนี้เป็นตัวอย่างของเค้าโครงที่คงที่ GMail และ iGoogle เป็นตัวอย่างของเค้าโครงที่ยืดหยุ่น อะไรคือเหตุผลในการเลือกอันหนึ่งไปอีกอัน?

การออกแบบที่ซับซ้อนมากขึ้นอาจเป็นเรื่องยากที่จะรับรู้ด้วยเค้าโครงความกว้างของตัวแปร ดังนั้นฉันจึงจินตนาการว่ามีบทบาท

นอกจากนี้ยังมีความจริงที่ว่ามันไม่สะดวกที่จะอ่านข้อความที่กว้างมาก ขนาดคอลัมน์บนไซต์ StackExchange นั้นจัดการได้ง่ายและอ่านง่าย ด้วยรูปแบบความกว้างของตัวแปรคุณไม่สามารถขยายเนื้อหาของข้อความหลักโดยไม่ทำให้อ่านไม่ออก แม้แต่ Google ก็จำกัดความกว้างของผลการค้นหา

แน่นอนถ้าคุณมีเว็บไซต์ที่มีพื้นที่ว่างในระดับพรีเมี่ยม (เช่น Google เอกสารและ Google Maps) คุณต้องการไปกับรูปแบบความกว้างของตัวแปรเพื่อใช้พื้นที่ทั้งหมดที่มีอยู่

แก้ไขด้วยนั้นง่ายต่อการพัฒนาสำหรับเว็บไซต์ที่ซับซ้อน นอกจากนี้ไซต์ที่มีความกว้างคงที่ส่วนใหญ่จะกว้างประมาณ 1,000 พิกเซล เหตุผลเป็นเพียง 1% ของเบราว์เซอร์ที่ใช้ 800x640 และ 0% ใช้ 640x480 ตรวจสอบสถิติในปัจจุบันส่วนใหญ่ที่นี่ ไม่รวมถึงมือถือ ซึ่งเป็นเกมบอลที่แตกต่างอย่างสิ้นเชิง

ค่าของเลย์เอาต์ความกว้างของตัวแปรคือช่วยให้ผู้ใช้สามารถใช้งานเว็บไซต์ได้อย่างง่ายดายในหน้าต่างที่ไม่ขยายใหญ่สุด

คุณต้องพิจารณาผู้ชมของคุณและตัดสินใจจากประสบการณ์ที่คุณคิดว่าพวกเขาต้องการและหากความกว้างของตัวแปรสำคัญกว่าฟีเจอร์อื่น ๆ ที่คุณจะไม่สามารถพัฒนาได้หากคุณต้องทำความกว้างของตัวแปร

นอกจากนี้ยังมีการประนีประนอมระหว่างสองสิ่งที่คุณตั้งค่าความกว้างขั้นต่ำและความกว้างสูงสุด (โดยใช้ CSS) จากนั้นใช้เปอร์เซ็นต์ความกว้างเพื่อทำให้ส่วนที่เหลือไหลระหว่างสองขา ตัวอย่างเช่นคุณอาจต้องการคอลัมน์เมนูด้านซ้ายไม่ให้แคบลงกว่า 200px แต่เป็นเนื้อหาหลักที่ไหล เทคนิคนี้ช่วยให้ไซต์ของคุณสามารถปรับขนาดตามความละเอียดของผู้เยี่ยมชมโดยไม่ดูโง่ที่ความละเอียดสูงมากหรือความละเอียดต่ำมาก HTML ได้รับการออกแบบมาเพื่อการไหล - เป็นภาษามาร์กอัปและไม่เหมือนกับการพิมพ์

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

คุณอาจไม่จำเป็นต้องเลือก รายการนอกเหนือมีดีบทความเกี่ยวกับการออกแบบที่ตอบสนอง แนวคิดหลักคือคุณสามารถใช้คิวรีสื่อเพื่อตรวจจับการเปลี่ยนแปลงในหน้าต่างเบราว์เซอร์หรือขนาดวิวพอร์ตและกำหนด CSS ใหม่ได้ตามต้องการ มีจำนวนมากให้อ่านมีดังนั้นตรวจสอบบทความสำหรับรายละเอียดฉ่ำทั้งหมด แต่สำหรับความยาวและความสั้นของมัน (หรือควรจะเป็น "กว้างและแคบ" ของมัน?) ดูที่หน้าก่อนและหลังหน้าตัวอย่างของพวกเขา ก่อนชั่งหน้าอย่างถึงจุด แต่ถ้าคุณทำมันแคบมากพอที่จะได้รับ clunky เล็ก ๆ น้อย ๆ หลัง ปรับขนาดหน้าด้วยเช่นกัน แต่ยังเปลี่ยนเค้าโครงเมื่อคุณทำให้มันแคบเกินไปสำหรับการปรับขนาดให้ทำงานได้ดี

ตามที่จาคอบนีลเซ่น 'sแนวทางการออกแบบ 113สำหรับการใช้งานโฮมเพจ :

67ใช้เลย์เอาท์ที่เป็นของเหลวเพื่อปรับขนาดโฮมเพจให้เป็นความละเอียดหน้าจอที่แตกต่างกัน

มันเป็นหนึ่งใน แนวทางการออกแบบโฮมเพจที่มีการละเมิดมากที่สุดสิบอันดับ :

การต่อสู้กับเลย์เอาท์ที่แช่แข็งดูเหมือนว่าจะเป็นการต่อสู้ที่หายไป แต่มันก็คุ้มค่าที่จะทำซ้ำ: ผู้ใช้ที่ต่างกันมีขนาดจอภาพที่แตกต่างกัน ผู้ที่มีจอภาพขนาดใหญ่ต้องการปรับขนาดเบราว์เซอร์เพื่อดูหลายหน้าต่างพร้อมกัน คุณไม่สามารถสรุปได้ว่าความกว้างของหน้าต่างของทุกคนคือ 800 พิกเซลมันมากเกินไปสำหรับผู้ใช้บางคนและน้อยเกินไปสำหรับคนอื่น ๆ

สิ่งที่เกี่ยวกับการมิกซ์ สิ่งนี้แสดง # content-section ในความกว้างคงที่ (70em) หากมีพื้นที่เพียงพอ - ไม่เช่นนั้นส่วนจะถูกลดขนาดเป็น 80% ของหน้าต่าง view-port / browser

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

ข้อดีของการจัดวางแบบไดนามิกคือสามารถใช้งานได้กับทุกขนาดหน้าจอรวมถึงอุปกรณ์มือถือ มันทำงานหนักขึ้นแม้ว่าจะทำให้ทุกอย่างดูดีในทุกขนาด คำถามที่ถามคือผู้เข้าชมของคุณกำลังใช้อุปกรณ์มือถือหรือไม่