Responsive Website
คือ แนวคิดการออกแบบเว็บไซต์เพียงครั้งเดียว
แต่สามารถแสดงผลได้บนทุกขนาดของหน้าจอ โดยเว็บไซต์จะตรวจสอบขนาดของอุปกรณ์
และจะปรับขนาด Layout ให้เหมาะสมกับการแสดงผลโดยอัตโนมัติ
ซึ่งแตกต่างจากเว็บไซต์ที่ออกแบบมาตามปกติ
โดยไม่ได้ใช้เทคนิค Responsive เมื่อแสดงผลบน Mobile Device จะเป็นเพียงแค่การ
ย่อ ขนาด เพื่อให้สามารถแสดงผลได้บนหน้าจอเท่านั้น แต่จะไม่สามารถปรับรูปแบบ หรือ Layout ให้เหมาะสมตามขนาดหน้าจอ
-เทคนิคการทำ Responsive Website
1. Responsive Retrofitting
แปลงเว็บเก่าให้กลายเป็น Responsiveเป็นการเอา Desktop
Site (เว็บไซต์ที่ทำขึ้นมาเพื่อรองรับหน้าจอคอมพิวเตอร์)
ที่มีอยู่แล้วมาเขียน CSS3 Media Query เพิ่มเข้าไป
เพื่อให้รองรับหน้าจอแบบ Responsive
2. Responsive Mobile Site
ปลูกเมล็ด Mobile Site แล้วแปลงเป็น Responsiveเหมือนหว่านเมล็ดเป็น Mobile Site (เว็บไซต์ที่ทำขึ้นเพื่อรองรับหน้าจอมือถือโดยเฉพาะ)
แยกออกมาก่อน คนที่เข้าทาง Desktop ก็เจอเว็บเก่า
ส่วนคนที่เข้าจากมือถือก็เจอเว็บใหม่ จากนั้นค่อย ๆ ทำการพัฒนา Mobile
Site ตัวนี้ให้สามารถดูใน Tablet และ Desktop ได้สวยงาม
ซึ่งพอเสร็จสมบูรณ์แล้ว ก็ย้ายคนที่เข้าทาง Desktop ให้เปิดมาเจอเว็บไซต์ใหม่ด้วย และทิ้งเว็บเก่าไป
3. Mobile-First Responsive Site
เป็นการสร้างเว็บไซต์ใหม่ขึ้นมาเลย
โดยดีไซน์ให้รองรับ Mobile ก่อน เน้นทำให้เว็บไซต์มีเฉพาะ Element ที่สำคัญจะได้โหลดไว
เขียน CSS สำหรับ Mobile โดยไม่ต้องใช้ Media Query เลย
จากนั้นค่อยพัฒนาให้เหมาะกับ Desktop Site โดยเติม CSS สำหรับ Desktop เข้าไป (ใช้ Media
Query ช่วย)
4. Piecemeal
วิธีสุดท้ายนี้เป็นการค่อย
ๆ แปลงทีละส่วนบนเว็บไซต์ให้เป็น Responsive ซึ่งเหมาะกับเว็บไซต์บางเว็บที่ไม่สามารถ Redesign ใหม่หมดได้ อาจจะติดเรื่อง Branding, งบประมาณ
หรืออะไรก็แล้วแต่ ซึ่งการทำแบบ Piecemeal นี้ก็มีแยกย่อยเป็นหลายแบบ
ประโยชน์ของการออกแบบเว็บไซต์แบบ Responsive
1. แสดงผลได้สวยงาม บนขนาดหน้าจอที่แตกต่าง
2. ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับขนาดหน้าจอที่หลากหลาย
3. มี Experience ในการใช้งานที่ดีกว่า ดูข้อมูลได้ง่าย โดยไม่ต้อง Zoom
4. ประหยัดเวลา และ ค่าใช้จ่ายได้มากกว่าการทำ 2 เว็บไซต์
5. ช่วยในเรื่องของการทำ SEO (Search Engine Optimization)
ที่มา : http://library.stou.ac.th/blog/?p=6349
http://www.designil.com/responsive-web-design-4-ways.html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น