การออกแบบที่ตอบสนอง: แนวปฏิบัติและข้อควรพิจารณาที่ดีที่สุด

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

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

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

คุณสามารถทำการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่ของ Google ได้ที่นี่

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

ดู eBay เวอร์ชันที่ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่เทียบกับสิ่งที่จะดูหาก ไม่ได้รับ การปรับให้เหมาะกับอุปกรณ์เคลื่อนที่ คุณจะพิจารณารุ่นที่ไม่ได้รับการปรับให้เหมาะสมหรือไม่?

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

แนวทางแรกสำหรับอุปกรณ์พกพาสำหรับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์

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

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

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

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

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

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

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

• 360x640 (มือถือเล็ก): 22.64%
• 1366x768 (แล็ปท็อปโดยเฉลี่ย): 11.98%
• 1920x1080 (เดสก์ท็อปขนาดใหญ่): 7.35%
• 375x667 (มือถือโดยเฉลี่ย): 5%
• 1440x900 (เดสก์ท็อปโดยเฉลี่ย): 3.17%
• 720x1280 (มือถือขนาดใหญ่): 2.74%

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

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

เว็บเบราว์เซอร์ใดที่ได้รับความนิยมในปัจจุบัน

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

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

นี่คือรายละเอียดทั่วโลกของส่วนแบ่งการตลาดของเว็บเบราว์เซอร์สำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อป

• โครเมียม: 55.04%
• ซาฟารี: 14.86%
• เบราว์เซอร์ UC: 8.69%
• ไฟร์ฟอกซ์: 5.72%
• โอเปร่า: 4.03%
• อินเทอร์เน็ตเอ็กซ์พลอเรอร์: 3.35%

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบที่ตอบสนอง

ขจัดแรงเสียดทาน

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

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

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

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

ออกแบบสำหรับนิ้วโป้ง

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

ลองมาดูตัวอย่างบางส่วน:

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

การอ่านที่แนะนำ: คู่มือพื้นฐานสำหรับการใช้งานมือถือ

ใช้ประโยชน์จากฮาร์ดแวร์ดั้งเดิมของอุปกรณ์มือถือ

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

ลองมาดูตัวอย่างบางส่วน:

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

ทำให้เลย์เอาต์เป็นแบบไหล/ปรับได้ตามค่าเริ่มต้น

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

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

โปรดคำนึงถึงเคล็ดลับเหล่านี้เมื่อออกแบบเลย์เอาต์แบบไหล/ปรับเปลี่ยนได้:

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

อย่าลืมเกี่ยวกับการวางแนวภูมิทัศน์

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

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

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

จำไว้ว่าการพิมพ์ก็ตอบสนองได้เช่นกัน

แม้ว่าโดยทั่วไปแล้ว นักออกแบบ UX จะใช้หน่วยพิกเซลในการออกแบบเว็บไซต์ แต่ในเว็บจริง จุดหนึ่งไม่จำเป็นต้องเท่ากับพิกเซลอีกต่อไป เนื่องจากอุปกรณ์ต่างๆ มีความละเอียดต่างกัน ตัวอย่างเช่น iPhone X มี 458 PPI (พิกเซลต่อนิ้ว) ดังนั้นเมื่อขนาดพิกเซลมีขนาดเล็กลง เราจึงสามารถบรรลุกราฟิกที่คมชัดกว่าในพื้นที่ทางกายภาพเดียวกัน (Apple เรียกเทคโนโลยีนี้ว่า "Retina" และ Android เรียกมันว่า “เอชดีพีไอ”)

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

การออกแบบเครื่องมือ Handoff เช่น Zeplin, Sympli, Marvel และ InVision สามารถช่วยให้นักออกแบบทำงานร่วมกับนักพัฒนาในเรื่องที่เป็นความรับผิดชอบร่วมกันได้ ในขณะที่นักออกแบบดำเนินการออกแบบ และนักพัฒนารันโค้ด โดยรวมเวิร์กโฟลว์การออกแบบผลิตภัณฑ์เป็นความพยายามของทีมที่ต้องมีการสื่อสารที่มั่นคง

เคล็ดลับการเพิ่มประสิทธิภาพการออกแบบที่ตอบสนองและแนวทางปฏิบัติที่ดีที่สุด

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

ขี้เกียจโหลดรูปภาพและวิดีโอที่ไม่สำคัญ

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

การโหลดแบบมีเงื่อนไข

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

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

รูปภาพที่ตอบสนอง

ดังที่กล่าวไว้ก่อนหน้านี้ อุปกรณ์บางตัวแสดงพิกเซลต่อนิ้วมากขึ้น ซึ่งอาจส่งผลให้ภาพเบลอได้หากไม่ได้ส่งออกด้วยความละเอียดที่ถูกต้อง ขึ้นอยู่กับความละเอียดของอุปกรณ์ บางภาพจะต้องมีขนาดสองเท่า (@2x) สามเท่า (@3x) และแม้แต่สี่เท่า (@4x) ขณะนี้เว็บเบราว์เซอร์รองรับองค์ประกอบ <picture> ซึ่งเลือกความละเอียดของภาพที่ถูกต้องตามอุปกรณ์

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

บทสรุป

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

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

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