การทำเว็บไซต์แบบ Responsive เพื่อ ให้เว็บไซต์รองรับหน้าจอ ที่แตกต่างกันในเว็บไซต์เดียว
Smartphone, Tablet, Desktop
(ในความเป็นจริง จะมีเรื่องของ ขนาดหน้าจอ และ ความละเอียดหน้าจอ)
แปลงจากเว็บเดิม
เอา Desktop Site มาเขียน CSS3 Media Query เพิ่ม , Developer ไม่เหนื่อยมาก
ข้อดี
– ทำได้เร็ว ง่าย แค่ใส่ CSS เพิ่มไปอีกไฟล์ก็รองรับ Responsive แล้ว
– User เก่าไม่งง ดีไซน์เก่ายังอยู่ รูปแบบเว็บยังเหมือนเดิม
– ไม่ต้อง Redesign ทำให้ไม่ต้องถกปัญหาเรื่อง Branding กับบริษัทใหม่อีกครั้ง และไม่เสียงบค่าดีไซน์เพิ่มด้วย เพราะใส่แค่ code @media เข้าไป
ข้อเสีย
– User Experience(UX) ในการใช้งานบน Mobile Site อาจไม่เต็มที่
เพราะจุดประสงค์นี้นั้น แค่ทำให้ Layout เข้ากับ หน้าจอมือถือเท่านั้น
สำหรับ Navigation, Slider
ใช้ Navigation หรือ menu แบบ responsive ไปเเทนอันเดิม
หรือ ปรับ code slide ให้ เป็ฯแบบ fluid และ เป็น RPS ในที่สุด
– เว็บ Desktop มี Component มากมาย ใส่ลูกเล่นเต็มที่ จึงโหลดอะไรต่างๆมาก และการทำงานใช้ทรัพยากรเครื่องสูง โดยเฉพาะ เจ้า Bootstrap ซึ่งค่อนข้างหนักเว็บไซต์ แต่ได้ความสะดวก เพราะ มีโค๊ดทุกอย่างเขียนรองรับไว้แล้ว เพียงแต่เลือกคำสั่งเพื่อเเสดงผล แต่นั่นก็หมายความว่า เราต้องโหลด code Bootstrap มาทั้งหมดนั่นเอง ทำให้โหลดเยอะเกินความจำเป็นในการใช้งาน
– เว็บเปิดช้าลง ทั้งในมือถือและในคอม เพราะเขียนโค้ดมากขึ้น การใช้ @media จะต้องเขียนโค๊ดซ้ำเป็นชุดสำหรับแต่ละขนาดหน้าจอนั่นเอง
– บาง Device ไม่รองรับ Media Query ทำให้มันไม่ทำงานตาม @media ที่เขียน และอาจต้องใช้วิธีการอื่นช่วย แต่นั่นก็ทำให้เว็บโหลดมากขึ้นไปอีก ยิ่งช้าเข้าไปใหญ่ วิธีนี้เลย ไม่เหมาะสำหรับการ ทำเว็บให้โหลดเร็ว
– วิธีนี้ ไม่ใช่ Responsive ที่ทำให้ User บนมือถือได้รับประโยชน์อย่างแท้จริง เป็นวิธีฉาบฉวย เว้นแต่จะใส่คำสั่่ง @media ไปให้น้อยที่สุด
Mobile Site to RPS
ทำ Mobile Site แยกต่างหาก ผู้ใช้งานเข้าทาง Desktop ก็วิ่งไปเว็บเดิม เข้าจากมือถือก็วิ่งไปเว็บใหม่
แล้วพัฒนา Mobile Site ให้รองรับ Tablet และ Desktop เสร็จแล้ว ให้ switch วิ่งทุกการเข้าเว็บไปที่เว็บไซต์ใหม่นี้ และทิ้งเว็บเก่าไป เว็บ BBC ก็ใช้วิธีนี้
โดยอาจจะใช้ code คำสั่ง ตรวจสอบ Device ถ้าพบว่าเป็นมือถือให้ วิ่งไปหาเว็บใหม่
ข้อดี
– User เดิมยังใช้เว็บได้เหมือนเดิม
– มีเวลาให้ทีม Designer ค่อยๆ เรียนรู้การดีไซน์เว็บไซต์ให้เหมาะกับ Responsive โดยใช้เว็บ Mobile site เป็นที่ทดสอบ
– ฝ่าย Content ก็มีเวลาเรียนรู้ในการปรับ Content ให้เหมาะกับการอ่านบนหน้าจอหลายแบบ
– ลดขนาดเว็บให้เล็กลงกว่าเดิมได้ (ตัดทอน Element เก่าใน Desktop Site ที่ไม่จำเป็นออก)
ข้อเสีย
– อาจเกิดปัญหาเรื่อง URL Redirect, SEO ซึ่งปัญหานี้เป็น Cost ที่เราต้องจ่ายเพื่อไปสู่จุดที่ดีขึ้น
Mobile-First to RPS
สร้างเว็บไซต์ใหม่ขึ้นมาเลย รองรับ Mobile ก่อน มีเฉพาะ Element สำคัญ โหลดไว เขียน CSS สำหรับ Mobile โดยไม่ต้องใช้ Media Query และพัฒนาให้เหมาะกับ Desktop Site โดยเติม CSS สำหรับ Desktop (Media Query)
วิธีนี้แม้มือถือไม่รองรับ Media Query ก็จะเห็นเว็บแบบ Mobile อยู่แล้ว ส่วนถ้าผู้ใช้เปิดในคอมก็จะโหลด Component เพิ่มเติมสำหรับหน้าจอคอมเท่านั้น เปิดในมือถือจะได้เว็บที่เบา โหลดเร็ว เปิดในคอมจะได้เว็บที่หนักขึ้น
ข้อดี
– ทำให้ Designer / Developer ทำงานได้ง่ายขึ้น ต่างกับที่ต้องทำเพิ่มเติม แก้ไขของเดิม ต้องคอยระวังโค้ดเดิมจะมีปัญหาไหม จะพังไหม
– รองรับ Mobile ได้ทันที โดยที่ Device นั้นไม่ต้องรองรับ Media Query ก็ได้
– ปรับแต่งให้เว็บไซต์โหลดไวบนมือถือได้ง่าย
– ปรับแต่งให้รองรับหน้าจอหลายขนาดได้ง่าย เพราะ ทำจากเล็กไปใหญ่ จะเห็นว่าเมื่อขยายหน้าจอถึงไหน หน้าตาเว็บ จะเป็นอย่างไร
– เหมาะกับการพัฒนาเป็น Desktop Site ต่อในอนาคต
ข้อเสีย
– ใช้เวลามาก ต้องสร้างใหม่ทั้งหมด รวมถึงการเทส การดีไซน์
– ดีไซน์เว็บใหม่อาจมีปัญหากับ Branding
– Interface ใหม่อาจทำให้ User สับสน แต่นั่นก็เป็นแค่ช่วงแรก
Piecemeal RPS
แปลงเว็บเก่าให้เป็น Responsive ทีละส่วน
เหมาะกับเว็บไซต์บางเว็บที่ไม่สามารถ Redesign ใหม่หมดได้ อาจจะติดเรื่อง Branding, งบประมาณ
PAGE BY PAGE
ทำเป็น Responsive ทีละหน้า ทำหน้าแรกให้ Responsive ก่อน แล้วเปิดให้คนใช้ โดยที่หน้าอื่น ๆ ยังไม่ได้ทำให้รองรับ Responsive
ข้อดี
– เลือกทำหน้าที่คนเข้าเยอะ ๆ ให้เป็น Responsive เพื่อให้ User ได้รับประโยชน์สูงสุดจาก Responsive Website ทันที
– นำไปใช้จริงได้เร็ว ไม่ต้องรอเสร็จทั้งเว็บ (ทำไปใช้ไป เพราะ ใช้ทีละส่วนได้)
ข้อเสีย
– ถ้า User ที่เข้าทางมือถือคลิกไปอ่านหน้าอื่นในเว็บไซต์ต่อ แล้วไปเจอหน้าที่ไม่ Responsive ก็จะทำให้การใช้งานเว็บไซต์ดูไม่ต่อเนื่อง
– กำหนด จบงานยาก เพราะ ทำไปเรื่อยๆ บอกไม่ได้ว่าเสร็จทั้งเว็บไซต์เมื่อไร สุดท้ายอาจกลายเป็นโปรเจคที่ไม่เสร็จ
COMPONENT BY COMPONENT
ทำให้ Element ทีละส่วนในเว็บกลายเป็น Responsive (เช่น header ก่อน แล้วค่อยมาทำ footer)
ข้อดี
– การค่อย ๆ เปลี่ยน Interface ทำให้ User ค่อย ๆ เรียนรู้หน้าตาเว็บแบบใหม่ทีละนิด User ไม่รู้สึกตกใจตอนเราทำเสร็จแล้ว
– การแบ่งส่วนในเว็บเป็น Element ย่อย ๆ ทำให้ Developer สามารถทำเว็บไซต์ได้ง่ายขึ้น และ Design ไปในทิศทางเดียวกันมากขึ้น (เป็นเรื่องของ Atomic Design)
– การแบ่งส่วนในเว็บเป็น Element ย่อย ๆ ลูกค้าตรวจเช็คได้ง่าย และทำงานกันได้เร็วขึ้น โดยส่งเป็นทีละ Element ไป
ระวัง : อาจเกิดปัญหาในการใช้เทคโนโลยีใหม่แล้วไปตีกับเทคโนโลยีเก่าที่ใช้อยู่ได้ โค๊ดชนกัน
เลือกแบบไหน?
– เวลาที่มี
– งบประมาณในการพัฒนาเว็บไซต์
– ความสามารถของสมาชิกในทีม (Web Developer, Web Designer, Content Manager, etc.)
– ผลลัพธ์ที่เราต้องการจากการทำเว็บไซต์แบบ Responsive
(เช่น ทำให้คนซื้อสินค้าในเว็บได้ง่ายขึ้น หรือเว็บไซต์โหลดเร็วขึ้นบนมือถือ)