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

การเปรียบเทียบสองแนวทางที่ต่างกันในการออกแบบเว็บหลายอุปกรณ์

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

ลองมาดูความแตกต่างระหว่างการออกแบบเว็บแบบโต้ตอบและแบบปรับตัวโดยเฉพาะการมุ่งเน้นไปที่ประเด็นสำคัญเหล่านี้:

คำนิยามบางประการ

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

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

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

ด้วยคำจำกัดความกว้าง ๆ เหล่านี้ในที่นี้เราจะมุ่งเน้นไปที่ประเด็นสำคัญ ๆ ที่เราสนใจ

ความง่ายในการพัฒนา

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

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

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

การควบคุมการออกแบบ

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

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

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

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

ความกว้างของการสนับสนุน

การออกแบบเว็บที่ตอบสนองต่อและปรับเปลี่ยนได้รับการสนับสนุนที่มีประสิทธิภาพโดยเฉพาะอย่างยิ่งในเบราว์เซอร์ที่ทันสมัย

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

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

มิตรภาพในอนาคต

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

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

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

ประสิทธิภาพ

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

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

นอกเหนือจากเค้าโครง

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

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

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

แนวทางใดที่ดีกว่า

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

ที่รู้จักกันทั่วไปว่า RESS (การออกแบบเว็บที่ตอบสนองกับ Server Side Components) วิธีนี้แสดงให้เห็นว่าจริงๆแล้วไม่มี "ขนาดใดที่เหมาะสมกับโซลูชันทั้งหมด" การออกแบบเว็บแบบโต้ตอบและการปรับตัวทั้งสองมีจุดแข็งและความท้าทายของพวกเขาดังนั้นคุณจำเป็นต้องพิจารณาว่า จะทำงานได้ดีที่สุดสำหรับโครงการเฉพาะของคุณหรือหากโซลูชันไฮบริดอาจเหมาะกับคุณมากที่สุด