มีขนาดมาตรฐานสำหรับความกว้างของเว็บไซต์ในแบบจำลองหรือไม่? ขนาดนั้นคืออะไร? ทำไม?

ฉันเริ่มต้น mockups ส่วนใหญ่ที่ความกว้าง 1200px แม้ว่าฉันจะออกแบบที่ความละเอียด 1024px ก็ตาม ฉันตั้งค่าคู่มือภายใน mockup สำหรับ 1,000px ความสูงอาจแตกต่างกัน เหตุผลที่ทำให้ไฟล์จำลองของฉันกว้างขึ้นคือการดูว่าการออกแบบรู้สึกอย่างไรกับห้องหายใจรอบ ๆ คนส่วนใหญ่ใช้งานมากกว่า 1024px ในปัจจุบัน

มีความกว้างมาตรฐานสำหรับการออกแบบจำลองหน้าเว็บหรือไม่

ใช่ไม่อาจ?

กาลครั้งหนึ่ง (ดูด้านล่าง) การออกแบบเว็บส่วนใหญ่พยายามสร้างมุมมองเดียวที่เหมาะสมกับหน้าจอส่วนใหญ่ ในช่วงห้าปีที่ผ่านมามีการเปลี่ยนแปลงอย่างมากกับการใช้ Responsive Web Design (RWD)

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

ในการพัฒนาเว็บข้อความค้นหาสื่อมักใช้เพื่อนำชุดลักษณะต่าง ๆ ไปใช้กับเว็บเพจโดยขึ้นอยู่กับปัจจัยหลายประการ ปัจจัยทั่วไปบางอย่างรวมถึง:

• ความกว้างหน้าจอปัจจุบัน
• ความสูงของหน้าจอปัจจุบัน
• ความกว้างของอุปกรณ์
• ความสูงของอุปกรณ์
• การวางแนวอุปกรณ์

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

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

ด้วยที่กล่าวว่าอุตสาหกรรมการพัฒนาเว็บได้เกิดขึ้นกับชุดของเบรกพอยต์ทั่วไปที่เกิดขึ้นครั้งแล้วครั้งเล่า

จุดพักโดยทั่วไปสำหรับความกว้างหน้าจอปัจจุบันและโดยทั่วไปแล้ว:

