ทำไมเว็บไซต์ส่วนใหญ่จึงปรับให้เหมาะสำหรับการดูในโหมดแนวตั้ง [ปิด]

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

แก้ไข: ประเด็นนี้ไม่ใช่ว่าฉันต้องการจำกัดความสูงของเว็บไซต์ ประเด็นคือฉันต้องการให้เต็มพื้นที่ว่างเมื่อฉันมี 1920x1080 ในโหมดแนวนอน

แก้ไข 2: ดูสิ่งนี้เพื่อเข้าใจสิ่งที่ฉันกำลังพูด

มีขีด จำกัด ว่าไกลแค่ไหนที่ดวงตาสามารถสแกนโดยไม่ลืมว่าเส้นต่อไปคืออะไรเมื่อคุณไปถึงจุดสิ้นสุดของบรรทัดปัจจุบัน มีการศึกษาจำนวนหนึ่ง ( รวมถึงอันนี้ ) เกี่ยวกับความกว้างและความสามารถในการอ่านที่เหมาะสม

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

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

ความเห็นเพิ่มเติม : (จากคำถามถูกโพสต์ในความคิดเห็น)

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

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

ความเห็นเกี่ยวกับ Standard De Facto ปัจจุบัน :

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

ส่วนใหญ่มีความกว้างหน้าจอทั่วไป (1024 1280 1366) มีความใกล้พอเพื่อที่ว่าถ้าคุณออกแบบสำหรับที่เล็กที่สุด (1024p) และศูนย์การออกแบบบนหน้าก็ยังจะดูดีในที่อื่น ๆเล็กน้อยมิติแนวนอนขนาดใหญ่ เป็นการยากมากที่จะจัดวางทุกอย่างให้ถูกต้องในรูปแบบใด ๆ น้อยมากต้องรองรับหลายรูปแบบขึ้นอยู่กับความกว้างของหน้าจอ ผู้ใช้ 1080p เพิ่มจำนวนขึ้นเรื่อย ๆ แต่ก็ยังมีจำนวนน้อยมากที่พวกเขาต้องให้การสนับสนุน

ในกรณีที่คุณมีความสนใจผมขอแนะนำให้ perusing บางส่วนของบทความการออกแบบที่ระดับ "A รายการนอกเหนือ" คุณจะเริ่มเข้าใจว่าการทำสิ่งที่คุณต้องการนั้นยากกว่าที่คิด เมื่อฉันโพสต์คำถามเกี่ยวกับการออกแบบสำหรับ 1080pการตอบสนองเริ่มต้นครั้งแรกนั้นมีจำนวน มันเป็นสิ่งที่ไม่เคยมีมาก่อนสำหรับนักออกแบบเว็บไซต์ส่วนใหญ่

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

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

ขณะนี้มีหน้าเว็บที่ยาวไม่ จำกัด (ขอบคุณ AJAX) คุณจะทำอย่างไรถ้าคุณเห็นหน้ากว้างแบบไม่มีขีด จำกัด (ฉันจะตามล่าและฆ่าผู้ออกแบบการคลิกออกไปจากหน้าเว็บนั้นไม่ดีพอนักออกแบบจะต้องตาย)

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

หลังจากอ่านคำตอบก่อนหน้านี้ฉันสังเกตเห็นว่ามีหลายจุดที่ขาดหายไปดังนั้นฉันจะพยายามอธิบายสิ่งเหล่านั้น

การนำคอลัมน์ไปใช้งานยาก

เมื่อคุณพูดถึงหน้ากว้างขนาดใหญ่ฉันจินตนาการว่าคุณกำลังพูดถึงคอลัมน์ข้อความเหมือนที่คุณเห็นในหนังสือพิมพ์ "จริง" มีสองปัญหาคือ

ก่อนอื่น HTML 4 และ XHTML 1.0 / 1.1 ที่แท้จริงไม่ได้มีวัตถุประสงค์เพื่อแสดงข้อความในคอลัมน์ มีแฮ็กสำหรับ Firefox (และอาจเป็นเบราว์เซอร์ทั่วไปอื่น ๆ ) แต่มันจะไม่ทำงานใน Internet Explhorror

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

