เว็บไซต์เหลวเป็นของน่าทำอีกต่อไป? [ปิด]

ตอนนี้ฉันกำลังสร้างเว็บไซต์และฉันกำลังพยายามตัดสินใจว่าควรจะทำให้เป็นของเหลวหรือไม่ เว็บไซต์ที่มีความกว้างคงที่นั้นง่ายต่อการสร้างและง่ายขึ้นที่จะทำให้เว็บไซต์ดูสอดคล้องกัน

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

ดังนั้นการสร้างเว็บไซต์เหลวไหลจึงเป็นปัญหา

ขึ้นอยู่กับผู้ชมและเนื้อหาของคุณ

ต่อไปนี้เป็นเว็บไซต์ที่ฉันเคารพและฉันคิดว่าเป็นตัวอย่างในการเลียนแบบ

ตัวอย่างของไหล:

อเมซอน

วิกิพีเดีย

ตัวอย่างแบบคงที่:

แอปเปิ้ล

อีเบย์

MSN

StackOverflow

MSDN

ผสมบางอย่างขึ้น!

ซีเอ็นเอ็น

ฉันคิดว่าฉันชอบเวลาส่วนใหญ่คงที่ มันง่ายกว่าที่จะทำให้ดูดีในเบราว์เซอร์มากขึ้น นอกจากนี้ยังง่ายต่อการอ่าน

สร้างความคล่องแคล่วให้กับเว็บไซต์ แต่การเพิ่มแอตทริบิวต์ความกว้างต่ำสุด / สูงสุดนั้นน่าจะดีที่สุดสำหรับทั้งสองโลกสำหรับฉัน คุณรองรับการลื่นไหล แต่คุณ จำกัด ไว้ที่ความกว้างที่แน่นอน (เช่น 800px และ 1200px)

มันขึ้นอยู่กับคุณ - ต่อไปนี้เป็นสิ่งที่ควรพิจารณา:

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

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

นอกจากนี้เน็ตบุ๊กยังมีความละเอียดที่ทำให้การออกแบบเว็บไซต์ทำได้ยาก ตัวอย่างเช่นฉันเขียนสิ่งนี้ที่ 1024x600

ไม่ยากโดยเฉพาะในปัจจุบัน (ในเบราว์เซอร์ที่ทันสมัย) โดยเฉพาะกับmin-และmax-heightใน CSS และการไล่ระดับสีใหม่ ฯลฯ ใน CSS3 ดังนั้นการปรับขนาดภาพจะไม่เป็นปัญหาใหญ่ในอนาคตอันใกล้

ในการตอบกลับความคิดเห็นด้านล่างฉันคิดว่าข้อดีมีมากกว่าข้อเสียในกรณีนี้ - IE6 เป็นปัญหาทุกที่ เราแค่ต้องจัดการกับมัน

คุณต้องตระหนักว่าผู้ใช้คอมพิวเตอร์ส่วนใหญ่ไม่ทราบวิธีซูมเบราว์เซอร์! ผู้ใช้ส่วนใหญ่อยู่ไกลจากความเข้าใจในคอมพิวเตอร์ที่เรามี เราต้องจำความจริงนั้นเสมอ

ข้อความปพลิเคชันตาม: ไม่มี ตารางที่ปพลิเคชันตาม: ใช่

ข้อดีของเลย์เอาต์ของเหลว

1. ผู้ที่มีจอภาพขนาดใหญ่จะใช้อสังหาริมทรัพย์ของหน้าจอ
2. ง่ายขึ้นสำหรับผู้ใช้ที่มีจอภาพขนาดใหญ่เมื่อคุณมีข้อมูลจำนวนมากบนหน้าเว็บของคุณ

ข้อเสียของรูปแบบของเหลว:

1. คอลัมน์ข้อความความกว้างของไหลนั้นอ่านยากหากกว้างเกินไป มีเหตุผลที่ดีหลังการใช้คอลัมน์ในหนังสือพิมพ์คือ: ทำให้การข้ามไปยังบรรทัดถัดไปง่ายกว่ามาก
2. (ค่อนข้าง) ยากที่จะนำมาใช้เนื่องจากข้อ จำกัด ใน CSS

หากคุณแสดงข้อมูลแบบตาราง (iTunes, ตัวจัดการฐานข้อมูล, ... ) ความกว้างของของไหลนั้นดี หากคุณกำลังแสดงข้อความ (บทความหน้าวิกิ, ... ) ความกว้างของของไหลนั้นไม่ดี

จากมุมมองของ iPhone รูปแบบความกว้างคงที่นั้นเป็นปัญหาเมื่อใช้บล็อคโค้ด แถบเลื่อนสำหรับบล็อกโค้ดแบบกว้างไม่ปรากฏขึ้นดังนั้นฉันไม่สามารถอ่านทางด้านขวาสุดของบล็อกได้

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

