Responsive Web Design
Responsive Web Design คือ การออกแบบ Web Page ให้แสดงผลออกมาให้เหมาะสมกับขนาดหน้าจออุปกรณ์ซึ่งปัจจุบันมีขนาดที่แตกต่างกันออกไปเช่น คอมพิวเตอร์ มือถือ แท็บเล็ต เครื่องเล่นเกมพกพา เป็นต้นซึ่งปัจจุบัน Browser ได้พัฒนาให้สามารถใช้ได้กับหลากหลายอุปกรณ์ แต่ที่เราเจอกันจะพบปัญหาการแสดงผลหน้าเว็บที่ไม่ตรงกับอุปกรณ์เช่น ขนาดตัวหนังสือเล็กไป, ปุ่มต่างๆก็เล็กลง หรือแม้กระทั่งการแสดงผลข้อมูลไม่ครบถ้วน เป็นต้น
หลักการของ Responsive Web Design
การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries
เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น
ต่อมาคือการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น
สุดท้ายคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
RESPONSIVE WEB DESIGN ทำอย่างไร
เวลาพูดถึง Responsive Web Design เนี่ย เราพูดถึง เทคนิคต่าง ๆ ที่ช่วยให้หน้าเว็บปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ ครับ
เพราะฉะนั้นมันจะแยกย่อยเป็นเทคนิคสำหรับการแก้ปัญหาต่าง ๆ เช่น เทคนิคแสดงรูปแบบ Low Resolution บนมือถือ (เพื่อให้โหลดเร็วขึ้น เพราะอินเตอร์เน็ตมือถือ เช่น EDGE จะช้ากว่าเน็ตในคอม) หรือ เทคนิคซ่อนเนื้อหาบางส่วนในเว็บบนมือถือ
วันนี้จะมาแนะนำเทคนิคหลักของ Responsive Web Design ซึ่งถ้าเข้าใจเรื่องนี้จะสามารถนำไปทำ Responsive Web Design ได้ 80% แล้วครับ (อีก 20% คือเก็บรายละเอียดอื่น ๆ ที่อาจต้องใช้เทคนิคอื่นมาช่วย) นั่นก็คือ Media Query !!
ไม่มีความคิดเห็น:
แสดงความคิดเห็น