Responsive Web Design
ความหมาย และ ความสำคัญ ของ Responsive Web
Design
ปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว
และมีแนวโน้มที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก
ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล (screen
size and resolution) แนวของการแสดงผล (orientation) หรือแม้แต่ระบบปฏิบัติการ (OS)
ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version
กับ Mobile version เพื่อให้เว็บไซต์ของเรา
สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ
ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา
Responsive Web Design คือ
การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม
บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน
เพื่อแก้ปัญหาดังกล่าว
หลักการของ 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
1. Responsive Web Design ได้รับการรับรองจาก
google ช่วยให้ติด index google ได้ทั้ง desktop และ mobile ในหน้าเดียว
2. การทำ Responsive เพียงแค่ไซต์เดียวก็รองรับทุกอุปกรณ์
และไม่ต้องทำหลายๆหน้า ช่วยให้ไม่หนักเซิฟเวอร์
3. ประหยัดค่าใช้จ่ายในการจัดทำ
โดยที่เราไม่ต้องทำหน้าต่างแยกกันระหว่าง mobile และ desktop
4. นอกจากนี้ยังประหยัดเวลาลดระยะเวลาในการทำงานหลายๆหน้า
โดยที่เราก็วางแผนครั้งเดียว และทำเพียงแค่หน้าเดียวเท่านั้นเอง
5. รวดเร็วในการดูแล
จัดการเว็บไซต์ ไม่ยุ่งยาก และไม่ต้องไปเปลี่ยนแปลงเว็บไซต์หลายๆหน้า
6. รองรับผู้ใช้ทุกอุปกรณ์
เพราะสุดท้ายผู้คนจากหลายอุปกรณ์ก็มีความต้องการเดียวกัน
7. เว็บไซต์ไม่ต้อง
redirect หน้าไปหาหน้า mobile
ให้เสียเวลา
ช่วยให้เซิฟเวอร์ไม่ทำงานหนักและไม่วุ่นวาย
8. Googlebot-Mobile จะสนใจกับไซต์ที่รองรับอุปกรณ์ประเภท
mobile ดังนั้นมั่นใจได้เลยว่า Googlebot-mobile
9. จะเข้ามาเก็บข้อมูลในเว็บไซต์ที่ทำออกมารองรับ
mobile ของคุณอย่างแน่นอน หลังจากนี้เราก็มาเริ่มทำ seo ผ่าน mobile กันต่อไป
10. ช่วยทำให้การค้นหาผ่าน
mobile เป็นไปได้ง่ายมากยิ่งขึ้น
ข้อเสียของ Responsive Web Design
อย่างไรก็ตาม Responsive Web Design ก็ยังมีข้อเสียอยู่บ้าง
เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา
เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก
ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา
แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ
ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น
ที่มา : http://www.siamhtml.com/responsive-web-design
:
http://www.km-web.rmutt.ac.th/?p=1889
ไม่มีความคิดเห็น:
แสดงความคิดเห็น