คู่มือเริ่มต้นฉบับสมบูรณ์สำหรับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์

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

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

การออกแบบเว็บตอบสนองคืออะไร?

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

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

ทำไมมันถึงสำคัญ?

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

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

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

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

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

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

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

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

1. รูปแบบที่ยืดหยุ่น

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

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

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

2. ภาพที่ยืดหยุ่น

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

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

หนึ่งในวิธีการผลิตที่คุณสามารถใช้เพื่อทำให้รูปภาพตอบสนองได้คือ Adaptive Images ใช้ CSS ด้านล่างเพื่อให้รูปภาพมีความกว้าง 100% เพื่อให้สามารถปรับเปลี่ยนได้ทุกเมื่อที่เบราว์เซอร์ปรับขนาด:

อิมเมจ {
 ความกว้างสูงสุด: 100%;
 ความกว้าง: 100%;
}

3. แบบสอบถามสื่อ

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

โดยทั่วไป มีสามแบบสอบถามสื่อที่เป็นของความละเอียดหน้าจอโทรศัพท์ เดสก์ท็อป และแท็บเล็ต การตั้งค่าความกว้างหน้าจอที่ใช้กันอย่างแพร่หลายมากที่สุดเพื่อให้ตรงกับความละเอียดหน้าจอเหล่านี้คือ 320px, 600px, 768px และ 1280px

ต่อไปนี้คือจุดสั่งหยุดการสืบค้นสื่อ CSS ที่ใช้งานได้จริงซึ่งจะช่วยคุณได้มาก:

/* กำหนดเอง, iPhone Retina */ 
หน้าจอ @media เท่านั้นและ (ความกว้างต่ำสุด : 320px) {
/* รูปแบบที่กำหนดเอง */
}
/* อุปกรณ์ขนาดเล็กพิเศษ, โทรศัพท์ */ 
หน้าจอ @media เท่านั้นและ (ความกว้างขั้นต่ำ: 480px) {
/* รูปแบบที่กำหนดเอง */
}
/* อุปกรณ์ขนาดเล็ก, แท็บเล็ต */
หน้าจอ @media เท่านั้นและ (ความกว้างขั้นต่ำ: 768px) {
/* รูปแบบที่กำหนดเอง */
}
/* อุปกรณ์ขนาดกลาง, เดสก์ท็อป */
หน้าจอ @media เท่านั้นและ (ความกว้างขั้นต่ำ: 992px) {
/* รูปแบบที่กำหนดเอง */
}
/* อุปกรณ์ขนาดใหญ่ หน้าจอกว้าง */
หน้าจอ @media เท่านั้นและ (ความกว้างขั้นต่ำ: 1200px) {
/* รูปแบบที่กำหนดเอง */
}

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

/* สมาร์ทโฟน (แนวตั้งและแนวนอน) ----------- */
หน้าจอ @media เท่านั้น และ (min-device-width : 320px) และ (max-device-width : 480px) {
/* รูปแบบ */
.button {แสดง:ไม่มี}
}