การทำเว็บไซต์แบบ 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 ก็ใช้วิธีนี้) 
  1. 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 เพิ่มเติมสำหรับหน้าจอคอมเท่านั้น ซึ่งคนเปิดในมือถือก็จะได้เว็บที่เบา โหลดเร็ว ส่วนคนเปิดในคอมจะได้เว็บที่หนักขึ้น แต่ก็ถือว่ารับได้เพราะในคอมอินเตอร์เน็ตเร็วกว่า
  1. 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)

 812
ผู้เข้าชม

บทความที่เกี่ยวข้อง

หลายคนเลือกที่จะไขว่คว้าชื่อโดเมนที่จัดว่าโดนเต็มๆ กับธุรกิจของตนเอง แต่ก็ไม่รู้หรอกครับว่าไอ้คำว่า “โดน” เนี่ยมันจะต้องมีเกณฑ์อย่างไร
673 ผู้เข้าชม
ร้านค้าออนไลน์ ชวนให้ผู้ประกอบการสามารถบริหารธุรกิจแบบ “ง่าย..สบาย..สะดวก” พร้อมรับมือสำหรับการขยายธุรกิจในประเทศและเปิดตลาดในต่างประเทศ เป็นการเปิดช่องทางใหม่ๆ ในการขยายฐานลูกค้าผู้ร่วมธุรกิจสร้างความสัมพันธ์ระหว่างทีมงาน และบริหารธุรกิจได้อย่างมีประสิทธิภาพ
46 ผู้เข้าชม
มีคนถามเข้ามามากมายว่า "ทำอย่างไร ให้ Search Engine มองเห็นเว็บผมครับ?" หรือ บางคนก็ถามว่า "ทำอย่างไร ให้ Search Engine เข้าเว็บเราบ่อยๆคะ? ถึงขนาดมาทุกวันได้ยิ่งดี" บทความนี้จะไม่แค่ทำให้ Search Engine เข้าเว็บคุณบ่อยๆ แต่จะทำให้ Search Engine หลงรักเว็บคุณอย่างหัวปักหัวปำเลยทีเดียว
882 ผู้เข้าชม
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์