เมื่อการออกแบบที่ตอบสนองไม่ถูกต้อง (และวิธีแก้ไข)

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

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

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

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

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

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

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

1. “ Mobile First” เป็นเรื่องปัญญาอ่อน

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

แนวทางที่ดีที่สุดคือการออกแบบโครงร่างที่แตกต่างกันอย่างน้อยสาม (และสูงสุด 11) รูปแบบ ขั้นต่ำที่คุณสามารถพิจารณา ได้แก่ :

  • เดสก์ทอป
  • ภูมิทัศน์มือถือ
  • มือถือแนวตั้ง

หากคุณต้องการละเอียดให้ละเอียดยิ่งขึ้นคุณควรพิจารณา:

  • แท็บเล็ตแนวนอน
  • แท็บเล็ตแนวตั้ง

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

  • เดสก์ท็อปขนาดใหญ่
  • เดสก์ท็อปสามัญ
  • แท็บเล็ตแนวนอนขนาดใหญ่
  • แท็บเล็ตภาพบุคคลขนาดใหญ่
  • แท็บเล็ตแนวนอนขนาดเล็ก
  • แท็บเล็ตภาพบุคคลขนาดเล็ก
  • แนวนอนขนาดใหญ่มือถือ
  • มือถือแนวตั้งขนาดใหญ่
  • ภูมิทัศน์ขนาดเล็กมือถือ
  • มือถือแนวตั้งขนาดเล็ก
  • เล็ก / สวมใส่สบาย

ด้วยความเป็นไปได้ที่แตกต่างกันมากมายจึงเห็นได้ชัดว่าทำไมแนวทาง "หนึ่งขนาดเหมาะกับทุกคน" ที่ขี้เกียจจึงน่าดึงดูด แต่ก็เห็นได้ชัดว่าเหตุใดจึงมีหลายวิธีที่จะทำลายมัน

2. เชื่องส่วนท้ายของหน้าเหยียดยาว

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

3. ยอมรับนิสัยใจคอเล็กน้อยในอุปกรณ์ปิดบัง

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

4. คุณสามารถซ่อนเนื้อหาที่ไม่เกี่ยวข้องกับข้อความหลัก

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

นอกจากนี้สิ่งต่าง ๆ เช่นรูปภาพที่ตกแต่งอย่างหมดจดหรือสวยงาม แต่ไม่ได้มีส่วนสำคัญต่อข้อความหลักคือผู้สมัครเพื่อลดหรือซ่อนตัวทั้งหมด

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

5. คุณสามารถใช้พื้นหลังทางเลือก

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

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

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

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

6. ควบคุมลำดับการยุบด้วยตนเอง (หรือหลีกเลี่ยงการอ้างอิงเชิงพื้นที่ภายในเนื้อหา)

นี่เป็นปัญหาที่ซับซ้อน ลำดับการยุบของไซต์ขึ้นอยู่กับลำดับการซ้อน div คุณต้องเรียง div ของคุณตามลำดับที่ถูกต้องเพื่อที่จะยุบตามลำดับที่ถูกต้อง

หนึ่งในปัญหาที่มาจากการสร้างเว็บไซต์ WYSIWYG แบบ drag-n-drop คือคุณไม่สามารถบอกได้ว่าปกติแล้วกองการสั่งซื้อที่กองซ้อนได้รับและในกรณีที่หายากมากที่คุณสามารถทำได้การทำงานหนักของคุณจะถูกยกเลิกทุกครั้ง คุณทำการแก้ไขที่เล็กที่สุดและคุณจะต้องกลับไปและแฮ็กซอร์สโค้ดอีกครั้ง

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

7. คุณอาจต้องการขนาดตัวอักษรที่แตกต่างกันสำหรับรูปแบบที่แตกต่างกัน

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

8. การใช้รูปภาพตอบสนองดีที่สุด

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

มารยาทภาพส่วนหัวของ

บ็อกดานแรนเซีย

บ็อกแดนเป็นสมาชิกผู้ก่อตั้งของนิตยสาร Inspired Mag ซึ่งสะสมประสบการณ์เกือบ 6 ปีในช่วงเวลานี้ ในเวลาว่างเขาชอบเรียนดนตรีคลาสสิกและสำรวจทัศนศิลป์ เขาค่อนข้างหมกมุ่นอยู่กับ fixies เช่นกัน เขาเป็นเจ้าของ 5 คนแล้ว