บทนำสู่การออกแบบเว็บที่ตอบสนองตามอุปกรณ์: องค์ประกอบหลอก การสืบค้นสื่อ และอื่นๆ

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

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

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

นี่เป็นแนวทางที่โง่เขลา

Mashable เรียกว่า 2013 ปีของการออกแบบเว็บที่ตอบสนอง ทำไม? การเข้าชมมากกว่า 30% มาจากอุปกรณ์เคลื่อนที่ พวกเขาคาดการณ์ว่าตัวเลขนี้จะสูงถึง 50% ภายในสิ้นปีนี้ ทั่วทั้งเว็บโดยทั่วไปแล้ว 17.4% ของการเข้าชมเว็บมาจากสมาร์ทโฟนในปี 2013 ในขณะเดียวกันการใช้งาน Internet Explorer เช่น คิดเป็นสัดส่วนเพียง 12% ของปริมาณการใช้งาน เบราว์เซอร์ ทั้งหมด ลดลงประมาณ 4% จากช่วงเวลานี้ของปีที่แล้ว (ตาม ให้กับ W3Schools) หากคุณกำลังปรับให้เหมาะสมสำหรับเบราว์เซอร์เฉพาะ แทนที่จะเป็นประชากรสมาร์ทโฟนทั่วโลก แสดงว่าคุณกำลังคิดถึงป่าไม้ และในบางกรณี นี่อาจหมายถึงความแตกต่างระหว่างความสำเร็จและความล้มเหลว—การออกแบบที่ตอบสนองตามอุปกรณ์มีผลกระทบต่ออัตราการแปลง, SEO, อัตราตีกลับ และอื่นๆ

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

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

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

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

แบบสอบถามสื่อในการออกแบบที่ตอบสนอง

ประเภทสื่อปรากฏขึ้นครั้งแรกใน HTML4 และ CSS2.1 ซึ่งเปิดใช้การวางตำแหน่งของ CSS แยกกันสำหรับหน้าจอและการพิมพ์ ด้วยวิธีนี้ เป็นไปได้ที่จะกำหนดรูปแบบแยกต่างหากสำหรับการแสดงผลคอมพิวเตอร์ของหน้าเทียบกับงานพิมพ์

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

หรือ

 @media screen { * { background: silver } }

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

คำจำกัดความนี้เป็นไปได้โดยการตั้งค่าคุณสมบัติพื้นฐาน: max-width , device-width , orientation , และ color คำจำกัดความอื่น ๆ ก็เป็นไปได้เช่นกัน แต่ในกรณีนี้ สิ่งที่สำคัญที่สุดที่ควรทราบคือความละเอียดขั้นต่ำ (ความกว้าง) และการตั้งค่าการวางแนว (แนวนอนกับแนวตั้ง)

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

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

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

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

“สมาร์ทซูม”

เบราว์เซอร์มือถือใช้สิ่งที่เรียกว่า “สมาร์ทซูม” เพื่อให้ผู้ใช้ได้รับประสบการณ์การอ่านที่ 'เหนือกว่า' โดยทั่วไป สมาร์ทซูมจะใช้เพื่อลดขนาดหน้าตามสัดส่วน สิ่งนี้สามารถแสดงออกมาได้สองวิธี: (1) การซูมที่เริ่มต้นโดยผู้ใช้ (เช่น การแตะสองครั้งบนหน้าจอ iPhone เพื่อซูมเข้าที่เว็บไซต์ปัจจุบัน) และ (2) การแสดงหน้าเว็บเวอร์ชันซูมเข้าในขั้นต้นบน โหลด

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

 <meta name="viewport" content="width=device-width, initial-scale=1" />

ด้วยการตั้งค่า initial-scale เป็น 1 เราควบคุมระดับการซูมหน้าแรก (นั่นคือจำนวนการซูมเมื่อโหลดหน้า) หากคุณออกแบบหน้าเว็บให้ตอบสนอง รูปแบบที่ลื่นไหลและไดนามิกของคุณควรเติมเต็มหน้าจอสมาร์ทโฟนด้วยวิธีที่ชาญฉลาดโดยไม่ต้องซูมเริ่มต้น

นอกจากนี้ เราสามารถปิดใช้งานการซูมได้อย่างสมบูรณ์ด้วย user-scalable=false

ความกว้างของหน้า

สมมติว่าคุณกำลังมองหาการจัดหน้าแบบตอบสนองที่แตกต่างกันสามแบบ: แบบหนึ่งสำหรับเดสก์ท็อป แบบหนึ่งสำหรับแท็บเล็ต (หรือแล็ปท็อป) และอีกแบบสำหรับสมาร์ทโฟน ขนาดหน้าใดที่คุณควรกำหนดเป้าหมายเป็นจุดตัดของคุณ (เช่น 480px)