มันทำให้เป็นไปไม่ได้ในทางปฏิบัติที่จะมีเลย์เอาต์ที่ใช้งานได้ในคอลัมน์ที่มีแถบเลื่อนแนวนอนเท่านั้นไม่มีแนวตั้ง

ไม่มีความสูง 100%

จริง HTML / XHTML มีวัตถุประสงค์เพื่อปรับขนาดขององค์ประกอบตามความกว้างของหน้า เป็นการยากที่จะใช้ความสูงของหน้าสำหรับการวัด

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

เรียกดูด้วยหน้าครึ่งหน้าจอ

ด้วยหน้าจอขนาดใหญ่ 16: 9/16: 10 จึงไม่แปลกที่การทำงานกับสองหน้าต่างเคียงข้างกัน ( Win+ ←/ Win+ →ใน Windows Seven) ซึ่งหมายความว่าหน้าต่างเบราว์เซอร์จะมีความกว้างเล็กน้อยและสูงมาก

ความกว้างคงที่และไดนามิก

การสันนิษฐานของคุณว่าเว็บไซต์ส่วนใหญ่เหมาะสำหรับการดูในโหมดแนวตั้งอาจผิด

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

ประการที่สองมีความแตกต่างระหว่างเว็บไซต์ที่มีความกว้างคงที่และเว็บไซต์ที่มีความกว้างซึ่งเท่ากับร้อยละของความกว้างของหน้าต่างเบราว์เซอร์

ในกรณีแรกคุณอาจสังเกตเห็นว่าเว็บไซต์ส่วนใหญ่ไม่ได้รับการปรับปรุงให้ดีที่สุดไม่ว่าจะเป็นแนวตั้งหรือโหมดแนวนอน โดยทั่วไปความกว้างจะถูกกำหนดไว้ที่ 1024, 800 หรือน้อยกว่าซึ่งไม่สมเหตุสมผลเมื่อดูในหน้าจอ 24 นิ้วที่มีความละเอียด 1920 × 1080

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

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

เหตุใดจอภาพสมัยใหม่จึงมุ่งเน้นในโหมดแนวนอน?

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

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

เพราะเหตุใดเว็บไซต์จึงปรับให้เหมาะสำหรับการดูในโหมดแนวตั้ง

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

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

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

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

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

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

ก่อนอื่นให้ฉันพูดถึงส่วนขยาย Firefox ต่อไปนี้ที่ฉันค้นพบเมื่อหลายเดือนก่อน: เครื่องอ่านคอลัมน์

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

ทำไมเราถึงเลื่อนในแนวตั้ง?

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

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

ความสามารถหลายคอลัมน์

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

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

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

ขนาดจอภาพ

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

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

คำสั่งแบบมีเงื่อนไขใน CSS

หมายเหตุเกี่ยวกับเค้าโครงความกว้างคงที่

ฉันชอบคำสั่ง CSS ที่ช่วยให้ผู้ออกแบบเว็บสามารถรองรับความกว้างได้หลากหลายในขณะที่หลีกเลี่ยงแถบเลื่อนและคงความสามารถในการอ่านได้: "ความกว้างสูงสุด" (มีสี่คำสั่งดังนี้: ความกว้างต่ำสุดความกว้างสูงสุดความสูงต่ำสุดความสูงสูงสุด) สำหรับ div ที่มีข้อความให้ระบุความกว้างสูงสุดคือ, พูด, 65em

คุณจะได้รับถ้า / อื่น ๆ
หากพื้นที่ที่มีอยู่น้อยกว่า 65em ข้อความจะถูกปรับใหม่ตามนั้น: ไม่มีแถบเลื่อนแนวนอนหากพื้นที่ว่างที่มีมากกว่า 65em ระบบจะทำการตั้งค่า div ที่ 65em

