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

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

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

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

นักออกแบบเว็บไซต์บางคนใช้เวลาหลายวันในการแก้ไขปัญหาเล็กน้อยกับ Internet Explorer และปล่อยให้ผู้ใช้มือถือของตนเป็นผู้เยี่ยมชมมือสอง นี่เป็นแนวทางที่โง่เขลา

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

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

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

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

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

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

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

@media screen { * { background: silver } }

หรือ

max-width

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

คำจำกัดความนี้เป็นไปได้ผ่านการตั้งค่าคุณสมบัติพื้นฐาน: device-width, orientation, color และ @media screen and (min-width: 480px) { div { float: left; background: red; } ....... } คำจำกัดความอื่น ๆ ก็เป็นไปได้เช่นกัน แต่ในกรณีนี้สิ่งที่สำคัญที่สุดที่ควรทราบคือความละเอียดขั้นต่ำ (ความกว้าง) และการตั้งค่าการวางแนว (แนวนอนเทียบกับแนวตั้ง)

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

initial-scale

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

user-scalable=false

“ ซูมอัจฉริยะ”

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

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

display: none;

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

นอกจากนี้เราสามารถปิดการซูมได้อย่างสมบูรณ์ด้วย :after

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

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

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

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

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

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

Psuedo-Elements

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

สำหรับผู้เริ่มต้นการซ่อนองค์ประกอบบางอย่าง (:first-line) อาจเป็นทางออกที่ดีในการลดจำนวนองค์ประกอบบนหน้าจอสำหรับเลย์เอาต์สมาร์ทโฟนซึ่งมีพื้นที่ไม่เพียงพอเกือบตลอดเวลา

แต่นอกเหนือจากนั้นคุณยังสามารถสร้างสรรค์ด้วย CSS องค์ประกอบหลอก (ตัวเลือก) เช่น p:first-line และ p. หมายเหตุ: อีกครั้งองค์ประกอบหลอกได้รับการสนับสนุนโดย เบราว์เซอร์หลักทั้งหมด .

องค์ประกอบหลอกใช้เพื่อใช้สไตล์เฉพาะกับบางส่วนขององค์ประกอบ HTML หรือเพื่อเลือกองค์ประกอบย่อยบางส่วน ตัวอย่างเช่น a:visited pseudo-element ช่วยให้คุณกำหนดสไตล์ได้เฉพาะในบรรทัดแรกเท่านั้นโดยตัวเลือกบางตัว (เช่น 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:''; } } s) ในทำนองเดียวกัน :before pseudo-element จะช่วยให้คุณกำหนดรูปแบบของ :after s ทั้งหมดด้วยลิงก์ที่ผู้ใช้เยี่ยมชมก่อนหน้านี้ เห็นได้ชัดว่าสิ่งเหล่านี้มีประโยชน์

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

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

โดยใช้เพียงปุ่ม img { max-width: 100% } และ

องค์ประกอบหลอกเราบรรลุสิ่งต่อไปนี้:

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

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

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

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

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

|_+_|

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

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

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

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

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

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

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

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

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

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

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

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

สรุป

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