ขออภัย ไม่มีมาตรฐานที่กำหนดไว้สำหรับความกว้างของหน้าที่จะกำหนดเป้าหมาย แต่มักใช้ค่าที่ตอบสนองตัวอย่างต่อไปนี้:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

อย่างไรก็ตาม มีคำจำกัดความความกว้างที่แตกต่างกันจำนวนหนึ่ง ตัวอย่างเช่น 320 ขึ้นไปมีการเพิ่ม CSS3 Media Query เริ่มต้นห้ารายการ: 480, 600, 768, 992 และ 1382px นอกจากตัวอย่างที่ให้ไว้ในบทช่วยสอนการพัฒนาเว็บที่ตอบสนองแล้ว ฉันสามารถแจกแจงวิธีอื่นๆ ได้อีกอย่างน้อยสิบวิธี

ด้วยชุดการเพิ่มที่เหมาะสมเหล่านี้ คุณสามารถกำหนดเป้าหมายอุปกรณ์ส่วนใหญ่ได้ ในทางปฏิบัติ โดยปกติแล้ว ไม่จำเป็นต้องจัดการกับตัวอย่างที่กล่าวมาทั้งหมดของความกว้างของหน้าแยกกัน—ความละเอียดที่แตกต่างกันเจ็ดแบบอาจเกินความจำเป็น จากประสบการณ์ของผม 320px, 768px และ 1200px เป็นไฟล์ที่ใช้กันมากที่สุด ค่าทั้งสามนี้ควรเพียงพอสำหรับการกำหนดเป้าหมายสมาร์ทโฟน แท็บเล็ต/แล็ปท็อป และเดสก์ท็อป ตามลำดับ

องค์ประกอบหลอก

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

สำหรับผู้เริ่มต้น การซ่อนองค์ประกอบบางอย่าง ( display: none; ) อาจเป็นวิธีแก้ปัญหาที่ดีเมื่อต้องลดจำนวนองค์ประกอบบนหน้าจอสำหรับเลย์เอาต์ของสมาร์ทโฟน ซึ่งแทบทุกครั้งจะมีพื้นที่ไม่เพียงพอ

แต่ยิ่งไปกว่านั้น คุณยังสามารถสร้างสรรค์ด้วย CSS pseudo-elements (ตัวเลือก) เช่น :before และ :after หมายเหตุ: องค์ประกอบหลอกได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมดอีกครั้ง

องค์ประกอบหลอกใช้เพื่อใช้รูปแบบเฉพาะกับส่วนเฉพาะขององค์ประกอบ HTML หรือเพื่อเลือกชุดย่อยขององค์ประกอบ ตัวอย่างเช่น :first-line pseudo-element ให้คุณกำหนดสไตล์เฉพาะในบรรทัดแรกที่มีตัวเลือกบางอย่าง (เช่น p:first-line จะนำไปใช้กับบรรทัดแรกของ p ทั้งหมด) ในทำนองเดียวกัน องค์ประกอบหลอก a:visited จะให้คุณกำหนดสไตล์บน s ทั้งหมด a มีลิงก์ที่ผู้ใช้เคยเยี่ยมชมก่อนหน้านี้ เห็นได้ชัดว่าสิ่งเหล่านี้มีประโยชน์

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

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

การใช้เพียง :before และ :after pseudo-elements เราบรรลุสิ่งต่อไปนี้:

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความมหัศจรรย์ขององค์ประกอบหลอก Chris Coyier มีบทความที่ดีเกี่ยวกับ CSS-Tricks

ดังนั้นฉันควรเริ่มต้นที่ไหน

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

ขั้นตอนแรกที่คุณควรทำคือการจัดระเบียบองค์ประกอบทั้งหมดของหน้าเว็บของคุณให้เป็นขนาดหน้าจอต่างๆ

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

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

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

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

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

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

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

องค์ประกอบการออกแบบที่ตอบสนองอื่นๆ

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

 img { max-width: 100% }

องค์ประกอบอื่นควรได้รับการจัดการในลักษณะเดียวกัน ตัวอย่างเช่น ทางออกที่ดีสำหรับไอคอนใน RWD คือการใช้ IconFonts

คำไม่กี่คำเกี่ยวกับระบบกริดของไหล

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

แม้ว่าระบบกริดของไหลเหล่านี้มีความเกี่ยวข้องอย่างใกล้ชิดกับสิ่งที่เราได้พูดคุยกันที่นี่ แต่จริงๆ แล้วมันเป็นเอนทิตีที่แยกจากกันทั้งหมด ซึ่งจำเป็นต้องมีบทช่วยสอนเพิ่มเติมเพื่อหารือในรายละเอียด ดังนั้น ฉันจะพูดถึงเฟรมเวิร์กหลักที่สนับสนุนพฤติกรรมดังกล่าว: Bootstrap, Unsemantic และ Brackets

บทสรุป

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