การออกแบบที่ตอบสนอง (หรือเรียกอีกอย่างว่าการออกแบบที่ปรับเปลี่ยนได้) ซึ่งหน้าเว็บเดียวกันนำเสนอรูปแบบที่ดีที่สุดของสองเลย์เอาต์ที่สร้างขึ้นด้วยมือขึ้นอยู่กับความกว้างของเบราว์เซอร์เป็นตัวเลือกที่แข็งแกร่งที่สุดสำหรับเว็บไซต์ส่วนใหญ่ เพื่อดูว่าทำไมมันช่วยดูตัวเลือกทั้งหมดที่นักออกแบบเว็บมี:
แก้ไขเลย์เอาต์
ความกว้างของหน้าคงที่ซึ่งความกว้างของเนื้อหาไม่เหมือนกันโดยไม่คำนึงถึงความกว้างของเบราว์เซอร์นำเสนอรูปลักษณ์และความรู้สึกที่เหมือนกันทั่วทั้งอุปกรณ์และอาจต้องการการเข้ารหัสการคิดและการบำรุงรักษาน้อยกว่าการออกแบบที่ยืดหยุ่นมากขึ้น
บางคนรู้สึกว่าเลย์เอาต์ที่มีความกว้างคงที่เป็นสิ่งที่สืบทอดกันมาในยุคสมัยก่อนซึ่งผู้คนอยากได้ความสมบูรณ์แบบของพิกเซลและรูปลักษณ์ที่เหมือนกันในทุกเบราว์เซอร์ Andy Clarke ผู้แต่งHardboiled Web Designรู้สึกว่าวิธีคิดนี้ตายแล้ว:
"ในอดีตมันเป็นวิธีปฏิบัติมาตรฐานในการต่อสู้อย่างหนักเพื่อสร้างเว็บไซต์ที่ดูและทำงานเหมือนกันในทุกเบราว์เซอร์ - ไม่ว่ามันจะมีความสามารถอะไรก็ตามการทำเช่นนี้หมายถึงการประนีประนอมและหลีกเลี่ยงการใช้เทคโนโลยี
นี่มันแข็งไหม?
อย่าคิดแก้มตัวเอง นี่ไม่ใช่วิธีที่จะพัฒนาฝีมือของเราหรือสร้างเว็บที่ดีกว่า ความคิดแบบเก่าแบบนี้ทำให้เราย้อนกลับไป มันบังคับให้เราแก้ตัวเพราะไม่ทำในสิ่งที่เรารู้ว่าเป็นสิ่งที่ถูกต้อง สิ่งที่แย่ที่สุดที่เราในฐานะผู้ดูแลเว็บปัจจุบันสามารถทำได้คืออนุญาตให้ทุกสิ่ง จำกัด สิ่งที่เป็นไปได้ "
- Andy Clarke, การออกแบบเว็บ Hardboiled, p6 [รุ่น PDF มีให้ที่นี่ ]
ในขณะที่บางคนเห็นเลย์เอาต์คงที่เป็นความสูงของความเกียจคร้านการออกแบบความกว้างคงที่ยังคงถูกเลือกโดยทีมงานออกแบบที่ชาญฉลาดมาก ๆ ตัวอย่างเช่นAppleในปัจจุบันให้บริการเลย์เอาต์เดียวกันกับ iMacs เช่นเดียวกับไอแพดและไอโฟน เหตุใด บริษัท จึงต้องรับผิดชอบในการนำการท่องเว็บบนมือถือไปสู่ผู้คนจำนวนมากไม่เพิ่มประสิทธิภาพเว็บไซต์สำหรับอุปกรณ์มือถือ
เพราะมันไม่คิดว่ามันจะต้อง
แทนที่จะปรับเว็บไซต์เป็นหน้าจอขนาดเล็ก Apple สร้างฮาร์ดแวร์และซอฟต์แวร์เพื่อจัดการเว็บไซต์ในหน้าจอเหล่านั้นได้อย่างสะดวกสบาย Apple คิดว่าประสบการณ์ 'ปรับให้เหมาะกับมือถือ' จะได้รับการส่งมอบอย่างดีที่สุดในแอปพลิเคชันดั้งเดิมไม่ใช่ในหน้าต่างเบราว์เซอร์ นั่นเป็นเหตุผลที่ทำให้แอป Apple Storeแทนการให้บริการร้านค้าบนเว็บที่ปรับให้เหมาะกับมือถือ และนี่คือสาเหตุที่ทำให้ผู้เผยแพร่โฆษณานำเสนอแอปนิตยสารผ่านเว็บไซต์ที่ปรับแต่งเอง ปรัชญาการออกแบบเว็บของ Apple ในปัจจุบันมีความชัดเจน: รูปแบบเดียวที่จะปกครองมันทำงานได้ดี สำหรับทุกสิ่งมีแอพสำหรับสิ่งนั้น
ด้วยเหตุผลนี้เพียงอย่างเดียวบางคนอาจโต้แย้งว่าเค้าโครงแบบคงที่ยังคงมีความเกี่ยวข้องเช่นเคย พวกเขาบอกว่ารูปแบบของเหลวและการปรับตัวเป็นเพียงหยุดช่องว่างในขณะที่เรารอซอฟต์แวร์เบราว์เซอร์มือถือเพื่อปรับปรุงและ HTML และ JavaScript เพื่อพัฒนาและล่อลวงนักพัฒนาให้ห่างจากร้านค้าแอพที่เงียบ
ในความคิดของฉันแม้ว่าการเหน็บแนมแตะลาก - ลาก - ไปทางเว็บเป็นระยะเวลานานบนอุปกรณ์มือถือไม่สนุกเลยแม้แต่บน iPhone หากคุณเชื่อว่าประสบการณ์บนเว็บที่ดีที่สุดคือสิ่งที่ทำให้การอ่านการเผยแพร่และการโต้ตอบกับเว็บไซต์เป็นเรื่องสนุกแทนที่จะเป็นงานที่น่าเบื่อไม่ว่าคุณจะใช้อุปกรณ์ใดคุณต้องยอมรับในบางจุดที่ให้บริการเนื้อหาที่เหมาะกับแต่ละ ผู้เข้าชมมีมูลค่าการพิจารณา
เลย์เอาต์ของไหล
เลย์เอาต์ของไหลที่ความกว้างของหน้ากระดาษเต็มหน้าจอ (มักจะเป็นความกว้างสูงสุดที่กำหนด) รับประกันประสบการณ์ที่ดีขึ้นในแพลตฟอร์มที่แตกต่างกันโดยนำเสนอเนื้อหาที่ความกว้างที่เหมาะสมกับวิวพอร์ตมากขึ้น
ในทางปฏิบัติเลย์เอาต์ของไหลทำให้เกิดปัญหามากกว่าที่พวกเขาแก้ไขตามที่ระบุไว้โดย Cameron Moll ในสำนวนนี้
"... การออกแบบที่ลื่นไหลสามารถแก้ปัญหาเลย์เอาต์ได้ทุกอย่างเช่นเดียวกับคอมพิวเตอร์ทำให้สำนักงานไร้กระดาษเช่นที่พวกเขาทำไม่ได้"
- Cameron Moll "ไซต์ทั้งหมดควรเป็นของเหลวหรือไม่",กันยายน 2549
เมื่อคุณนำเลย์เอาต์มาใช้คุณจะยกเลิกการควบคุมการออกแบบและยอมรับว่าข้อความจะกรอกใหม่รูปภาพจะรีโฟลว์ความยาวบรรทัดจะแตกต่างกันอย่างไม่อาจคาดเดาได้ข้อความรูปภาพและองค์ประกอบการนำทางอาจทับกันด้วยความกว้างขนาดเล็ก รอบ ๆ เพื่อกัดคุณ
เลย์เอาต์บางคนอาจบอกว่าเป็นตัวเลือกที่ขี้เกียจ มันเป็นวิธีปืนลูกซองเพื่อการออกแบบเว็บที่ปรับตัวได้ แทนที่จะมอบประสบการณ์ที่ปรับแต่งให้เหมาะสมด้วยการออกแบบที่มีความกว้างคงที่สามหรือสี่ครั้งคุณจะมอบประสบการณ์ที่คาดเดาไม่ได้ด้วยความหวังว่ามันจะทำงานบนหน้าจอขนาดใหญ่และขนาดเล็กและหวังว่าจะเสียบช่องว่างทั้งหมด ในระหว่าง.
สิ่งนี้ไม่ได้ทำให้รูปแบบของของไหลไร้ประโยชน์ มีวิธีที่จะทำให้พวกเขาทำงาน 456 เบอเรียเซนต์บล็อกเช่น adopts รูปแบบของเหลวขึ้นอยู่กับความกว้างได้รับหลังจากที่มันใช้อย่างใดอย่างหนึ่งคงที่สำหรับสิ่งที่ใหญ่กว่า และที่ความกว้างน้อยมากแถบด้านข้างจะลดลงเพื่อใช้คอลัมน์เดียวที่ทำให้อ่านบนหน้าจอขนาดเล็กได้ง่ายขึ้น แต่นี่ไม่ใช่เลย์เอาต์ของเหลวอีกต่อไป มันเป็นสิ่งที่ดีกว่า มันคือการออกแบบที่ตอบสนอง
เค้าโครงตอบสนอง
เลย์เอาต์ 'responsive' หรือ 'adaptive' - ที่หน้าเว็บเดียวกันนำเสนอเลย์เอาท์ที่สร้างขึ้นสองรูปแบบขึ้นอยู่กับความกว้างของเบราว์เซอร์ของผู้เข้าชม - เป็นส่วนสำคัญของการเพิ่มประสิทธิภาพแบบก้าวหน้าซึ่งมีจุดมุ่งหมายเพื่อทำให้เว็บไซต์ดูดีที่สุด มันสามารถสำหรับผู้เข้าชมทุกคน
การเลือกที่จะปรับใช้รูปแบบการปรับตัวคือ 'การบริการลูกค้าที่ยอดเยี่ยม' ในคำพูดของ Aaron Gustafson ผู้เขียนAdaptive Web Design ถ้าเราออกแบบเว็บไซต์ของเราให้ดีเขาจะกล่าวว่าผู้เข้าชมควรได้รับประสบการณ์ที่ประดิษฐ์ขึ้นมาอย่างสมบูรณ์แบบโดยไม่ทราบว่าเรากำลังสร้างความยุ่งยากให้กับพวกเขา:
"ในฐานะนักออกแบบและนักพัฒนาเว็บไซต์เราควรพยายามทำตัวให้ดีเหมือนพนักงานเสิร์ฟที่ใส่ใจและไม่เกะกะ แต่มันไม่ใช่งานง่าย ๆ เช่นเดียวกับบริกรที่ไม่รู้ว่าลูกค้าที่เข้ามาในประตูจะต้องใช้บ่อยครั้งหรือไม่ เราไม่สามารถรู้ถึงความต้องการของผู้ใช้เฉพาะเมื่อพวกเขามาถึงไซต์ของเราได้ แต่เราต้องลุกขึ้นเพื่อตอบสนองความต้องการเหล่านั้นหากเราทำได้ดีจริงๆเราสามารถทำได้โดยไม่ต้องมีลูกค้าของเรา ทำการพิจารณาเป็นพิเศษสำหรับพวกเขาโชคดีที่มีผู้ใช้และวิธีการที่มุ่งเน้นเนื้อหาที่มีการปรับปรุงอย่างต่อเนื่อง (ซึ่งแตกต่างจากวิธีเบราว์เซอร์ใหม่ล่าสุดที่ลดทอนความสง่างาม)
- Aaron Gustafson, Adaptive Web Design, p12 [ฉบับ PDF มีให้ที่นี่ ]
การตระหนักว่างานของเราในฐานะนักออกแบบเว็บไซต์คือการปรับตัวให้เข้ากับผู้เยี่ยมชมของเราและไม่บังคับให้พวกเขาปรับตัวเข้ากับเรา - อย่างที่แอปเปิลอาจทำให้เราเชื่อ ในความคิดของฉันยุคฟื้นฟูศิลปวิทยาแปลก ๆ : เราเสร็จสิ้นการเก็บเชอร์รี่เพื่อเลือกนิสัยที่ดีจากการออกแบบสิ่งพิมพ์มานานหลายปี ตอนนี้เราต้องทิ้งกุญแจมือที่กำหนดโดยการทำงานภายในพื้นที่ที่กำหนดไว้ล่วงหน้าในหน้าพิมพ์
เมื่อเราปฏิบัติต่อเบราว์เซอร์เป็นผืนผ้าใบคงที่ในตอนนี้เรายอมรับว่าไม่มีผืนผ้าใบที่กำหนดอยู่เลยและนี่ก็ชัดเจนยิ่งขึ้นจากการผสมผสานขนาดหน้าจอขนาดใหญ่ที่คุณไม่ต้องสงสัยเลยที่จะเห็นในสถิติผู้เยี่ยมชมของคุณ . แทนที่จะปฏิบัติต่ออุปกรณ์ใหม่แต่ละชิ้นเป็น 'ขนาดหน้ากระดาษ' ที่ไม่ซ้ำกันเพื่อกำหนดเป้าหมาย (และต้องระดมพลเมื่ออุปกรณ์ใหม่ออกมา) เราสามารถปฏิบัติตามอนุสัญญาที่พิสูจน์อนาคตได้มากขึ้น
เราสามารถคิดในแง่ของวงดนตรี - 'ใหญ่', 'กลาง' และ 'เล็ก' - แทนที่จะคิดถึงโทรศัพท์และแท็บเล็ตที่เฉพาะเจาะจงจากนั้นออกแบบเว็บไซต์ให้ดูดีที่สุดในวงนั้น อุปกรณ์ใหม่อะไรก็ตามที่ออกมาพวกมันจะรวมกันเป็นหนึ่งวงหรืออีกวงและแม้ว่าพวกเขาจะอยู่ติดกับขอบระหว่างสองแบนด์ - เรายังคงสามารถควบคุมประสบการณ์ได้มากกว่าที่เราใช้ฟิกซ์เจอร์หรือฟลูอิด แบบ
ในการออกแบบเว็บไซต์ที่ตอบสนอง Ethan Marcotte เสนอการเรียกร้องนี้:
"เราต้องปล่อย
แทนที่จะสร้างการออกแบบที่ไม่ได้เชื่อมต่อแต่ละรายการได้รับการปรับแต่งให้เข้ากับอุปกรณ์หรือเบราว์เซอร์โดยเฉพาะเราควรปฏิบัติต่อพวกเขาเป็นประสบการณ์ที่เหมือนกัน กล่าวอีกนัยหนึ่งเราสามารถสร้างไซต์ที่ไม่เพียงมีความยืดหยุ่นมากขึ้น แต่สามารถปรับให้เข้ากับสื่อที่แสดงผลได้
ในระยะสั้นเราต้องฝึก
การออกแบบเว็บไซต์ที่ตอบสนอง เราสามารถยอมรับความยืดหยุ่นที่มีอยู่ในเว็บได้โดยไม่ต้องสูญเสียการควบคุมที่เราต้องการในฐานะนักออกแบบ ทั้งหมดนี้เกิดจากการฝังเทคโนโลยีที่เป็นมาตรฐานในงานของเราและโดยการเปลี่ยนแปลงเล็กน้อยในปรัชญาของเราที่มีต่อการออกแบบออนไลน์ "
- Ethan Marcotte, ออกแบบเว็บไซต์ที่ตอบสนอง, p8 [ มีรุ่น PDF ให้บริการที่นี่ ]
แต่คุณใช้วงไหน Ethan Marcotte แนะนำสามข้อต่อไปนี้ในResponsive Web Design (หากต้องการเรียนรู้สิ่งที่พวกเขาทำและเข้าใจคำเตือนคุณอาจต้องการหยิบหนังสือเล่มนี้ )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
นอกจากนี้ยังมีเฟรมเวิร์ก CSS หลากหลายที่ออกแบบมาเพื่อช่วยสร้างเว็บไซต์ที่ปรับเปลี่ยนได้รวมถึงLess Frameworkของ Joni Korpi
แทนที่จะใช้จุดพักตามอำเภอใจอาจเป็นการดีกว่าที่จะให้การออกแบบเว็บไซต์ของคุณกำหนดวงดนตรี ลดความกว้างหน้าจอของเบราว์เซอร์และเมื่อใดก็ตามที่การออกแบบของคุณหยุดพักความกว้างนั้นควรเป็นหนึ่งใน“ จุดพัก” ของคุณ ลดความกว้างและเพิ่มจุดพักด้วยคิวรี่สื่อ CSS จนกว่าการออกแบบของคุณจะดูดีในทุกความกว้าง ด้วยวิธีนี้การออกแบบของคุณจะดูดีในอุปกรณ์ทุกชิ้นแทนที่จะเป็นเพียงแค่ขนาดหน้าจอเพียงไม่กี่หน้าเท่านั้นที่คุณได้ลองใช้ หากคุณใช้ Chrome การเปิดใช้งานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (ดู> นักพัฒนา> เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) และการลดความกว้างของเบราว์เซอร์จะช่วยให้คุณได้อ่านค่าความกว้างปัจจุบันที่เป็นประโยชน์ที่มุมด้านบนขวาที่คุณสามารถใช้
อีกวิธีที่ได้รับความนิยมในการพิจารณาก็คือMobile First responsive design ซึ่งสไตล์ชีทหลักของคุณจัดการสไตล์สำหรับอุปกรณ์ที่เล็กที่สุดและการสืบค้นสื่อจัดการกับความกว้างของหน้าจอที่ใหญ่กว่าแทนที่จะเป็นวิธีอื่น สิ่งนี้จะส่งผลให้ประสิทธิภาพการทำงานเร็วขึ้นบนอุปกรณ์มือถือโดยเฉพาะอย่างยิ่งถ้าคุณใช้ภาพพื้นหลัง CSS จำนวนมาก (คุณต้องการสร้างเบรกพอยต์ในลักษณะเดียวกัน - เพียงเริ่มต้นด้วยความกว้างของเบราว์เซอร์ที่น้อยที่สุดและทำงานได้มากขึ้นและอย่าลืมทดสอบอุปกรณ์จริง ๆ ให้มากที่สุดเท่าที่จะทำได้ - พิจารณาการเยี่ยมชมอุปกรณ์เปิด แล็บ )
ในระยะสั้นเมื่อทำได้ดีการออกแบบแบบปรับตัวได้นั้นเป็นความสุขที่ได้เห็นและสัมผัสทั้งในฐานะนักออกแบบเว็บไซต์และผู้ใช้เว็บสวนในชุมชน ใช้เว็บไซต์ของ บริษัทสถาปนิกข้อมูลของญี่ปุ่นเช่น:
บน iPhone
บน iPad
บน iMac
เช่นเดียวกับที่แอรอนกุสตาฟสันคาดการณ์ไว้คุณไม่รู้เลยว่าคุณได้รับการตอบสนองจนกว่าคุณจะเห็นการออกแบบในหน้าเดียวกัน
ประสบการณ์แทบจะไม่น่าพอใจมากขึ้นในแต่ละกรณี คุณไม่ต้องคิดหรือโต้ตอบกับหน้าเพื่อเริ่มอ่านเนื้อหาใช้เวลาสงสัยว่าทำไมมันดูแปลก ๆ บนหน้าจอของคุณหรือซูมเข้าเพื่อดูองค์ประกอบการนำทางก่อนที่คุณจะสามารถแตะพวกเขาเพราะมีคนแก้ไขปัญหาเหล่านั้นแล้วสำหรับ คุณ. และนั่นคือเหตุผลที่การออกแบบที่ตอบสนองได้ดีกว่าตัวเลือกอื่น ๆ เสมอ