การกำหนดความกว้างของหน้าเว็บของคุณ

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

พิจารณามติทำไม

ในปีพ. ศ. 2538 จอภาพความละเอียดมาตรฐาน 640x480 เป็นจอภาพที่ใหญ่ที่สุดและดีที่สุด ซึ่งหมายความว่านักออกแบบเว็บมุ่งเน้นการสร้างหน้าเว็บที่ดูดีในเว็บเบราเซอร์ที่มีขนาดใหญ่ที่สุดในจอภาพขนาด 12 นิ้วถึง 14 นิ้วที่ความละเอียดนั้น

วันนี้ความละเอียด 640x480 มีสัดส่วนน้อยกว่าร้อยละ 1 ของการเข้าชมเว็บไซต์ส่วนใหญ่ ผู้คนใช้คอมพิวเตอร์ที่มีความละเอียดมากขึ้นเช่น 1366x768, 1600x900 และ 5120x2880 ในหลายกรณีการออกแบบหน้าจอความละเอียด 1366x768 ใช้งานได้

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

ความกว้างเบราเซอร์

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

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

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

หน้าที่ความกว้างคงที่หรือความกว้างของของเหลว

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

ความกว้างคงที่

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

ในการสร้างหน้าเว็บความกว้างคงที่เพียงใช้ตัวเลขพิกเซลเฉพาะสำหรับความกว้างของส่วนหน้าของคุณ

ความกว้างของของเหลว

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

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

ผู้ชนะ: CSS Media Queries

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