จอภาพแบบจอกว้างได้ถูกถอดออกจริงๆในช่วง 2 ปีที่ผ่านมา - พวกเขาเคยเป็นตัวเลือกที่แพงกว่า

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

สุดท้ายคุณจะเลือกความละเอียดแบบจอกว้างที่คุณต้องการได้อย่างไร - เดสก์ท็อปของฉันคือ 1920x1080; แล็ปท็อปของฉันคือ 1440x900 คุณออกแบบมาเพื่ออะไร

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

มีสาเหตุหลายประการ:

• เอกสารที่เป็นข้อความส่วนใหญ่เป็นอัตราส่วนภาพตามธรรมเนียมดังนั้นเว็บจึงเก็บรักษาไว้

• การอ่านข้อความที่สั้นกว่าจะง่ายกว่า ฉันไม่มีการอ้างอิง แต่มันเป็นคำแนะนำทั่วไปในการออกแบบจนถึงจุดที่เป็นมาตรฐานมากกว่าแนวทาง

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

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

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

ในตอนนี้มาตรฐานการออกแบบเว็บไซต์สำหรับเว็บไซต์นั้นพัฒนาขึ้นในขนาดความกว้าง 960px เพื่อรองรับความละเอียดหน้าจอที่ 1024px ขึ้นไป (ไม่มีแถบเลื่อนแนวนอน) นี่เป็นข้อกำหนดขั้นต่ำเนื่องจากทุกคนไม่ได้ใช้หน้าจอมันใหม่ขนาด 24 นิ้ว (คิดถึงแท็บเล็ตและเน็ตบุ๊กซึ่งเป็นฮาร์ดแวร์ใหม่ที่มีความละเอียดเล็กน้อย)

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

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

ที่ดีที่สุดถ้าคุณไม่ต้องการให้ผู้เข้าชมรู้สึกว่าหน้านอกเขตเนื้อหาไม่ว่างเปล่าคุณสามารถเพิ่มสตริปเปอร์ / พื้นผิวสีที่ขยายออกไปและปรับให้เข้ากับขนาดของหน้าจอของผู้ใช้ (เช่นเดียวกับhttp://www.cnn.com/ซึ่งใช้กับส่วนหัวเท่านั้น แต่คุณสามารถทำได้ทั้งหน้า)

ทำไมเว็บไซต์ส่วนใหญ่จึงปรับให้เหมาะสำหรับการดูในโหมดแนวตั้ง

เหตุใดเราจึงพิมพ์กระดาษในโหมดแนวตั้งเมื่อแนวนอนเป็นตัวเลือกที่เหมาะสมที่สุดเช่นกัน?

อย่างที่หลายคนพูดมันเป็นการง่ายที่จะอ่านจำนวนบรรทัดสั้น ๆ ที่ใหญ่กว่าการอ่านสองหรือสามบรรทัด

นอกเหนือจากนั้นหากคุณต้องเติมเนื้อหา 1280 * x พิกเซลหน้าเว็บจะยุ่งเหยิงและไม่มีใครรู้ว่าต้องแก้ไขอะไร เว็บเพจควรทำงานเฉพาะอย่างไม่ใช่งานทุกอย่าง

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

มีหลายเหตุผลที่ต้องพัฒนาสำหรับความละเอียด 1024 แต่ฉันคิดว่าปัจจัยความยุ่งเหยิงเป็นหนึ่งในสิ่งที่สำคัญกว่า

ฉันสังเกตเห็นว่าคุณกำลังใช้สิ่งที่ดูเหมือนเป็น Windows 7 ดังนั้นคำตอบคือ: Win+←

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

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

นอกจากนี้เพียงเพราะคุณมีจอภาพที่ดีไม่ได้หมายความว่าคนส่วนใหญ่มีหน้าจอกว้างดี แหล่งข้อมูลที่ดีในการตรวจสอบขนาดรูปแบบในการเป็นbrowsersize ของ Google

จอภาพของคุณไม่ถูกต้อง จอภาพของโปรแกรมเมอร์ควรสูงกว่าความกว้างในแนวตั้งมากกว่าแนวนอน