08 2892 9104
support@aviruth.com

เข้าสู่ระบบสมาชิก

ความหมาย และความสำคัญของ Responsive WebDesign

   ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว และมีแนวโน้มที่จะแซง Desktop Internet Users ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล (Screen Size and Resolution) แนวของการแสดงผล (Orientation) หรือแม้แต่ระบบปฏิบัติการ (OS)

   Responsive WebDesign คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์สามารถแสดงผลได้อย่างเหมาะสมบนอุปกรณ์ที่แตกต่างกัน โดยใช้โค้ดร่วมกัน URL เดียวกัน เพื่อแก้ปัญหาดังกล่าว

หลักการของ Responsive WebDesign

   การจะทำ Responsive WebDesign มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น 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 WebDesign

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

ข้อเสียของ Responsive WebDesign

  • ไม่สามารถรองรับการทำงาน พวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
  • เนื่องจากอุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ออก
  • ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี  เช่น  HTML5, CSS ให้เหมาะสม
  • การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหาได้

Responsive WebDesign การแสดงผลเว็บไซต์ที่รองรับทุกหน้าจอการทำงาน

   Responsive Web คือ เว็บไซต์ที่สามารถรองรับการทำงานบนหน้าจออุปกรณ์เครือข่ายได้อุปกรณ์ เช่น Desktop Internet, Mobile Internet (iPad ,iPhone, Android, Windows Mobile อื่นๆ) ซึ่งอุปกรณ์เหล่านี้จะมีหน้าจอแตกต่างกันไป ตามขนาดความกว้างของเครื่อง ทำให้หน้าต่างเว็บไซต์ที่ออกแบบให้ดูผ่านหน้าจอคอมพิวเตอร์อย่างเดียว มีปัญหาการทำงานเมื่อใช้งานผ่านอุปกรณ์ที่มีหน้าจอขนาดเล็กว่า เช่น  Mobile Internet Users  อุปกรณ์มือถือ เพราะเนื่องจากปัจจุบันนี้ การใช้งานผ่าน Mobile Internet  มีการเจริญเติบโตสูง และมีแนวโน้มที่จะแซง Desktop Internet Users ทำให้บุคคลทั่วไปสามารถเข้าชมเว็บไซต์ได้ตลอดเวลา

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

Pin It

สถิติจำนวนผู้เยี่ยมชม

070256
Today
Yesterday
This Week
Last Week
This Month
Last Month
All days
32
100
132
19179
2049
4917
70256

Your IP: 3.233.239.20
2019-12-16 08:42