_{หน่วยใน px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

เหตุผลสำหรับตัวเลขเฉพาะเหล่านี้ค่อนข้างธรรมดา iPhone ดั้งเดิมมีหน้าจอขนาด 320 × 480 iPad ดั้งเดิมมีหน้าจอขนาด 768 × 1024 1600 × 1200 เป็นเรื่องธรรมดาสำหรับความละเอียดหน้าจอที่ใหญ่ขึ้น

แม้ว่าจะเป็นเรื่องธรรมดาที่จะเห็นการเยาะเย้ยที่เบรกพอยต์บางส่วนหรือทั้งหมด แต่ก็เป็นเรื่องปกติที่จะต้องมีการเรนเดอร์หลาย ๆ อันของหน้าใดหน้าหนึ่งที่แสดงจุดเปลี่ยนการออกแบบระดับกลาง

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

นอกจากนี้ยังช่วยหลีกเลี่ยงข้อผิดพลาดการออกแบบทั่วไปที่องค์ประกอบ UI เฉพาะหายไปหรือไม่สอดคล้องกันระหว่างเบรกพอยต์

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

ฉันประหลาดใจที่ไม่มีใครพูดถึงเรื่องนี้:

Google มีเครื่องมือพัฒนาที่เรียกว่า

ขนาดเบราว์เซอร์

มันค่อนข้างตอบคำถามของคุณคนเดียว

ฉันมีบันทึกย่อเกี่ยวกับแนวโน้มปัจจุบัน:

ปัจจุบันผู้ใช้ส่วนใหญ่มีความละเอียด 1024x600 (แท็บเล็ต / เน็ตบุ๊ก) หรือใหญ่กว่า คุณต้องอย่าลืมลบ24pxแถบเลื่อนออกซึ่งทำให้ความกว้าง 1,000px ดีขึ้น สำหรับความสูง: ผู้ใช้เว็บเก่งในการเลื่อนในแนวตั้งเนื่องจากพวกเขาคุ้นเคยกับการใช้ล้อเลื่อนบนเมาส์ ความสูงเริ่มต้นนั้นสำคัญมากสำหรับการแสดงผลครั้งแรก

ผู้ใช้ไม่ค่อยดีในการเลื่อนในแนวนอนดังนั้นจึงไม่แนะนำให้ใช้เค้าโครงที่กว้างกว่า 1,000px

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

สรุป:

• หลีกเลี่ยงความกว้างคงที่ที่มากกว่า 1,000px
• ตรวจสอบให้แน่ใจว่าความประทับใจแรกของคุณดูดีที่ 1024x600
• อย่ากลัวที่จะวางเนื้อหาไว้ด้านล่าง

คำตอบสั้น ๆ : 775x400 สำหรับ 800x600 และสำหรับ 1024x768 ใช้ 1,000x500

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

หากฉันไม่สามารถแสดงบนพีซีของฉันในขนาดที่ฉันใช้กฎส่วนบุคคลของฉัน (อย่าใช้การวัดของฉันเป็นสิ่งศักดิ์สิทธิ์ทุกคนมีของเขา):

เป็นขนาดที่ปลอดภัยมันเป็นการปรับที่ดีสำหรับ 800x600 (การลบแถบเลื่อนและแถบด้านบนฉันใช้ 775x400 เป็น "เหนือเส้น") แต่ทุกวันนี้ด้วยหน้าจอที่ถูกกว่าด้วยมาตรฐานที่กว้างขึ้นฉันเริ่มออกแบบ 1024x768 (1000x500)

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

หมายเหตุ: ฉันใช้ความสูงต่ำเช่นนี้แม้กระทั่งบน 1,000px เพราะคนมักจะมีแถบเลื่อนเพิ่มเติมจำนวนมากบนเบราว์เซอร์พื้นฐาน (เช่น GoogleRank สำหรับตัวอย่างหรือที่คั่นหนังสือและอื่น ๆ อีกมากมาย) ดังนั้นฉันจึงชอบออกแบบสำหรับสถานการณ์ที่เลวร้ายที่สุด

Ps ขอโทษสำหรับภาษาอังกฤษที่ไม่ดีของฉัน :)

เรามีโปรแกรมติดตามที่บอกข้อมูลเกี่ยวกับผู้ใช้ของเรา มากกว่าครึ่งหนึ่งอยู่ที่ 1024x768 ฉันเลยใช้มันเป็นขนาดจอภาพ "มาตรฐาน"

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

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

ฉันต้องค้นหาสถิติเพื่อสำรองข้อมูลฉัน (เช่นโพสต์บล็อก SO ) แต่ 1024x768 ได้ดำเนินการหรือเข้าแทนที่ส่วนทั่วไปมาตรฐานสำหรับความละเอียดหน้าจอ ฉันออกแบบ mockups เว็บสำหรับผู้ชมทั่วไปที่มีความกว้าง 1,000 px เพื่อบัญชีสำหรับแถบเลื่อนและเส้นขอบหน้าต่างที่มีความละเอียดที่มีความกว้าง 1024 px สำหรับผู้ชมที่เฉพาะเจาะจงมากขึ้นสิทธิของ Pekka ในความคิดเห็นของเขา ค้นหาสิ่งที่เป็นบรรทัดฐานสำหรับกลุ่มเป้าหมาย

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

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

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

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

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

แผนของคุณควรที่จะได้รับผลกระทบน้อยที่สุดและหากเป็นเช่นนั้นก็คือ Joe Dinosaur ในเครื่อง 800x600 ของ Windows 95 แล้วนั่นคือสิ่งที่คุณควรทำ

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

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

คำตอบคือ: ไม่ไม่มี 'มาตรฐาน'

ฉันแนะนำให้ใช้ความกว้าง 960px สำหรับเทมเพลตของคุณเนื่องจากความละเอียดหน้าจอส่วนใหญ่คือ 1028px ดังนั้นแถบเลื่อนจะไม่ปรากฏขึ้นและคุณจะเห็นพื้นหลังที่คุณใช้เช่นกัน

ฉันจะแนะนำให้คุณใช้ 1024px สำหรับความกว้างมาตรฐาน เพราะจำนวนพีซีสูงสุดที่สร้างด้วยจอ crt และความละเอียดของจอภาพนี้คือ 1024 * 768px