Responsive Template คืออะไร

 

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

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

     ในการทำ Responsive Website นั้นผู้ที่ออกแบบเว็บไซต์ จะต้องทำมีอยู่ 2 ส่วนคือ การกำหนด HTML และ การกำหนด CSS ดังต่อไปนี้

• กำหนด HTML เพื่อให้แสดงผล ตามขนาดของหน้าจออุปกรณ์
• กำหนด CSS ที่เรียกว่า “Media querier”

 

การทำ Responsive Web Design ที่ดีมี 6 ขั้นตอนได้แก่

• ออกแบบเว็บเพจให้ดูเรียบง่าย
• เริ่มออกแบบที่หน้าจอเล็กสุดก่อนเสมอ
• กำหนดขนาดแบบ Relative โดยการกำหนด layout ต่างๆ ให้ความกว้างหน่วยเป็นเปอร์เซ็นต์ นั่นเอง
• หา Breakpoints แล้วเขียน Media Queries
• กำหนด Viewport Meta Tag
• ขั้นตอนสุดท้ายคือการเช็คกับ Devices จริงๆ

 

ฟรี Responsive เทมเพลต เว็บไซต์