Responsive website
คือ การใช้ โค๊ด html ร่วมกับ หน้าเว็บไซต์เพื่อทีแก้ปัญหาการเขียนเว็บไซต์ที่ซ้ำซ้อนและยังต้อง
ใช้โค๊ดหลายๆ ชุดเพื่อมารองรับการใช้งานบนหน้าจอที่มีขนาดแตกต่างกันไป และ ยังเป็นการช่วยลดต้นทุนจากเว็บไซต์สมัยก่อนที่จะต้องมีการใช้ css หรือ ส่วนประกอบต่างๆที่เกี่ยวข้อง เพื่อมาออกแบบหน้าตาของเว็บไซต์โดยมีการใช้ชุดโค๊ดที่แตกต่างกันไป ในปัจจุบันได้มีการพัฒนาเทคโนโลยีเกี่ยวกับการเขียนเว็บไซต์ใหม่จึงทำให้เกิดเว็บไซต์ที่รองรับกับอุปกรณ์ที่งาน
โดยใช้ชื่อเรียกว่า "responsive" ที่จะง่ายต่อการเปลี่ยนแปลงโค๊ดของเว็บไซต์ และลดเวลาในการทำงานอีกด้วย
ดังนั้นจุดประสงค์ของ responsive website ก็ คือ การสร้างเว็บไซต์ที่มุ่งเน้นให้ผู้ใช้สามารถเข้าถึงเว็บไซต์ของเรา ตัวอย่างการแสดงผลแบบ Responsive web design
หลักการของ Responsive Web Design
ข้อเสียของ 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 มีข้อเสียอยู่บ้าง เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณาแต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น
สรุปประโยชน์ของการทำเว็บไซต์ Responsive
- Responsive WebDesign ได้รับการรับรองจาก google ช่วยให้ติด index google ได้ทั้ง desktop และ mobile ในหน้าเดียวการทำ Responsiveเพียงแค่ไซต์เดียวก็รองรับทุกอุปกรณ์ และไม่ต้องทำหลายๆหน้า ช่วยให้ไม่หนักเซิฟเวอร์ - ประหยัดค่าใช้จ่ายในการจัดทำ โดยที่เราไม่ต้องทำหน้าต่างแยกกันระหว่าง mobile และ desktopนอกจากนี้ยังประหยัดเวลาลดระยะเวลาในการทำงาน- รองรับผู้ใช้ทุกอุปกรณ์ เพราะสุดท้ายผู้คนจากหลายอุปกรณ์ก็มีความต้องการเดียวกัน- เว็บไซต์ไม่ต้อง redirect หน้าไปหาหน้า mobile ให้เสียเวลา ช่วยให้เซิฟเวอร์ไม่ทำงานหนักและไม่วุ่นวาย- Googlebot-Mobile จะสนใจกับไซต์ที่รองรับอุปกรณ์ประเภท mobile ดังนั้นมั่นใจได้เลยว่า Googlebot-mobile จะเข้ามาเก็บข้อมูลในเว็บไซต์ของคุณอย่างแน่นอน - ช่วยทำให้การค้นหาผ่าน mobile เป็นไปได้ง่ายมากยิ่งขึ้น- ในด้านความสวยงามของการแสงผล ใช้ภาษา HTML5 และ CSS3 ทำให้ลดข้อจำกัดในการแสดงผล
ไม่มีความคิดเห็น:
แสดงความคิดเห็น