การทำเว็บไซต์แบบ Responsive ตอนนี้กำลังได้รับความนิยม!!

เทคนิคการทำ Responsive Website ที่จะมาอธิบายแบ่งเป็น 4 วิธี

มาดูกันเลยว่าแต่ละวิธีเป็นยังไง

1. Responsive Retrofitting– แปลงเว็บเก่าให้กลายเป็น Responsive เป็นการเอา Desktop Site (เว็บไซต์ที่ทำขึ้นมาเพื่อรองรับหน้าจอคอมพิวเตอร์) ที่มีอยู่แล้วมาเขียน CSS3 Media Query เพิ่มเข้าไป เพื่อให้รองรับหน้าจอแบบ Responsive วิธีนี้ใช้กันเยอะมาก เพราะเป็นวิธีที่ Developer ไม่เหนื่อยมาก แต่จะเหนื่อยที่ User แทน                                                                            
2. Responsive Mobile Site– ปลูกเมล็ด Mobile Site แล้วแปลงเป็น Responsive วิธีนี้เป็นการทำ Responsive Website เหมือนหว่านเมล็ดเป็น Mobile Site (เว็บไซต์ที่ทำขึ้นเพื่อรองรับหน้าจอมือถือโดยเฉพาะ) แยกออกมาก่อน คนที่เข้าทาง Desktop ก็เจอเว็บเก่า ส่วนคนที่เข้าจากมือถือก็เจอเว็บใหม่ จากนั้นค่อย ๆ ทำการพัฒนา Mobile Site ตัวนี้ให้สามารถดูใน Tablet และ Desktop ได้สวยงาม ซึ่งพอเสร็จสมบูรณ์แล้ว ก็ย้ายคนที่เข้าทาง Desktop ให้เปิดมาเจอเว็บไซต์ใหม่ด้วย และทิ้งเว็บเก่าไป (เว็บไซต์ใหญ่ ๆ ในต่างประเทศ เช่น BBC ก็ใช้วิธีนี้) 

3. Mobile-First Responsive Site– ทำเว็บใหม่แบบ Mobile-First (หรือบางคนเรียก Progressive Enhancement) เทคนิค Mobile-First Responsive Website เป็นการสร้างเว็บไซต์ใหม่ขึ้นมาเลย โดยดีไซน์ให้รองรับ Mobile ก่อน เน้นทำให้เว็บไซต์มีเฉพาะ Element ที่สำคัญจะได้โหลดไว เขียน CSS สำหรับ Mobile โดยไม่ต้องใช้ Media Query เลย จากนั้นค่อยพัฒนาให้เหมาะกับ Desktop Site โดยเติม CSS สำหรับ Desktop เข้าไป (ใช้ Media Query ช่วย) ซึ่งวิธีนี้ต่อให้มือถือไม่รองรับ Media Query ก็จะเห็นเว็บแบบ Mobile อยู่แล้ว ส่วนถ้าผู้ใช้เปิดในคอมก็จะโหลด Component เพิ่มเติมสำหรับหน้าจอคอมเท่านั้น ซึ่งคนเปิดในมือถือก็จะได้เว็บที่เบา โหลดเร็ว ส่วนคนเปิดในคอมจะได้เว็บที่หนักขึ้น แต่ก็ถือว่ารับได้เพราะในคอมอินเตอร์เน็ตเร็วกว่า

4. Piecemeal– แปลงเว็บเก่าให้กลายเป็น Responsive ทีละนิด เป็นการค่อย ๆ แปลงทีละส่วนบนเว็บไซต์ให้เป็น Responsive ซึ่งเหมาะกับเว็บไซต์บางเว็บที่ไม่สามารถ Redesign ใหม่หมดได้ อาจจะติดเรื่อง Branding, งบประมาณ หรืออะไรก็แล้วแต่ ซึ่งการทำแบบ Piecemeal นี้ก็มีแยกย่อยเป็นหลายแบบ คือ

          PIECEMEAL แบบที่ 1 – PAGE BY PAGE

          ทำเป็น Responsive ทีละหน้า วิธีนี้ถูกใช้โดย Microsoft คือทำหน้าแรกให้ Responsive ก่อน แล้วเปิดให้คนใช้ โดยที่หน้าอื่นๆ

          ยังไม่ได้ทำให้รองรับ Responsive

          PIECEMEAL แบบที่ 2 – COMPONENT BY COMPONENT

          วิธีการทำ Responsive Website แบบ Component by Component นี่ค่อนข้างแปลกใหม่ครับ เป็นการทำให้ Element ทีละ

          ส่วนในเว็บกลายเป็น Responsive(เช่น header ก่อน แล้วค่อยมาทำ footer)