cw.in.th > คลังความรู้ > Responsive Web Design คืออะไร ??
20-Apr-2021

Responsive Web Design คืออะไร ??

หลายๆคนคงรู้จัก Responsive Web Design มาบ้างแล้วครับ แต่ก็ยังมีอีกหลายๆคนที่ยังไม่รู้จักหรืออาจจะเป็นมือใหม่ที่อยากสร้างเว็บไซต์ อยากมีเว็บเป็นของตนเองวันนี้ทีมงาน cw ได้สรุป ไว้ในบทความนี้เผื่อใครหลายๆคนที่อยากศึกษา จะได้เข้าใจ

Responsive Web Design คืออะไร ??

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

แล้วทำไมต้อง Responsive Web Design ??

อย่างที่รู้กันทุกวันนี้ ทุกๆคน ต่างก็มี Smartphone หรือ มือถือเป็นอวัยวะอีกชิ้นที่พกติดตัวตลอดเวลา ผู้คนส่วนใหญ่นิยมใช้มือถือ หรือ tablet เข้าเว็บไซต์มากกว่า PC
จากผลวิจัยที่ผ่านมาจะเห็นว่าในแต่ละปี คนทั่วโลกนิยมมากขึ้นทุกๆปี และไม่มีท่าทีจะลดลง
อ้างอิง :: https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics

การทำเว็บ หรือการพัฒนาเว็บไซต์ ที่กำลังได้รับความนิยมในยุค 4.0 New normal ในปัจจุบัน เพื่อ ทำให้ผู้คนที่เข้าชมเว็บไซต์ของเรา
โดย Responsive Web Design นั้น มีข้อดีคือจะใช้ source code ตัวเดียว ทำให้ประหยัดเวลาและค่าใช้จ่าย แต่จะสามารถปรับการแสดงผล ให้เหมาะสมกับอุปกรณ์ต่างๆ ได้อย่างไม่น่าเชื่อ
แต่มีข้อเสียคือ มีค่าใช้จ่ายในการทำเว็บเพิ่มขึ้น และยังต้องใช้เวลาในการพัฒนาเพิ่มขึ้นอีกด้วย
ดังนั้นจะ สรุปขั้นตอนการทำ Responsive Web Design ที่ต้องคำนึงก่อนทำเว็บแบบ Mobile Friendlyมาเป็นข้อๆ
  1. ขนาดของหน้าจอ
  2. ขนาดของปุ่มและลิงค์ต่างๆ
  3. พื้นที่ในการแสดงผลบนหน้าจอน้อย
  4. การตอบสนองต่อ Event ต่างๆ
  5. หลีกเลี่ยงการใช้สิ่งที่ไม่ได้มีมาให้ตั้งแต่แรกใน mobile เช่น Flash เป็นต้น
  6. เลือกขนาดตัวอักษรที่สามารถอ่านได้ชัดเจนโดยไม่ต้องกด zoom
  7. หน้าเว็บต้องไม่มี scroll ในแนวนอน
  8. อย่าวาง link ให้ชิดติดกันจนเกินไป เพราะจะทำให้กดได้ลำบาก
  9. Speed ในการโหลดหน้าเว็บ
  10. การใช้งานไฟล์ประเภทต่างๆ

ตรวจสอบเว็บ Mobile Friendly Test

เช็คเว็บของเราว่า mobile friendly แค่ไหน ที่แนะนำมีดังนี้
https://www.google.com/webmasters/tools/mobile-friendly/


91 View

ดูคลังความรู้ทั้งหมด





กรมพัฒนาธุรกิจการค้า Trustmarkthai  Thailand Web Stat
Scroll To Top