ผู้ใช้ที่เข้าถึงอินเทอร์เน็ตผ่านแท็บเล็ตและโทรศัพท์มือถือเพิ่มมากขึ้น ตามที่คุณทราบแล้วหมายความว่าการออกแบบหน้าเว็บที่ดูดีบนคอมพิวเตอร์ของเรานั้นไม่เพียงพออีกต่อไป แต่จะต้องมีให้เห็นบนอุปกรณ์เคลื่อนที่แต่ละเครื่องด้วย ปัญหา? ขนาดหน้าจอและความละเอียดที่แตกต่างกัน นั่นคือเหตุผลว่าทำไมจึงเป็นเรื่องยากที่จะออกแบบที่ปรับให้เข้ากับสื่อทุกประเภทได้อย่างถูกต้อง (ชื่อดัง การออกแบบที่ตอบสนอง, แปลว่า การออกแบบที่ปรับเปลี่ยนได้).
ต่อไปนี้เป็นเคล็ดลับที่ควรคำนึงถึงเมื่อทำการออกแบบด้วยคุณสมบัติเหล่านี้ ใส่ใจ!
เคล็ดลับสำหรับการออกแบบที่ปรับเปลี่ยนได้
- สร้างเทมเพลตง่ายๆโดยง่ายฉันไม่ได้หมายความว่าอ่อนโยน ฉันกำลังพูดถึง estructura HTML ของเว็บไซต์ของคุณ: ยิ่งชัดเจนยิ่งดี โปรดทราบว่าหน้าจอคอมพิวเตอร์สามารถใส่คอลัมน์แนวตั้งได้สามคอลัมน์ บนหน้าจอมือถือคุณจะพอดีกับหน้าจอเดียว ลองคิดดูว่าคุณจะจัดตำแหน่งองค์ประกอบอย่างไร
- กำจัดทุกสิ่งที่ไม่จำเป็นหลีกเลี่ยงเอฟเฟกต์ jQuery ภาพเคลื่อนไหว Flash และโค้ดอื่น ๆ ที่ทำให้การโหลดหน้าเว็บของคุณช้าลง ยิ่งคุณมีเนื้อหาประเภทนี้น้อยเท่าไหร่เว็บก็จะโหลดเร็วขึ้นเท่านั้น
- กำหนดสไตล์ css สำหรับแต่ละ "ขนาด"สร้าง tiny.css, small.css และ big.css (เป็นต้น) ที่ทำงานตามอุปกรณ์ที่เปิดดู ตัวอย่างเช่น:
@ นำเข้า url (tiny.css) (ความกว้างขั้นต่ำ: 300px);
@ นำเข้า url (small.css) (ความกว้างขั้นต่ำ: 600px);
@import url (big.css) (ความกว้างต่ำสุด: 900px);
- ความละเอียดที่ใช้มากที่สุด320px/480px/720px/768px/900px/1024px
- ทำให้เทมเพลตของคุณมีความยืดหยุ่นเมื่อใดก็ตามที่คุณทำได้ให้ใช้เปอร์เซ็นต์แทนจำนวนเงินคงที่ นี่คือการเทียบเคียงอ้างอิงบางส่วน: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- วิชาการพิมพ์ มีความสำคัญมากกว่าที่เคยบางครั้งหน้าจออุปกรณ์ของคุณอาจมีขนาดเล็กมากจนสิ่งที่คุณเห็นคือข้อความ นั่นคือเหตุผลที่เราต้องเลือกฟอนต์ที่ดีที่สุดบนไซต์ของเราอย่างระมัดระวังเพื่อที่ว่าเมื่อย่อขนาดแล้วจะไม่สูญเสียความชัดเจน นอกจากนี้เราต้องรู้วิธีผสมผสานฟอนต์ที่เป็นกลางมากขึ้นกับตัวอื่น ๆ ด้วยบุคลิกที่ทำให้เว็บมีตัวละครที่จำเป็น ดังนั้นคำแนะนำแรกคือให้คุณใช้เวลาเลือกฟอนต์ที่คุณจะใช้
- ประเทศสหรัฐอเมริกา ภาพคุณภาพสูงเมื่อพื้นที่ลดลงภาพต่างๆก็จะติดมาด้วย เลือกสิ่งที่ไม่สูญเสียคุณภาพเมื่อลดขนาดและจะได้ผลเหมือนกันเมื่อปรับขนาด รูปภาพคุณภาพต่ำจะทำให้เว็บไซต์ของคุณดูแย่
- ภาพของคุณจะเห็นอยู่เสมอ เต็มป้องกันไม่ให้รูปภาพของคุณถูกตัดออกโดยการเพิ่มโค้ด img (width: 100%;) ใน css ของคุณ ด้วยวิธีนี้คุณกำลังบอกให้อุปกรณ์คำนวณความสูงที่จะกำหนดให้กับรูปภาพใหม่เพื่อให้สามารถมองเห็นความกว้างได้หนึ่งร้อยเปอร์เซ็นต์
- ต่ำทั้งหมด URL เดียวกันอย่าลืมเกี่ยวกับโดเมนย่อยเช่น www.mysite.com/mobile เนื่องจากไฟล์ index.html เดียวกันในโฟลเดอร์รูทจะใช้ได้กับทุกอุปกรณ์ (หากคุณทำการออกแบบที่ปรับเปลี่ยนได้อย่างถูกต้อง) คุณทราบข้อดีอยู่แล้ว: ยิ่งโดเมนย่อยน้อยลงการโหลดหน้าเว็บก็จะเร็วขึ้น
- ใช้ประโยชน์จากการสนับสนุน: จินตนาการการเข้าถึงเว็บไซต์จากคอมพิวเตอร์เดสก์ท็อปไม่เหมือนกันกับ iPad หรือโทรศัพท์มือถือ ประการแรกคุณจะนำทางด้วยความสงบและสงบ หลังจากนั้นคุณจะทำในเวลาไม่ได้ใช้งานและปิดหน้าต่างทันทีที่คุณเบื่อ ใช้ประโยชน์จากเงื่อนไขเหล่านี้เพื่อสร้างความบันเทิงให้กับผู้ใช้และทำให้พวกเขามีความสุขในไม่กี่นาทีที่พวกเขาจะอุทิศให้คุณ บางทีเมื่อเขากลับถึงบ้านเขาจะตัดสินใจไปเยี่ยมคุณด้วยวิธีที่ผ่อนคลายมากขึ้น
- ได้รับแรงบันดาลใจ ในสิ่งพิมพ์ดิจิทัลคุณจะสงสัยว่าทำไมคำแนะนำนี้ ง่ายมาก: นิตยสารดิจิทัล (ดี) รู้วิธีใช้ประโยชน์จากการสนับสนุนและการออกแบบที่ชาญฉลาดมาก รับแรงบันดาลใจจากพวกเขาและสร้างเว็บไซต์ที่ยากจะทิ้ง
ข้อมูลมากกว่านี้ - นิตยสารดิจิทัล
ที่มา - สปลิโอ, 960.gs คอลัมน์
มีสิ่งที่ฉันไม่เห็นด้วยอย่างยิ่ง
ในจุดที่ 5 ... ตั้งแต่ 200px = 15,38% และสิ่งต่อไปนี้ ... การเปรียบเทียบอ้างอิงนี้ไม่สามารถทำได้โดยไม่มีการวัดระดับพาเรนต์ขนาดต่อพิกเซลไม่ใช่การวัดแบบสัมพัทธ์เหมือนกับเปอร์เซ็นต์!
ระบุรูปภาพด้วยความกว้าง: ผิด 100% ฉันไม่คิดว่ามันควรจะเป็นคำแนะนำ เป็นการดีกว่าที่จะกำหนดรูปภาพด้วยความกว้างและความสูงดังนั้นเซิร์ฟเวอร์จึงใช้เวลาในการประมวลผลข้อมูลน้อยลง (ไม่ต้องคำนวณขนาด) และเราปรับปรุงความเร็วในการโหลดของหน้าเว็บ (สำคัญมากในเว็บที่ปรับเปลี่ยนได้หรือตอบสนอง การออกแบบ).
ฉันจะรวมไว้แล้วแม้ว่าจะเป็นการแตะจมูก ... ภาพสำหรับหน้าจอเรตินา หากเราต้องการออกแบบเว็บแบบตอบสนองจำเป็นต้องใช้รูปภาพสำหรับการแสดงเรตินาเนื่องจากจำนวนการดูบนมือถือและแท็บเล็ตจำนวนมากใช้หน้าจอเหล่านี้ ดังนั้นจึงไม่มีจุดใดที่จะใช้ความพยายามในการออกแบบสำหรับพวกเขาที่คันเร่งเพียงครึ่งเดียว
เหมาะสำหรับการพักผ่อน
ในจุดที่ 5 พวกเขาใส่บริบทและบอกคุณเกี่ยวกับเลย์เอาต์ทั้งหมด 1300px ที่มี 3 คอลัมน์หนึ่งใน 200, 300 และ 1000
ถ้าคุณส่งผ่านไปเป็นเปอร์เซ็นต์ในกรณีของพวกเขาก็เป็นอย่างที่คุณพูดคือ 15,38% ((200 * 100) / 1300) (ทศนิยมด้านล่างระบบสากล: P)
แต่ถ้าเราพูดถึงเค้าโครง 500px และเรามี 3 คอลัมน์หนึ่งใน 200 อีกอันจาก 200 และอีก 100px เปอร์เซ็นต์จะไม่เหมือนเดิมอีกต่อไปในกรณีนี้คือ 200px = 40% ((200 * 100) / 500)
ซึ่งจะเป็น: 200px = 40% และ 100px = 10%
อย่างที่ฉันพูดไปพวกเขาไม่ใช่ข้อมูลอ้างอิงที่คุณระบุ แต่เป็นเพียงข้อมูลอ้างอิงบนเลย์เอาต์ 1300px เท่านั้น
ขอแสดงความนับถือ
ช่างเป็นความล้มเหลวคุณมีสิทธิ์ที่สุดในโลก! ขอบคุณอีกครั้ง ;)