แม้ว่ามันจะสนุกกับการดูกล่องต่าง ๆ ขณะที่ฉันเล่นกับขนาดเบราว์เซอร์ที่มีเลย์เอาต์ที่ลื่นไหล แต่ฉันก็สามารถขบขันได้อย่างง่ายดาย

สิ่งที่สำคัญที่สุดคือการพิจารณากรณีการใช้งานที่โดดเด่นของเว็บไซต์หรือแอปพลิเคชันของคุณ คุณคาดหวังให้คนใช้งานบนอุปกรณ์มือถือโดยเฉพาะหรือไม่? โทรศัพท์มือถือเน็ตบุ๊คเดสก์ท็อป?

ลองดูที่ "Responsive Web Design" โดย Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/

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

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

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

เพียงตระหนักถึงข้อดีข้อเสียของทุกทางออก

จนถึงจุด - ใช่

มีความกว้างบางอย่างที่ข้อความเริ่มเป็นที่รำคาญเมื่ออ่านว่ากว้างเกินไป ง่ายต่อการทดสอบว่าคุณมีจอภาพขนาดใหญ่เพียงแค่ดึงแผ่นจดบันทึกแล้ววางข้อความลงไปโดยไม่ต้องมีตัวแบ่งบรรทัด

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

โดยส่วนตัวฉันยังต้องการให้เบราว์เซอร์บนจอภาพของฉัน แต่เพียงครึ่งหนึ่งของความกว้างของหน้าจอ (24 ") เว็บไซต์ที่มีขนาดที่ดีมาก

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

ใช่. การซูมหน้านั้นยอดเยี่ยม แต่ส่วนใหญ่จะใช้เพื่อทำให้ข้อความมีขนาดใหญ่ขึ้นไม่ใช่เพื่อเติมข้อความในวิวพอร์ต แน่นอนว่าถ้าเนื้อความกว้างเกินไปการย่อขนาดเพื่อให้พอดีจะทำให้อ่านไม่ได้

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

ประเด็นเกี่ยวกับ 'เส้นยาวที่อ่านยาก' มักจะเกินความจริงโดยนักออกแบบที่พยายามปรับการออกแบบความกว้างคงที่ (*) แต่ในความเป็นจริงแล้วดูเหมือนว่ามันจะไม่ยึดติดบนหน้าจอเหมือนกับบนกระดาษ แน่นอนว่าการตั้งค่าความเป็นผู้นำ / ความสูงบรรทัดที่ดีเป็นสิ่งสำคัญและความกว้างสูงสุดสามารถนำมาใช้ในการยับยั้งเส้นที่ยาวที่สุดที่เลวร้ายที่สุดได้ (ตั้งไว้ในหน่วย em-font ญาติ) คุณไม่ได้รับความกว้างสูงสุดใน IE6 แต่นั่นไม่ใช่หายนะครั้งเดียว (คุณสามารถแก้ไขได้ด้วย JavaScript เล็กน้อยถ้าคุณสนใจพวกนั้นจริงๆฉันไม่ได้)

(* ซึ่งใช้งานได้จริงกับเลย์เอาต์กราฟิกสูง แต่สำหรับเลย์เอาต์ที่เรียบง่ายเช่นเอ่อ StackOverflow ไม่มีเหตุผลอะไรที่จะไม่เหลว Tsk @SO, eh!)

คำนำ: ไม่ใช่ศิลปินเว็บมืออาชีพ

ฉันได้พบว่ามีวิธีที่บิตมากเกินไปเที่ยวยุ่งยิ่งในการทำให้สิ่งต่าง ๆ ไหลผ่านดังนั้นขนาดของโทรศัพท์มือถือและ uber-widescreen โดยเฉพาะอย่างยิ่งในความซับซ้อนที่น่าสนใจ

โดยทั่วไปแล้วฉันออกแบบให้มีไซต์ที่มีความกว้างคงที่ในบางลักษณะ มักจะมีขอบเขตที่ [600,1200]

ฉันยังพบว่าคอลัมน์เนื้อหากว้างเป็นพิเศษที่ทำให้อ่านลำบาก ฉันดูเหมือนจะจำได้ว่ามีงานวิจัยบางอย่างที่แนะนำจำนวนคำที่เหมาะสมที่สุดต่อคอลัมน์บรรทัด

คุณสามารถทำให้มันเป็นเช่นนี้

# กำหนดให้เป็นเลย์เอาต์หลักและใช้ ' ความกว้างสูงสุด: 1140px ' กับมันและจัดกึ่งกลาง

ด้วยสิ่งนี้จะไม่มี 'บรรทัดยาว' ของข้อความบนหน้าจอที่ใหญ่ขึ้นและการตั้งถิ่นฐานของหน้าเว็บที่เหมาะสมบนหน้าเว็บที่เล็กกว่า (ยกเว้น 800x *** และต่ำกว่า)

ฉันใช้วิธีนี้ในโครงการใหม่ของฉันและมันทำงานได้อย่างมีเสน่ห์

atb .. :)

