Responsive Web Design คืออะไร ทำไมถึงเป็นที่นิยม

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

ประโยชน์ของการทำเว็บไซต์  Responsive Web Design

  • Responsive Web Design ได้รับการรับรองจาก google ช่วยให้ติดตั้งหน้าแรกของgoogleได้ทั้ง desktop และ mobile
  • ประหยัดค่าใช้จ่ายในการจัดทำ
  • Responsive รองรับทุกอุปกรณ์และไม่ต้องทำหลายๆหน้าช่วยให้เซิฟเวอร์ไม่ต้องทำงานหนัก
  • ดูแลได้ง่าย ไม่ยุ่งยาก เพราะไม่ต้องแก้ไขเว็บไซต์หลายๆหน้า
  • ช่วยในเรื่องของการทำ SEO
  • ช่วยทำให้การค้นหาผ่าน mobile เป็นไปได้ง่ายมากยิ่งขึ้น

mobile-friendly-มันคืออะไร_2ต่อไปจะเป็นเทคนิคเบื้องต้นในการทำ Responsive Web Design นะครับ

  • ออกแบบเว็บไซต์ให้เรียบง่ายที่สุด สิ่งไหนที่ไม่จำเป็น เช่น Flash หรือ Effects บางอย่าง ก็ให้ตัดออกครับ เพราะ Responsive Web Design จะมีข้อจำกัดในตัวของมันอยู่ ซึ่งบางอย่างอาจจะไม่สามารถแสดงให้สวยงามเท่ากับดูในหน้าจอคอมพิวเตอร์จริงๆครับ อาจจะทำให้ดูเยอะไปสำหรับการดูบนหน้าจอขนาดเล็กครับ
  • เริ่มออกแบบสำหรับหน้าจอที่เล็กที่สุดก่อน(Mobile-First) ให้ลองนึกดูหน้าจอที่มีขนาดความกว้างประมาณ 300px ว่าหน้าจอเล็กขนาดนี้ ควรออกแบบอย่างไร ที่จะทำให้ User ใช้งานง่ายที่สุด หรือลองตัดกระดาษให้เท่ากับหน้าจอมือถือแล้วลองวาดออกแบบดูครับ
  • ใช้การกำหนดขนาดแบบ relative นั้นก็คือการกำหนดขนาดให้สัมพันธ์กับสิ่งที่อยู่ข้างเคียงครับ
  • หา Breakpoints แล้วเขียน Media Queries คือถ้าเมื่อเราเพิ่มขนาดหน้าจอขึ้นไปเรื่อยๆ แล้วพบว่าความกว้างขนาดนี้เราสามารถปรับองค์ประกอบต่างๆ เพื่อทำให้ใช้งานได้สะดวกขึ้นได้ จะเรียกจุดนั้นว่า Breakpoint  แล้วเราก็จะใช้ Media Queries ในการใส่ style sheets สำหรับ Breakpoint นั้นๆ เพื่อที่จะปรับการแสดงผลให้เหมาะสมตามที่ต้องการ
  • ใช้ viewport meta tag ในการเปลี่ยนให้ viewport มาอ้างอิงกับ device ตามขนาดของหน้าจอจริงๆ

f61958f1ac3b4116e1ab24d0d9e56e67

ขนาดหน้าจอแบบต่างๆ

ปัจจุบันแม้แต่ทาง Google เอง ก็ได้ออกมาชักชวนให้ผู้พัฒนาเว็บไซต์ให้พัฒนาในแบบ Responsive ด้วย Responsive Web Design จึงเป็นอีกทางเลือก ซึ่งเป็นที่นิยมและยอมรับในการพัฒนาเว็บไซต์ โดยมีจุดประสงค์เพื่อ “ทำให้ User ใช้งานง่ายที่สุด”  ดังนั้นหากคิดที่จะพัฒนาเว็บไซต์  ต้องตรวจสอบก่อนนะครับว่าเว็บไซต์ที่กำลังจะพัฒนาเป็นแบบ Responsive หรือไม่ เพราะอาจจะพลาดโอกาสที่จะมีผู้ที่เข้ามาดูเว็บไซต์ผ่านทาง Smartphone หรือ Tablet ซึ่งอาจจะส่งผลเสียต่อโอกาสทางธุรกิจของเราได้ครับ

By..ITบ้านนอก