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

ร่างคำจำกัดความ

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

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

คำว่า "Responsive Web design" ได้รับการแนะนำโดย Ethan Marcotte ในบทความโดย A List Apart ที่เผยแพร่ในเดือนพฤษภาคม 2010
เขาจะอธิบายทฤษฎีและการปฏิบัติของเขาเกี่ยวกับการตอบสนองในหนังสือ "Responsive Web Design" ที่ตีพิมพ์ในปีพ. ศ. 2554 โดยจะ จำกัด การปรับตัวในฝั่งไคลเอ็นต์ (กริดที่ยืดหยุ่นในรูปเปอร์เซ็นต์ภาพของเหลวและข้อความค้นหา CSS3 Media)

เว็บไซต์เฉพาะโปรแกรมหรือตอบสนอง?

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

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

เว็บไซต์ที่ทุ่มเท

เว็บบนมือถือ

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

โดยปกติการทดสอบฝั่งเซิร์ฟเวอร์ครั้งแรกจะตรวจจับอุปกรณ์และส่งกลับไปยังที่อยู่เว็บเฉพาะ (เช่น m.monsite.com)

ข้อดีของเว็บไซต์เฉพาะ ได้แก่

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

เนื้อหาที่ซ้ำกัน
การบำรุงรักษาเว็บไซต์หลายแห่งและที่อยู่เว็บหลายแห่ง (สามารถสร้างดัชนีได้ง่ายจากเครื่องมือค้นหา)
การดมกลิ่น UA มักจะลำเอียงหรือไม่ทันสมัย
แอ็พพลิเคชันพื้นเมือง แอ็พพลิเคชันพื้นเมืองคือผลิตภัณฑ์ที่พัฒนาขึ้นโดยเฉพาะในภาษาต่างๆ (iOS, Android, WindowsPhone) และดาวน์โหลดและอ้างอิงภายใน "สโตร์" (AppStore, Google Play, ร้านค้า Windows) นี้จะให้ประโยชน์บางอย่าง: การสนับสนุนฟังก์ชันการทำงานดั้งเดิม (การแตะ, ตัววัดความเร่ง, การแจ้งเตือน, GPS ฯลฯ ) การติดตั้งที่เป็นไปได้ในอุปกรณ์ "ปรับสภาพ" ให้กับอุปกรณ์ (การยศาสตร์การทำงานความหนาแน่นของพิกเซล) การปรากฏตัวของแบรนด์ของเขาบน AppStore (เพื่อชื่อ แต่เขา) และเพื่อให้สามารถมี "ทางลัด" ในสมาร์ทโฟนของผู้ใช้ ... แต่ยังมีข้อเสีย: การพัฒนาเฉพาะในหลายภาษา (เฉพาะสำหรับ iOS, Android, WindowsPhone ฯลฯ ) ค่าใช้จ่ายในการพัฒนาใบอนุญาตและการบำรุงรักษาสำหรับแต่ละระบบปฏิบัติการ เนื้อหาที่ไม่สามารถจัดทำดัชนีได้จากเครื่องมือค้นหาเว็บมาตรฐาน การอัปเดตแอ็พพลิเคชันต้องใช้การดำเนินการของผู้ใช้
เวอร์ชันที่ตอบสนอง

ในช่วงเวลาที่มีการเชื่อมต่อกับหน้าจอและรูปแบบต่างๆกันนับร้อย ๆ ครั้งวิธีการออกแบบเว็บแบบโต้ตอบตอบสนองจะปรากฏเป็น "โซลูชันที่ง่าย" ภายใต้วัตถุประสงค์หลัก:

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

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

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

ไซต์ mediaqueri.es เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการค้นพบเว็บไซต์อื่น ๆ ที่ตอบสนองผ่านทางไดเรกทอรี
ตอบสนองปรับเปลี่ยนหรือของเหลว?

ในฝรั่งเศสและตามวิกิพีเดีย Responsive Web Design มีความหมายเหมือนกับ "adaptive web site"

ทางเทคนิคคงที่ของเหลว Adaptive และตอบสนองเว็บไซต์ควรจะโดดเด่น:

การออกแบบ "คงที่"

การออกแบบแบบคงที่ (หรือแบบคงที่) หมายถึงมิติข้อมูลคงที่ (เช่น 960px) โดยไม่คำนึงถึงพื้นผิวของหน้าจอ เว็บไซต์ส่วนใหญ่ถูกสร้างขึ้นบนพื้นฐานนี้ก่อนการมาถึงของ Responsive Web Design ในปี 2553

การออกแบบ "Fluid"

เว็บไซต์ของเหลวคือเว็บไซต์ที่ความกว้างของคอลัมน์ทั้งหมดจะแสดงเป็นหน่วยตัวแปร (เปอร์เซ็นต์, em, vw ฯลฯ ) และโดยปกติแล้วจะปรับขนาดของหน้าต่างโดยอัตโนมัติ ในระดับหนึ่ง

การออกแบบ "Adaptive"

การออกแบบ Adaptive คือการปรับปรุงการออกแบบแบบคงที่: หน่วยของความกว้างคงที่ แต่แตกต่างกันไปตามขนาดของหน้าจอซึ่งถูกตรวจจับผ่าน CSS3 Media Queries

การออกแบบดังกล่าวจะพิจารณาเฉพาะจุดตัดหลัก (320px, 480px, 768px, 1024px ฯลฯ ) และปรับแต่งเทมเพลตตามนั้น ในตอนท้ายเราพบว่าตัวเองมีเทมเพลตถาวรเป็นเทอร์มินัลเป็นจำนวนมาก

การออกแบบ "ตอบสนอง"

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


ตั้งแต่การออกแบบครั้งแรกในปี 2010 การออกแบบเว็บ Responsive Web ได้พัฒนาไปบ้างแล้ว ในปัจจุบันนี้ต้องการ - โดยทั่วไป - เทคโนโลยีและวิธีการต่อไปนี้:

กริดของเหลวซึ่งความกว้างขององค์ประกอบโครงสร้างจะปลดปล่อยออกจากหน่วยพิกเซล
ภาพสื่อและเนื้อหาที่มีความยืดหยุ่นที่ทำให้พวกเขาไม่ "ครอบงำ" ผู้ปกครองเมื่อถูก จำกัด
การปรับจอแสดงผลให้กับช่องมองภาพของเทอร์มินัล
CSS3 Media Queries เพื่อใช้กฎสไตล์ CSS ที่แตกต่างกันขึ้นอยู่กับขนาดอุปกรณ์การวางแนวหรืออัตราส่วน
อาจมีการดัดแปลงตามเงื่อนไขฝั่งไคลเอ็นต์ (การนำทางเมนู) โดยใช้ JavaScript หรือ jQuery
ปรัชญา "Mobile First" และ "Progressive Enrichment" ช่วยอำนวยความสะดวกในการเข้าถึงความเข้ากันได้และประสิทธิภาพของเพจที่ผลิต
บ่อยขึ้นและส่วนที่ตรวจพบและสร้างขึ้นทางฝั่งเซิร์ฟเวอร์ (RESS) อีกครั้งโดยเฉพาะอย่างยิ่งเพื่อเพิ่มความเร็วในการแสดงผลของส่วนประกอบหรือทรัพยากรบางอย่าง
ในที่สุดการออกแบบเว็บตอบสนองไม่ว่าง่าย!