ฉันควรใช้ความกว้างของเบราว์เซอร์ใดในการออกแบบเว็บไซต์

9

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

website-design

— Hugh G. Wreckshin
แหล่งที่มา

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

— Xitcod13

2

ไม่แน่ใจว่าเพราะเหตุใดจึงปิดจึงไม่ใช่กระทู้ซ้ำ (ฉันโหวตให้เปิดใหม่) อีกทั้งเปลี่ยนชื่อให้แม่นยำยิ่งขึ้น - ขณะนี้ผู้ใช้ส่วนใหญ่ท่องเว็บพร้อมตั้งค่าเบราว์เซอร์เป็น 1024 x 768 หรือใหญ่กว่า โดยทั่วไปจะยอมรับได้ว่าจะใช้ 1,000 พิกเซลเป็นความกว้างสูงสุด นี่คือเหตุผลที่สูตรเช่น 960 กริดบูตสแตรปและอื่น ๆ กำลังได้รับความนิยม

— สกอตต์

ขอโทษนะฉันถูกวางชื่อที่เกือบจะเหมือนกัน เปิดอีกครั้ง ...

— Farray

สิ่งนี้ถือว่าโครงร่างที่มีความกว้างคงที่สำหรับไซต์หรือไม่ หรือมันจะคุ้มค่ารวมถึงหนึ่งเฟรมใน mockup สำหรับ "และหากผู้ใช้กำลังใช้ความละเอียด 640x480 เพราะพวกเขามีสายตาที่ไม่ดีเว็บไซต์จะมีลักษณะเช่นนี้ ... " และแสดงให้เห็นว่าเลย์เอาต์ reflows อย่างไร? (ตกลงคุณอาจใช้ 800x600 แทน)

— Andrew Leach

7

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

การทำเช่นนี้คุณควรจะใช้การจัดเรียงของระบบความกว้างของตารางของเหลวและอุปกรณ์เฉพาะเป้าหมายโดยใช้คำสั่ง @media

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

ขนาดเป้าหมาย:

อุปกรณ์มือถือ 320 x 480 ในโหมดแนวตั้ง
แท็บเล็ตขนาดเล็ก 480 x 640 หรือ iPhone ในโหมดแนวนอน
แท็บเล็ต 768 x 1024 ในโหมดแนวตั้ง
แท็บเล็ต 1024 x 768 ในโหมดแนวนอน
เบราว์เซอร์เดสก์ทอป 1200 +
จอแสดงผลหรือการประชุมสื่อขนาดใหญ่ 2900 ++ (นี่ไม่ใช่สิ่งที่ต้องทำ แต่ถ้ามีใครดูที่ไซต์ของคุณบนจอแสดงผลขนาดใหญ่มาก

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

Twitter Bootstrap , CSS ง่าย ๆ , HTML และ JS Framework ที่สร้างขึ้นด้วยองค์ประกอบส่วนต่อประสานผู้ใช้ยอดนิยม, เป็นตัวอย่างที่ดีของการออกแบบการตอบสนองที่ทันสมัย

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

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

— Chris_O
แหล่งที่มา

ลิงก์กริดแบบ Framelessของคุณตอนนี้ตายไปแล้ว

— Ruslan

6

เท็มเพลตโครงร่างจำนวนมากใช้ความกว้าง 960px เนื่องจากสอดคล้องกับความละเอียดหน้าจอกว้าง 1024px ทั่วไปทำให้มีพื้นที่ว่างสำหรับแถบเลื่อนและสามารถแบ่งได้อย่างง่ายดายโดย 2, 3, 4, 5, 6, 8, 10, 12 และ 16 - เหมาะสำหรับการจัดคอลัมน์ เค้าโครง

ดูhttp://960.gsสำหรับตัวอย่าง

กรอบงานอื่น ๆ เช่นbootstrapใช้ 940px เพื่ออธิบายระยะขอบระหว่างคอลัมน์

— cweiske
แหล่งที่มา

การอ้างอิงที่ยอดเยี่ยมไปยังเว็บไซต์ 960gs @Hugh คุณควรใช้แม่แบบ psd ของพวกเขาเพื่อช่วยคุณ

— skids89

6

หากคุณกำหนดเป้าหมายเบราว์เซอร์เดสก์ท็อปคุณสามารถไปที่ความกว้างประมาณ 1,000 พิกเซลได้อย่างง่ายดายหากคุณต้องการ

ความละเอียดหน้าจอ StatCounter

ทำไมประมาณ 1,000 พิกเซลเมื่อจอแสดงผลทั่วไปมากที่สุดคือ 1024 พิกเซลหรือใหญ่กว่า เพราะคุณต้องอนุญาตสำหรับแถบเลื่อนและหน้าต่างโครเมี่ยม

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

ความละเอียดหน้าจอมือถือ StatCounter

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

นอกจากนี้คุณสร้างเว็บไซต์อย่างไร หากคุณใช้ระบบกริดเช่น Blueprint CSS หรือ 960 Grid System คุณสามารถกำหนดขนาดได้เช่นกัน (ระบบกริดส่วนใหญ่สามารถเปลี่ยนเป็นขนาดอื่นได้เช่นกัน)

คุณอาจต้องการดูการออกแบบที่ตอบสนองหากคุณพยายามทำงานได้ดีบนมือถือและเดสก์ท็อป

— Marc Edwards
แหล่งที่มา

4

ฉันสองระบบกริด 960 ยืดหยุ่นมากและจะทำงานกับผู้ชมส่วนใหญ่ของคุณ

— Lauren-Clear-Monica-Ipsum

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

— e100

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

— DBUK

นี่เป็นคำตอบที่ล้าสมัยมาก หน้าจอมีความหลากหลายมากยิ่งขึ้นโดยเฉพาะอย่างยิ่งในปลายด้านบนที่ทีวีและหน้าจอ 4k จะใช้

— ซัคซอส

-3

ในเวลานี้ขนาดเดสก์ท็อปทั่วโลกที่ใส่ร้ายเป็น 1024x768 เป็นเรื่องดีที่จะสร้างเว็บไซต์ในขนาด 1003px ...

— กราฟฟิกดีไซน์
แหล่งที่มา

3

ทำไมต้อง 1003px ....

— e100

เนื่องจากขนาดที่ควั่นคือความกว้างของโลกกว้าง 1024 และ 768 ความสูง 1024px กว้าง 11px จำเป็นต้องใช้แถบเลื่อนและ 5px สำหรับขอบด้านซ้ายและขวา

— Graphic Design Guy

2

ฉันหวังว่าฉันสามารถโหวตความคิดเห็นได้ ... :( แต่เพียงแค่ FYI @Rizwanabbasi: scrollbars มีความกว้างที่แตกต่างกันในระบบที่แตกต่างกัน (อุปกรณ์สัมผัสไม่มีแม้กระทั่งพวกเขา) และแม้แต่ในระบบเหล่านี้ก็สามารถเปลี่ยนได้ ตัวอย่างเช่นในแอพของมันจาก GMail)

— Robert Koritnik

ต้องเป็นตัวพิมพ์ผิด

— lash