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

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

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

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

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

ข้อบกพร่องของการออกแบบแบบปรับได้นั้นระบุได้ง่ายโดยการทดสอบเบื้องต้นของร้านค้าออนไลน์ แต่ผู้ขายจำนวนมากไม่มีทรัพยากรสำหรับสิ่งนี้ เพื่อลดความเสี่ยงในการสูญเสียเงิน ให้ทดสอบเส้นทางผู้ใช้หลักทั่วไซต์ในเบราว์เซอร์หลัก - Chrome, IE, Firefox, Safari และ ระบบปฏิบัติการ– Windows, Mac OS, Android, IOS บนอุปกรณ์มือถือยอดนิยม ทดสอบทุกครั้งที่คุณทำการเปลี่ยนแปลง บริการต่างๆ เช่น BrowserStack หรือ Viewport Resizer สามารถช่วยลดเวลาการทดสอบลงได้หลายชั่วโมง

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

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

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

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

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

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

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

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

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

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

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

เพื่อจุดประสงค์ในการทดสอบ ฉันจึงใช้เว็บไซต์แรกที่ตอบสนองอย่างแท้จริงที่ฉันสร้างขึ้น นั่นก็คือ PyjamasOnYourFeet.com มันใช้เทมเพลต Brownie HTML5 ซึ่งมอบให้กับชุมชนนักพัฒนาบน EGrappler อย่างไม่เห็นแก่ตัวและเสรี

ฉันตอบสนองหรือไม่? – ดูตัวอย่างเว็บไซต์ของคุณได้ทันทีที่ง่ายดายโดยสมบูรณ์ในแง่ของลักษณะที่จะปรากฏบนสี่ อุปกรณ์ที่แตกต่างกัน- ทั้งสี่เป็น iOS และนักพัฒนาอธิบายตัวเลือกของเขาบนเว็บไซต์ มันไม่ได้ให้การควบคุมหรือตัวเลือกใด ๆ เลย มีเพียงจอแสดงผลที่เรียบง่ายและสวยงามเท่านั้น ดูขนาดหน้าต่าง:

เดสก์ท็อป - 1600 x 992px ลดลงตามขนาด (0.3181)

แล็ปท็อป - 1280 x 802px ลดขนาดลง (0.277)

แท็บเล็ต - 768 x 1024px ลดลงตามขนาด (0.219)

อุปกรณ์เคลื่อนที่ - 320 x 480px ลดลงตามขนาด (0.219)

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

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

แมคบุค - 1280 x 800

ไอแพด ( แนวตั้ง) - 768 x 1024

iPad (แนวนอน) - 1024 x 768

Kindle (แนวตั้ง) - 600 x 1024

Kindle (แนวนอน) - 1024 x 600

iPhone (แนวตั้ง) - 320 x 480

iPhone (แนวนอน) - 480 x 320

กาแล็กซี (แนวตั้ง) - 240 x 320

กาแล็กซี(แนวนอน) - 320 x 240

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

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

มีหน้าต่างการดูที่แตกต่างกันสิบสามหน้าต่างจากจอภาพขนาดใหญ่ คอมพิวเตอร์ตั้งโต๊ะไปยังสิ่งที่เรียกว่า “เส็งเคร็ง Android” (พูดตามตรง พวกเขามีตัวเลือกที่เรียกว่า “ แอนดรอยด์ดีกว่า"(แอนดรอยด์สวยกว่า)

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

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

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

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

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

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

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

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

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

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

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

และฉันอยากจะบอกว่าไซต์ที่มีมันสะดวกกว่าในการอ่านบนอุปกรณ์ดังกล่าวมากกว่าที่ไม่มีมัน

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

ไปกันเลย

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

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

บริการที่ยอดเยี่ยมมากที่จะตรวจสอบเว็บไซต์ใด ๆ ฉันชอบการออกแบบและฟังก์ชันการทำงานมาก

บริการที่สวยงามและใช้งานได้ดีมาก คุณสามารถตรวจสอบได้ว่าไซต์จะดูเป็นอย่างไรบนทีวี :-)

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

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

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

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

เค้าโครงมี 4 ประเภท:

มาดูรายละเอียดทุกประเภทกันดีกว่า

1. เค้าโครงคงที่

บล็อกไม่เปลี่ยนความกว้าง บนจอภาพความละเอียดต่ำ แถบเลื่อนแนวนอนจะปรากฏขึ้น

#temnyi, #svetlyi ( width: 440px; )

2. โครงยาง

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

#temnyi, #svetlyi ( ความกว้าง: 50%; )

3. รูปแบบที่ปรับเปลี่ยนได้

ดำเนินการโดยใช้ @media หรือสคริปต์ ปรับแต่งสำหรับอุปกรณ์ที่รู้จักโดยเฉพาะ (320, 768, 1024 ฯลฯ) การเปลี่ยนแปลงใดๆ จะเกิดขึ้นกับการกระตุก หลังจากถึงระดับใดระดับหนึ่งที่กำหนด เหมาะสำหรับ

