ความกว้างและความสูง 'ที่พบบ่อยที่สุด' ที่สุดที่เว็บไซต์กำลังออกแบบมาสำหรับวันนี้คืออะไร?

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

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

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

โปรดทราบว่าฉันถามคำถามนี้อย่างไร:

ฉันไม่ได้ขอความละเอียดหน้าจอที่พบบ่อยที่สุด
ฉันไม่ได้ขอเบราว์เซอร์ที่พบบ่อยที่สุด

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

website-design

— จอห์นอาร์
แหล่งที่มา

คำตอบ:

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

สำหรับความกว้าง 960 พิกเซลกว้างดูเหมือนว่าจะเป็น "มาตรฐาน" ปัจจุบันสำหรับการออกแบบความกว้างคงที่ เป็นเรื่องปกติที่เว็บไซต์จะทุ่มเทให้กับการสำรวจเค้าโครงที่ความกว้างนั้น

(ฉันสมมติว่าคุณไม่ต้องการให้ใครคุยโวเกี่ยวกับการออกแบบที่ลื่นไหล?)

— John Conde
แหล่งที่มา

ไม่มีความกว้างมาตรฐานที่คุณควรตั้งค่าจริงๆ จำนวนผู้ใช้จอภาพ 1024x768 ได้ลดลงอย่างมากในช่วงไม่กี่ปีที่ผ่านมาดังนั้นความกว้างของ 960 จึงมีความสำคัญน้อยกว่า ด้วยการเกิดขึ้นของอุปกรณ์ใหม่มากมาย (สมาร์ทโฟนแท็บเล็ตพร้อมกับแล็ปท็อปและเดสก์ท็อป) คุณควรสร้างสไตล์ชีตสำหรับแต่ละกรณี

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

ลองดูหน้านี้บน W3.org เพื่อดูตัวอย่าง - http://www.w3.org/TR/css3-mediaqueries/

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

— คาร์สัน
แหล่งที่มา

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

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

สิ่งสำคัญสองประการที่ต้องจำไว้ ...

1) หากการออกแบบของคุณสามารถทำงานกับ 900+ พิกเซลได้ก็ไม่มีเหตุผลที่จะยืดมันให้เป็น 1200+ พิกเซลแม้ว่าประชากรของคุณจะสามารถจ่ายได้ ..

2) ตรวจสอบให้แน่ใจว่าคุณมีโครงสร้างที่เหมาะสมซึ่งสามารถรองรับผู้ที่ไม่ได้มีการแก้ไขเป้าหมายของคุณ

— ดิล
แหล่งที่มา

ฉันไม่เห็นด้วยกับประเด็นที่ 2 ด้วยจอแสดงผลแบบกว้าง 1366px ซึ่งเป็นความกว้างที่พบได้บ่อยที่สุดในแล็ปท็อปส่วนใหญ่ที่ขายในช่วงสองสามปีที่ผ่านมาคุณไม่สามารถติดตั้งหน้าต่าง 900px สองบานที่อยู่ติดกันและมองเห็นทั้งสองในเวลาเดียวกัน หากคุณมีเลย์เอาต์ 900px เพียงรูปแบบเดียวคุณเสียพื้นที่ 34% ของพื้นที่แนวนอนด้วยช่องว่าง ในกรณีนี้ 1200px จะเป็นความกว้างในอุดมคติ ดังนั้นใช่มีเป็นเหตุผลที่จะยืดมัน

— พฤศจิกายน

@nhinkle: ฉันไม่คิดว่าคุณอ่านจุดที่ 2 แล้วการตอบสนองของคุณเกี่ยวข้องกับหน้าต่าง 900px สองตัวติดกันหรือไม่ นอกจากนี้โปรดอ่านคำถามเพื่อทำความเข้าใจว่า John R ขออะไร นี่ไม่ใช่การอภิปรายเกี่ยวกับกรณีการใช้งานที่รุนแรงเช่นคุณต้องการมีหน้าต่างขนาด 900px 2 หน้าต่างติดกันหรือในกรณีของฉันต้องการจอภาพ 1600px (2 ในนั้น) ออกแบบ ค่อนข้างเป็นเรื่องของผู้ใช้ส่วนใหญ่ที่ไม่ใช่คุณหรือฉัน ..

— Adil

คำขอโทษของฉันฉันหมายถึงการตอบกลับไปยังจุดที่ 1 ของคุณไม่ใช่อันดับที่ 2 ของคุณ ฉันขอโทษถ้ามันทำให้เกิดความสับสน จุดของฉันยังคงอยู่: ผู้ใช้ส่วนใหญ่มีการแสดงที่กว้างพอที่เค้าโครง 900px กำลังเสียพื้นที่จำนวนมาก ฉันเห็นด้วยกับสิ่งที่คุณพูดมากที่สุดในคำตอบของคุณ แต่สิ่งแรกที่คุณต้องจำไว้คือความจริง หากข้อมูลประชากรของคุณสามารถจ่ายได้ที่ 1200px คุณควรใช้ที่ 1200 px มิฉะนั้นคุณจะเสียพิกเซล 300 พิกเซล

— nhinkle

@nhinkle: คุณเข้าใจผิดจุดของฉัน # 1 หากการออกแบบของฉันสามารถแสดงเว็บไซต์ได้อย่างง่ายดายภายใน 900px ทำไมฉันจะยืดมันให้เป็น 1200px? นอกจากนี้ 13% ของผู้ใช้ยังมีความละเอียดหน้าจอ 1024x768 ที่ได้รับนั้นมีจำนวนน้อย แต่มีขนาดใหญ่พอที่จะทำให้พวกเขารู้สึกไม่สบายและลดยอดขายคลิกโฆษณาโอกาสในการขายหรืออะไรก็ตามที่โมเดลธุรกิจของคุณ .... (ข้อมูลอ้างอิงจาก: w3schools .com / เบราว์เซอร์ / browser_display.asp )

— Adil

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

— พฤศจิกายน