Responsive คือการทำให้เว็บไซต์แปลงร่างได้

responsive คือ การทำให้เว็บไซต์แปลงร่างได้

Responsive คือ การทำให้เว็บไซต์แปลงร่างได้

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

RESPONSIVE WEB DESIGN

จึงเป็นเทคโนโลยีใหม่ในการทำเว็บไซต์ การจะทำมักใช้เทคนิคหลายๆ อย่าง ร่วมกัน เช่น Fluid Grid, Flexible Images และ CSS3 Media Queriesresponsive-mobile เริ่มต้นคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็น

FLEXIBLE IMAGES

ลำดับต่อมาต่อมาคือการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น

CSS3 MEDIA QUERIES

ท้ายสุดคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

responsive trend

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