10 เมษายน 2563 Responsive Web Design
ปัญหาและแนวทางแก้ไข ในการออกแบบและสร้าง RESPONSIVE WEB

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

 

หลักการของ Responsive Web Design


1. การทำ Fluid Grid คือการออกแบบ Grid ให้เป็นแบบ Relative นั่นคือการไม่กำหนด Grid ให้มีขนาดตายตัว แต่จะกำหนดความออกเป็นแบบ % เพื่อให้สัมพันธ์กับสิ่งต่างๆที่ใช้งาน

2.การทำ Flexible Images คือการกำหนดขนาดของรูปภาพต่างๆ ให้สามารถรองรับกับขนาดของหน้าจอแสดงผลของอุปกรณ์ที่เข้าใช้งาน
3.การใช้ CSS3 Media Queries คือการเขียนโค้ดเพื่อกำหนด Style Sheet สำหรับทั้งพื้นฐานและหน้าจอขนาดต่างๆ


Responsive Web Design แก้ปัญหายังไง

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

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

 


ที่มา : sits39