Responsive web คือ

Responsive web design ก็คือคอนเซปต์ซึ่งรวมเอา css, css3 และ Javascript เข้ามาอยู่รวมกันเพื่อสร้างการออกแบบใหม่ ที่สามารถเปลี่ยนแปลงได้ง่ายโดยขึ้นอยู่กับ ขนาดหน้าจอของ user โดยงานออกแบบของเรานั้นจะสามารถ ขยาย ย่อ จัดเรียงใหม่ หรือเอา content ออกไปเลยก็ยังได้ ซึ่งแทนที่จะออกแบบแยกกันหลายๆหน้าจอ หลายๆแบบ เราก็เพียงทำแค่ออกแบบครั้งเดียวแต่ให้มันปรับขยายได้ตามหน้าจอ มันก็จะง่ายขึ้นอีกเยอะเลย

แต่ปัญหามันก็ยากตรงที่การออกแบบเว็บไซต์แบบนี้ เราจะต้องวางแผนการออกแบบให้ละเอียดก่อนจะทำงานจริง คือต้องออกแบบให้รองรับทั้ง Desktop tablet และ mobile นอกจากนี้ต้องกำหนดขนาดของ css และรูปภาพให้ชัดเจน(ส่วนใหญ่กำหนดความกว้างกล่อง css เป็น %) ถ้าเราไม่วางแผนให้ดีๆก่อนออกแบบ มิเช่นนั้น จะเกิดปัญหาใหญ่หลวงและความยุ่งยากตามมาแน่ค่ะ เหมือนต้องรื้อใหม่ทั้งหมดเลย

เอาล่ะ ใครฟังแล้วอยากจะศึกษาต่อไปอ่านที่นี่ guidelines for responsive web design

responsiveBenefit

 

Benefits of Responsive Web Design

1. search engine จาก google รองรับ responsive web design
ช่วยให้ติด index google ได้ทั้ง mobile และ desktop ในหน้าเดียว

2. การทำ responsive นอกจากจะไม่ต้องทำหลายๆหน้าแล้ว ก็ยังช่วยให้ไม่หนักเซิฟเวอร์ ทำเพียงแค่ไซต์เดียวแต่รองรับทุกอุปกรณ์

3. ประหยัดค่าใช้จ่ายในการจัดทำ โดยที่เราไม่ต้องทำหน้าต่างแยกกันระหว่าง mobile และ desktop ดังนั้นก็จะช่วยให้เราลดค่าใช้จ่ายลงไปได้เยอะมาก นอกจากนี้ยังช่วยลดระยะเวลาในการทำงานหลายๆหน้า โดยที่เราก็วางแผนครั้งเดียว และทำเพียงแค่หน้าเดียวเท่านั้นเองค่ะ

4. รวดเร็วในการดูแล จัดการเว็บไซต์ ไม่ยุ่งยาก และไม่ต้องไปเปลี่ยนแปลงเว็บไซต์หลายๆหน้า

goalof

5. ทำแล้วรองรับผู้ใช้ทุกอุปกรณ์ เพราะสุดท้ายผู้คนจากหลายอุปกรณ์ก็มีความต้องการเดียวกัน
ดูจากตัวอย่างภาพด้านบนเลย 🙂

6. เว็บไซต์ไม่ต้อง redirect หน้าไปหาหน้า mobile ให้เสียเวลา ก็จะช่วยให้เซิฟเวอร์ไม่ทำงานหนัก และไม่วุ่นวายด้วยนะ

7. Googlebot-Mobile จะสนใจกับไซต์ที่รองรับอุปกรณ์ประเภท mobile ดังนั้นมั่นใจได้เลยว่า Googlebot-mobile จะเข้ามาเก็บข้อมูลในเว็บไซต์ที่ทำออกมารองรับ mobile ของคุณอย่างแน่นอน

8. ช่วยทำให้การค้นหาผ่าน mobile เป็นไปได้ง่ายมากยิ่งขึ้น