ฉันคิดว่าของเหลวในการตัดสินใจ / คงที่ควรเป็นไปตามเนื้อหาของเว็บไซต์ด้วย:

1. สำหรับเว็บไซต์ที่มีข้อมูลธรรมดาจำนวนมาก (เช่นพอร์ทัลข่าว) ควรใช้เลย์เอาต์ของเหลว

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

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

ความสงสัยของคุณเกี่ยวกับผลกระทบของ Ctrl + Scrollbar ไม่ใช่เรื่องใหญ่ คุณลักษณะนี้มีไว้สำหรับการเข้าถึงเป็นหลักเพื่อให้ข้อความอ่านได้ง่ายขึ้นโดยการเพิ่มขนาด

อย่างไรก็ตามหากคุณพูดถึงขนาดทั้งหมดของคุณในหน่วยพิกเซล (px) มันจะไม่เกิดขึ้น การปรับที่เหมาะสมจะเกิดขึ้นเฉพาะเมื่อคุณใช้ "em" เพื่อระบุขนาด ดังนั้นคุณมีวิธีเปิด / ปิด

ฉันเป็นแฟนตัวยงของการตรึงที่ <800px ... มันง่ายกว่าที่จะอ่านคอลัมน์ที่แคบกว่าและมันจะทำงานได้ทุกที่ นั่นคือถ้าคุณกำลังพยายามสร้างเว็บไซต์ที่นำเสนอไฮเปอร์เท็กซ์ ... เว็บไซต์ที่นำเสนอแอปพลิเคชั่นส่วนหน้าฉันคิดว่าเวิร์มสามารถสร้างเวิร์มอื่นได้หรือไม่ ...

การออกแบบของไหล - ของเหลวอย่างแท้จริง - เป็นเรื่องยาก ยากมาก. ไม่ใช่แค่คำถามเกี่ยวกับความกว้างของหน้า - ขนาดแบบอักษรของคุณและทุกอย่างวัดได้หรือไม่ จะเป็นการดี:

• ควรกำหนดขนาด emมากกว่าpx
• ... และขนาดขององค์ประกอบนั้นไม่ใช่แบบอักษร!
• เมื่อมีการเปลี่ยนแปลงขนาดตัวอักษรหรือระดับการซูมองค์ประกอบของหน้าเว็บควรมีขนาดเท่ากันเมื่อเปรียบเทียบกัน

ผลิตภัณฑ์หลักของเรานั้นลื่นไหลและเป็นเรื่องที่เจ็บปวดจากมุมมองของฉันในฐานะนักออกแบบโดยเฉพาะอย่างยิ่งเพราะมันเกี่ยวข้องกับเนื้อหาที่ผู้ใช้สร้างขึ้นมากมาย

สิ่งหนึ่งรูปภาพในไซต์ที่มีความกว้างคงที่คุณสามารถมีรูปภาพที่เติมความกว้างครึ่งหนึ่งและดูดี ในไซต์ของเหลวภาพนี้มีแนวโน้มว่าจะหายไปในทะเลของช่องว่างมองค่อนข้างเหงา

ชีวิตควรจะง่ายขึ้นอีกครั้งborder-radiusและคุณสมบัติ CSS3 อื่น ๆ เข้ามาเล่นกันมากขึ้น แต่น่าเศร้าที่ผู้ชมหลักของเราคือข้าราชการซึ่งทุกคนยังคงใช้ IE F @! * ING 6!

หากต้องการตอบคำถาม "คุ้มค่าหรือไม่" ใช่ถ้าคุณทำถูกต้อง

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

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

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

ปัญหาเกิดขึ้นจริงเนื่องจากไม่มีกลไกการกำหนดขนาดข้อความที่สัมพันธ์กับความละเอียดหน้าจอ หากคุณสามารถทำให้ข้อความมีขนาดใหญ่ขึ้นโดยอัตโนมัติด้วยความละเอียดที่ใหญ่กว่าคุณสามารถอยู่ใกล้กับอักขระ 80 คี่ต่อบรรทัดซึ่งโดยทั่วไปถือว่าดีที่สุดสำหรับการอ่าน

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

ฉันเป็นแฟนของไซต์ที่มีความกว้างสูงสุดคงที่ระหว่าง 800px - 1,000px แต่ยังสามารถลดขนาดลงเพื่อให้ฉันสามารถอ่านเนื้อหาโดยไม่ต้องเลื่อนจากด้านหนึ่งไปอีกด้านหนึ่งและไม่ย่อขยายเพราะข้อความมักจะเกินไป เล็กอ่านและเจ็บตา ดังนั้นนี่เป็นสิ่งที่ฉันต้องการเพราะฉันต้องการสร้างเว็บไซต์ที่ฉันภูมิใจ