Responsive Web Design
Responsive Web Design คือ
การออกแบบ Web Page ให้แสดงผลออกมาให้เหมาะสมกับขนาดหน้าจออุปกรณ์ซึ่งปัจจุบันมีขนาดที่แตกต่างกันออกไป
ซึ่งปัจจุบัน Browser ได้พัฒนาให้สามารถใช้ได้กับหลากหลายอุปกรณ์
แต่ที่เราเจอกันจะพบปัญหาการแสดงผลหน้าเว็บที่ไม่ตรงกับอุปกรณ์
หลักการของ Responsive
Web Design
การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง
ร่วมกัน ไม่ว่าจะเป็น Fluid
Grid, Flexible Images และ CSS3 Media
Queries
1. Fluid Grid คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ
2. Flexible Images คือการกำหนดขนาดของ Images ต่างๆ
ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก
เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม
3. CSS3 Media Queries สามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่
จะเขียน style sheets พื้นฐานเอาไว้
ซึ่งจะไม่ขึ้นอยู่กับ Devices ใดๆ
หลังจากนั้นให้เราเขียน style
sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด
เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด การเขียนแบบนี้จะช่วยลดความซ้ำซ้อนของโค้ด
และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
ข้อเสียของ Responsive
Web Design
Responsive Web Design มีข้อเสียอยู่บ้าง
เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก
ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา
แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image
Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ
ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น