ออกแบบเว็บไซต์

การออกแบบเว็บที่ตอบสนอง: พื้นฐานสำหรับผู้เริ่มต้น

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

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

การออกแบบเว็บที่ตอบสนองอย่างไรและทำไมจึงมีความสำคัญ

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

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

การออกแบบเว็บที่ตอบสนอง

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

มันเป็นเพียงเกี่ยวกับขนาดหน้าจอต่างๆ?

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

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

อีธาน Marcotte –พ่อของการออกแบบเว็บที่ตอบสนอง

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

พ่อของการออกแบบเว็บที่ตอบสนอง

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

ส่วนผสมพื้นฐานสามอย่างของการออกแบบเว็บที่ตอบสนอง

ใช้แบบสอบถามสื่อ CSS ในการปรับแต่งการจัดแต่งทรงผม

ในอดีตนักออกแบบเว็บขึ้นอยู่กับ "การดมกลิ่นตัวแทนผู้ใช้" เพื่อให้บริการโค้ด HTML/CSS ที่แตกต่างกันหรือพึ่งพาการเปลี่ยนเส้นทาง URL CSS3 แนะนำเทคนิคใหม่ที่เรียกว่า "สื่อแบบสอบถาม"

โดยใช้ @media กฎ, คุณสามารถรวมบล็อกเฉพาะของคุณสมบัติ CSS หลังจากตรวจสอบเงื่อนไขบางอย่าง. คุณสามารถตรวจสอบเงื่อนไขต่อไปนี้:

  • ความกว้าง/ความสูงวิวพอร์ต
  • ความกว้าง/ความสูงของอุปกรณ์
  • การวางแนว (แนวตั้ง/แนวนอน)
  • แก้ ปัญหา

คุณสามารถตรวจสอบเงื่อนไขและใช้แบบสอบถามสื่อเพื่อส่งมอบบล็อกจัดแต่งทรงผมเฉพาะตามประเภทของอุปกรณ์

ไวยากรณ์สำหรับแบบสอบถามสื่อ


@media not|only mediatype and (expressions) {
CSS-Code;
}

แบบสอบถามสื่อตัวอย่าง

มีตัวอย่างมากมายและมีประโยชน์ตัวแก้ไข "ลองตัวเอง" ที่มีอยู่บนเว็บไซต์ W3Schools

ในตัวอย่างด้านล่าง @media แบบสอบถามจะใช้เพื่อตรวจสอบว่าความกว้างของวิวพอร์ตเป็น 375 px หรือมากกว่า หากเป็นมากกว่า 375 px เมนูจะปรากฏขึ้นเหนือเนื้อหาและถ้าน้อยกว่า 375 px เมนูจะลอยไปทางด้านซ้าย

@media screen and (min-width: 375px) {
#leftsidebar {width: 150px; float: left;}
#main {margin-left:220px;}
}

 

เค้าโครงตามตารางของเหลว

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

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

รูปแบบความกว้างคงที่-CSS แบบดั้งเดิม

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

การออกแบบที่ตอบสนองต่อตารางของเหลว

ภาพของเหลว

ในวิธีการออกแบบเว็บที่ตอบสนอง, คุณควรใช้ CSS เพื่อกำหนดความกว้างสูงสุดสำหรับภาพทั้งหมดแต่ไม่มีความกว้างต่ำสุด.

ด้วยการระบุความกว้างสูงสุดคุณจึงมั่นใจได้ว่ารูปภาพจะไม่มีตัวตนมากเกินกว่าค่าที่จะส่งผลต่อคุณภาพของรูปลักษณ์ โดยไม่กำหนดความกว้างต่ำสุด, คุณจะอนุญาตให้ CSS ลดขนาดไปยังค่าใดๆ (จำเป็นเพื่อให้พอดีภายในบริบท).

CSS รักษาอัตราส่วนกว้างยาวและดังนั้นภาพของคุณจะดูไม่ยืด

ดีไซน์แรกบนมือถือ

การใช้งานโทรศัพท์มือถือได้ทะลุการใช้งานเดสก์ท็อปใน๒๐๑๗ ในวันนี้ statcounter เผยว่าผู้ใช้๕๐.๘๗% เรียกดูจากโทรศัพท์มือถือเป็นเทียบกับ๔๔.๗๘% จากเดสก์ท็

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

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

ดีไซน์แรกบนมือถือ

การทดสอบการออกแบบของคุณ–จำลองและศึกษา

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

เครื่องมือสำหรับนักพัฒนา Firefox –โหมดการออกแบบที่ตอบสนอง

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

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Firefox-โหมดการออกแบบตอบสนอง

เครื่องมือการระบุของ Chrome –โหมดอุปกรณ์

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

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

เครื่องมือการพัฒนาโครเมี่ยม-การตอบสนองการทดสอบ

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

วงศ์เธอ

ผู้สร้างเนื้อหา

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

บทความก่อนหน้า
เซิร์ฟเวอร์เมฆกับเซิร์ฟเวอร์ Dedicated: สิ่งที่ดีกว่าสำหรับคุณ?
บทความถัดไป
6เคล็ดลับสำหรับการแปล App มือถือที่ส่งผล
บทความที่เกี่ยวข้อง
การแฮ็คทางจริยธรรมเพื่อทดสอบช่องโหว่ด้านความปลอดภัย
ทั่ว ไป

การใช้การแฮ็กอย่างมีจริยธรรมเพื่อปรับปรุงการรักษาความปลอดภัย ...

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

0
การให้สากลในแอพมือถือ
แปล

6เคล็ดลับสำหรับการแปล App มือถือที่ส่งใหม่ ...

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

0
โพสต์ของเรา-->
บทความที่เกี่ยวข้อง
การแฮ็คทางจริยธรรมเพื่อทดสอบช่องโหว่ด้านความปลอดภัย
ทั่ว ไป

การใช้การแฮ็คอย่างมีจริยธรรมเพื่อปรับปรุง

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

การให้สากลในแอพมือถือ
แปล

6เคล็ดลับสำหรับการแปล App มือถือที่ ...

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

ธีม wordpress ขับเคลื่อนโดยjazzsurf.com