#temnyi, #svetlyi ( width: 430px; ) @media (ความกว้างสูงสุด: 1220px) ( #temnyi, #svetlyi ( width: 380px; ) ) @media (ความกว้างสูงสุด: 1120px) ( #temnyi, #svetlyi ( ความกว้าง : 325px; ) ) @media (ความกว้างสูงสุด: 680px) ( #temnyi, #svetlyi ( ความกว้าง: 200px; ) )

4. รูปแบบที่ตอบสนอง

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

#temnyi, #svetlyi ( width: 50%; ) @media (ความกว้างสูงสุด: 1006px) ( #temnyi, #svetlyi ( width: 100%; ) )

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

สคริปต์เค้าโครงแบบปรับเปลี่ยนได้:

/* มาสร้างตัวแปรที่คุณสามารถใส่คลาส monogest เข้าไปได้ เพื่อความสะดวกในการใช้งานในโค้ด< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });

นั่นคือจะตรวจพบพวกมันเพียงครั้งเดียวเท่านั้น ไม่ใช่ก่อนแต่ละตัวอย่าง! นี่เป็นคุณสมบัติที่มีประโยชน์ */ var my = ( window: $(window) );

/*ที่จริงแล้วฟังก์ชันนั้นเอง*/ $(window).resize(function () ( /*ตัวแปรที่กำหนดความกว้างของหน้าต่างและนำไปไว้ในตัวแปร width*/ var width = my.window.width( ); /*เงื่อนไขการแปลงหน้าต่าง เช่น เงื่อนไขที่จะดำเนินการเมื่อความกว้างของหน้าต่างถึงขนาดที่กำหนด */ if(my.window.width() แค่นั้นแหละ. หากคุณมีคำถามใด ๆ เขียนความคิดเห็นไปที่ปัจจุบันนี้ไม่จำเป็นต้องโน้มน้าวใครให้เชื่ออีกต่อไป

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

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

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

อินเทอร์เน็ตเบราว์เซอร์ยอดนิยม (เบราว์เซอร์) มอซซิลา ไฟร์ฟอกซ์พร้อมเครื่องมือในตัวสำหรับตรวจสอบการออกแบบเว็บไซต์ว่าเหมาะสมกับการแสดงผลบนอุปกรณ์เคลื่อนที่ หากต้องการใช้งาน ให้ไปที่ "เมนู" - "การพัฒนา" - "การออกแบบที่ปรับเปลี่ยนได้" หรือเพียงแค่กดสามปุ่มบนคีย์บอร์ดของคุณพร้อมกัน ++[M]

คุณควรเห็นสิ่งนี้:

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

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

หลังจากนั้นให้คลิกไอคอนการออกแบบที่ตอบสนอง (หรือกด ++[M] บนแป้นพิมพ์พร้อมกัน):

ตรงกลางหน้าจอ คุณจะเห็นว่าไซต์ของคุณจะปรากฏบนหน้าจออุปกรณ์มือถืออย่างไร:

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

เพื่อตรวจสอบความสามารถในการปรับตัวโดยใช้ บริการของกูเกิลไปที่ที่อยู่ต่อไปนี้แล้วป้อนชื่อเว็บไซต์ของคุณ: https://www.google.com/webmasters/tools/mobile-friendly/.

นี่คือผลลัพธ์ของการตรวจสอบบล็อกของฉัน:

ด้วย Yandex จะซับซ้อนกว่าเล็กน้อยในการตรวจสอบ คุณต้องลงทะเบียนกับบริการ Yandex.Webmaster และใช้อินเทอร์เฟซเวอร์ชันเบต้า:

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

ฉันจะเริ่มต้นอีกครั้งกับ Google ซึ่งมีบริการของตัวเองสำหรับการสาธิตความสามารถในการปรับตัว: http://design.google.com/resizer/#

บริการที่ดีประการที่สองคือhttp://quirktools.com/screenfly/ มันจะแสดงให้คุณเห็นว่าเว็บไซต์ของคุณจะดูเป็นอย่างไรแม้แต่ในทีวี!

เพื่อไม่ให้ "ผู้ผลิตในประเทศ" ขุ่นเคือง ฉันจะยกตัวอย่างไซต์อื่น: http://symby.ru/adaptest/ ในหนึ่งหน้า คุณจะเห็นหลายมุมมองที่มีความละเอียดหน้าจอต่างกัน

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

Google ก้าวนำหน้าเช่นเคย: https://developers.google.com/speed/pagespeed/insights/ บริการนี้จะแสดงให้คุณเห็นว่าไซต์มีลักษณะอย่างไรบนหน้าจอโทรศัพท์ และให้คำแนะนำในการเพิ่มประสิทธิภาพโค้ดเพื่อเพิ่มความเร็วในการโหลดบนอุปกรณ์เคลื่อนที่

โดยสรุป ฉันจะยกตัวอย่างบริการที่ไม่เพียงแสดงว่าไซต์มีลักษณะอย่างไรบนอุปกรณ์พกพา แต่ยังแสดงความเร็วด้วย: http://www.webpagetest.org/

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