การตอบสนอง HTML5 ของเว็บ

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

การตอบสนองของหน้าเว็บหมายถึงผลลัพธ์หรือการตอบสนองที่ได้รับจากหน้าเว็บหลังจากที่โหลดบนเบราว์เซอร์ตามสื่อ

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

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

เค้าโครงของเหลว

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

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

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

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

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

เลย์เอาต์ใน Responsive Web Designing (RWD) ทำได้โดยใช้พารามิเตอร์เลย์เอาต์แบบยืดหยุ่นหรือแบบของเหลว (เช่น ems และเปอร์เซ็นต์) แทนค่าจำกัด (เช่น พิกเซล จุด ฯลฯ)

เพื่อให้การตอบสนองในหน้าของคุณ โครงสร้างของหน้ามีการเปลี่ยนแปลงและแนวคิดพื้นฐานของ HTML5 มาในรูปภาพ หลักเกณฑ์พื้นฐานสำหรับการเขียนโค้ดใน HTML5 คือ:

• เนื้อหาอยู่ในไฟล์ HTML
• รูปลักษณ์และตำแหน่งอยู่ในไฟล์ CSS
• การตรวจสอบความถูกต้องไปในไฟล์ JavaScript

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

กลยุทธ์ RWD

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ใช้ Progressive Enhancement แทน Graceful Degradation แบบดั้งเดิม

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

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

• ถั่วลิสง:เนื้อหาที่มาร์กอัปด้วย html ที่มีความหมายสมบูรณ์
• เคลือบด้วย CSS เนื้อครีมเข้มข้น

เพิ่ม JS เป็นเปลือกลูกอมแข็ง

เฟรมเวิร์ก RWD

กรอบงาน HTML5 เป็นเพียงเทมเพลตที่สร้างไว้ล่วงหน้าพร้อมไฟล์ CSS &JS ที่นำกลับมาใช้ใหม่ได้ที่กำหนดไว้ล่วงหน้า และข้อความจำลองเป็นเนื้อหาในหน้า พวกเขาช่วยนักพัฒนารุ่นใหม่เริ่มต้นด้วยการออกแบบพื้นฐาน มีการกำหนดเลย์เอาต์และสร้างการออกแบบ

มีกรอบงานหลายแบบในตลาดเพื่อใช้การตอบสนอง ที่นิยมและง่ายต่อการใช้งานคือ – Twitter Bootstrap . หากต้องการเพิ่มลงในรายการ ได้แก่ Foundation, Skeleton, Boilerplate, Kickstart และอีกมากมาย กรอบงานเหล่านี้ส่วนใหญ่ใช้ฐานระบบกริดสำหรับการพัฒนาโครงร่างเริ่มต้น

Twitter Bootstrap ใช้แนวทางมือถือเป็นอันดับแรก ใช้งานฟรีและติดตั้งง่าย ไฟล์ CSS ทั่วไปเป็นส่วนหนึ่งของแพ็คเกจ เพื่อช่วยในการออกแบบองค์ประกอบและการควบคุมส่วนใหญ่บนหน้าเว็บ มีเลย์เอาต์ประเภทต่างๆ เพื่อช่วยในการสร้างหน้าเว็บ

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