เว็บไซต์ขนาดมาตรฐาน: คุณสมบัติความต้องการและข้อเสนอแนะ

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

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

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

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

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

เลย์เอาต์สำหรับทุกโอกาส

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

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

ขนาดที่นิยมมากที่สุดของเว็บไซต์

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

จากตารางก็เป็นไปได้ที่จะเรียนรู้วิธีการตรวจสอบขนาดของเว็บไซต์ที่คุณต้องการใช้ นอกจากนี้ก็สามารถสรุปได้ว่ารูปแบบที่พบมากที่สุดในวันนี้คือหน้าจอ 1366 x 768 จุด หน้าจอเหล่านี้มีการติดตั้งในแล็ปท็อปงบประมาณดังนั้นนิยมของพวกเขาเป็นไปตามธรรมชาติ ถัดไปนิยมมากที่สุดคือ HD-จอแสดงผลแบบเต็มซึ่งเป็นมาตรฐานทองคำสำหรับภาพยนตร์, เกมส์, และดังนั้นเพื่อสร้างรูปแบบเว็บไซต์ เพิ่มเติมในตารางที่เราเห็นใบอนุญาตโทรศัพท์มือถือ 360 x 640 พิกเซล, เช่นเดียวกับน้าต่างๆของเดสก์ทอปและหน้าจอมือถือนั้น

รูปแบบการออกแบบ

ดังนั้นหลังจากการวิเคราะห์สถิติที่เราสามารถสรุปได้ว่าความกว้างที่เหมาะสมของเว็บไซต์ที่มี 4 รูปแบบ:

1. แล็ปท็อปรุ่นกับ 1366 พิกเซลกว้าง
2. Full HD รุ่น
3. 800 พิกเซลในรูปแบบขนาดความกว้างสำหรับการแสดงผลบนหน้าจอเดสก์ท็ขนาดเล็ก
4. รุ่นมือถือของเว็บไซต์ - 360 พิกเซลกว้าง

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

ทำให้รูปแบบที่มีความยืดหยุ่น

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

อะไรคืออัตราส่วนทองคำและวิธีการใช้งานหน้าเว็บในรูปแบบหรือไม่

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

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

ลองกลับไปที่การออกแบบเว็บ

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

ใช้เทคโนโลยีใหม่

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

วิธีการเพิ่มเว็บไซต์พื้นที่ทำงาน

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

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

ตัวอย่างของวิธีที่ดีเพื่อซ่อนเมนูเป็นรูปแบบต่อไปนี้ (ภาพด้านล่าง)

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

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

เว็บไซต์ที่ดีที่สุด - การปรับตัว

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

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

สิ่งที่แตกต่างในการออกแบบการปรับตัวของว่างของรุ่นที่แตกต่างของเว็บไซต์ของคุณ

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

การปรับตัวสำหรับอุปกรณ์ที่แตกต่างกันคือความสำเร็จเนื่องจากความกว้างของรูปแบบหรือร้อยละผ่านบล็อกการขนส่งในพื้นที่ที่มีอยู่ (ในแนวตั้งแทนแนวนอนมาร์ทโฟนบนเดสก์ทอป) หรือรูปแบบของแต่ละบุคคลโดยการสร้างหน้าจอต่างๆ

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนองและพัฒนาคุณสามารถจากหนังสือ