การทำเว็บไซต์แบบ 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)

 855
ผู้เข้าชม

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

การออกแบบ เป็นเรื่องของอารมณ์ความรู้สึก โดยนักออกแบบจะต้องคำนึงถึงความต้องการของผู้ใช้งาน และวัตถุประสงค์การใช้งานเว็บไซด์
656 ผู้เข้าชม
layout เป็นองค์ประกอบสำคัญอย่างหนึ่งหากคุณต้องการที่จะเปิดเว็บไซต์ใด ๆ ก็ตามเนื่องจากการวาง layout เป็นการจัดระเบียบให้กับเนื้อหาของเว็บไซต์อย่างเป็นสัดส่วนและสวยงามได้ในคราวเดียวกัน
974 ผู้เข้าชม
web storage ใน html5 จะใช้สำหรับจัดเก็บข้อมูลเอาไว้ที่ฝั่ง client เหมือนๆ กับ cookie เลย เพียงแต่มันจะถูกออกแบบมาเพื่อให้ใช้กับภาษาฝั่ง client โดยเฉพาะ ทำให้มันมีข้อได้เปรียบเหนือ cookie ตรงที่ ...
1185 ผู้เข้าชม
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์