Responsive Design คือ เทคนิคการออกแบบเว็บไซต์แบบใหม่ ซึ่งจะมีการปรับเปลี่ยนขนาดของเว็บไซต์ ให้เหมาะสบกับการแสดงผลบนหน้าจอขนาดต่าง ๆ รวมถึงความละเอียดของหน้าจอในอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์ โน้ตบุ๊ค โทรศัพท์มือถือ แท็บเล็ต เป็นต้นครับ
การออกแบบเว็บไซต์แบบ Responsive นี้จะใช้การกำหนดขนาดของเว็บไซต์ด้วย HTML, CSS3 และ JavaScript ครับ ซึ่งสามารถปรับขนาดของเว็บไซต์ได้ตามขนาดของอุปกรณ์ที่ใช้งานอยู่ โดยที่หน้าเว็บไซต์จะมีเพียงแค่ 1 URL เท่านั้น ไม่จำเป็นต้องแยกเว็บไซต์เป็นเวอร์ชั่น Desktop หรือ Mobile เหมือนแต่ก่อน
ซึ่งเมื่อเปิดเว็บไซต์ด้วยหน้าจอคอมพิวเตอร์ โน้ตบุ๊ค หรือจอโทรทัศน์ที่มีขนาดจอกว้าง เว็บไซต์แบบ Responsive Design นี้ก็จะแสดงผลได้อย่างเต็มจอ แต่เมื่อเปิดด้วยแท็บเล็ตหรือโทรศัพท์มือถือ เว็บไซต์ก็ยังสามารถปรับขนาดตามได้อย่างพอดี โดยองค์ประกอบในเว็บไม่ผิดเพี้ยน
การทำ Responsive Design จึงทำให้ผู้ใช้งานไม่ต้องคอยเลื่อนซ้ายขวาให้วุ่นวาย เพียงแค่เลื่อนลงแนวตั้งตามปกติเท่านั้นครับ อีกทั้งขนาดของตัวหนังสือก็สามารถปรับให้ตัวใหญ่ขึ้นได้อีกด้วยเพื่อให้สะดวกเวลาดูกับอุปกรณ์ที่มีหน้าจอเล็ก ไม่ต้องคอยเพ่งอ่านอีกต่อไป
2. Flexible Images and Media คือ รูปและสื่อมีเดีย เช่น ความกว้างของรูปจะกำหนดให้สามารถแสดงผลโดยใช้ % กับขนาดของหน้าจอ แทนการกำหนดความกว้างเป็น PX
3. CSS3 Media Queries คือ การใช้โค้ดกำหนด Style Sheet พื้นฐานและเขียนโค๊ดกำหนด Style Sheet สำหรับหน้าจอขนาดต่าง ๆ ไว้
1. Responsive Design มีผลต่อ การจัดอันดับใน Google SEO ซึ่งการที่เว็บไซต์สามารถแสดงผลได้ในอุปกรณ์ที่แตกต่างกัน จึงส่งผลดีต่อการจัดอันดับ เพราะทำให้ Google Bot สามารถเก็บข้อมูลไปจัดอันดับ ได้จากเว็บไซต์เดียวในอุปกรณ์สื่อสารที่แตกต่างกัน ยิ่ง Google แยกการจัดอันดับ ของ มือถือ และ คอมพิวเตอร์ PC ออกจากกัน โอกาสที่เว็บไซต์ของเราจะติดอันดับทั้งใน คอมพิวเตอร์ PC, มือถือ ย่อมมีมากขึ้น
2. การดูแลอัพเดทข้อมูลในเว็บไซต์ การดูแลเว็บไซต์ในรูปแบบ Responsive Design สามารถทำได้ง่ายมากเลยครับ เพียงแค่เจ้าของเว็บไซต์ยังคงอัพเดทเนื้อหา เข้าไปในเว็บไซต์เพียงครั้งเดียว ก็ทำให้เนื้อหาและข้อมูลทั้งไปสามารถไปแสดงผลได้ ในทุกอุปกรณ์ ทุกหน้าจอ ได้เองครับ
3. การคงเอกลักษณ์ของสินค้า/บริการ งานออกแบบเว็บไซต์โดยภาพรวมมีความลงตัวและดูเป็นรูปเดียวกัน ใกล้เคียงกัน ไม่ว่าจะแสดงผลผ่านทางคอมพิวเตอร์ หรือ มือถือ ก็ตาม เนื่องจากเป็นการพัฒนาครั้งเดียว ที่เดียวกัน เพียงแต่มีเทคโลยี ที่ทำให้การแสดงผลแตกต่างกันเท่านั้นเอง
การทำ Responsive Design ควรคำนึงถึง การออกแบบเว็บไซต์ให้เรียบง่ายที่สุดครับ เน้นเนื้อหาที่จำเป็น ดีไซน์ที่ไม่เยอะมาก รวมไปถึงการเขียน html ให้ clean เข้าไว้ เพราะต้องคิดถึงตอนหน้าเว็บไซต์ไปแสดงผลในอุปกรณ์ต่าง ๆ หาก มีเนื้อหาหรือการดีไซน์ ภาพ วีดีโอต่าง ๆ ที่มากเกินไป อาจส่งผลต่อความเร็วได้
ให้เริ่มต้นการออกแบบสำหรับหน้าจอที่เล็กที่สุดก่อนครับ ซึ่งก็คือการแสดงผลใน Mobile ขั้นตอนนี้สำคัญมากครับ เพราะถือเป็นรากฐานของเว็บไซต์เลย
เทคนิคง่าย ๆ คือ ให้เราลืม PC ไปเลยครับ หันมาโฟกัสกับหน้าจอเล็ก
ความกว้างประมาณ 300px ควรออกแบบ UI (User Interface) อย่างไร ที่จะทำให้ User ใช้งานง่ายมากที่สุด
ผมแนะนำตัวช่วยในการออกแบบครับ คือ
เมื่อได้ html แล้ว ให้ลอง Preview ดูครับ จะเห็น content ต่างๆ ที่เขียนไว้ ให้ลองดูครับว่าลำดับความสำคัญ มันสมเหตุสมผลไหม แล้วอย่าลืมคำนึงถึงเรื่อง Sectioning Content และ Document Outlines ด้วยนะครับ
เมื่อ Html เรียบร้อยแล้ว ต่อมาให้เขียน Style Sheets ให้กับ Html ซึ่งสิ่งที่ต้องคำนึงอยู่เรื่องนึง คือ การกำหนดขนาดของสิ่งต่าง ๆ ต้องกำหนดให้เป็นแบบ Relative ซึ่งก็คือ การกำหนดขนาดให้สัมพันธ์กับสิ่งที่อยู่ข้างเคียงนั่นเองครับ
สิ่งแรกที่ต้องกำหนดให้เป็นแบบ Relative ก็คือ Layout หรือที่เรียกกันว่า Fluid Layouts ซึ่งก็คือการกำหนด layout ต่างๆ ให้ความกว้างหน่วยเป็น % คือไม่ได้กำหนดตายตัวเป็น Pixel เหมือนแต่ก่อน
ต่อมาให้กำหนดขนาดของ Image ให้เป็นแบบ Relative ด้วยครับ โดยกำหนดความกว้างเป็น % ให้อิงตาม Container ของ Image นั้น ๆ จากนั้นให้กำหนด Max-Width ให้เป็นความกว้างที่แท้จริงของ image ด้วยครับ ภาพจะได้ไม่แตก เวลา Container มีขนาดใหญ่มาก
Relative อีกต้องกำหนด ก็คือ Font ครับ เริ่มจากกำหนดขนาดของ font ที่ Body ให้เป็น 100% ซึ่งจะทำให้ขนาดของ Font ใน Element ต่างๆ ที่อยู่ใน Body มีขนาด 100% ทั้งหมด หากต้องการกำหนดขนาดของ Font ใน Element ไหนเป็นพิเศษ ให้ใช้หน่วย Em แทนครับครับ
หากเลอง Preview ดู ที่ความกว้างประมาณ 300px ภาพที่อยากเห็น คือการแสดงผลที่ทำให้ User ใช้งานได้ง่ายมากที่สุด ทีนี้ ให้ลองขยาย Viewport จาก 300px ขึ้นเรื่อย ๆ ครับ
ด้วยการที่กำหนดขนาดของสิ่งต่างๆ ให้เป็นแบบ Relative แม้จะขยาย Viewport ให้ใหญ่ขึ้น องค์ประกอบต่าง ๆ จะยังคงแสดงผลได้ดีอยู่ในระดับหนึ่ง แต่ถ้าเมื่อเพิ่มขนาดขึ้นไปเรื่อย ๆ แล้วพบว่า ที่ความกว้างขนาดนี้ สามารถปรับองค์ประกอบต่าง ๆ เพิ่มเพื่อทำให้ใช้งานได้สะดวกขึ้นได้อีก ซึ่งจุดนั้นจะเรียกว่า Breakpoint ครับ
Viewport ก็คือ visible area หรือ ส่วนที่เรามองเห็นได้ ของหน้าเว็บนั่นเอง สำหรับ Desktop แล้ว สามารถปรับขนาดของ Viewport ได้โดยการ Resize หน้าต่างของ Web Browser ครับ ถ้าหากหน้าเว็บนั้นมีขนาดใหญ่กว่า Viewport ก็จะพบ Scroll Bar ที่มีไว้สำหรับเลื่อนไปดูหน้าเว็บในส่วนที่ล้นออกไปนอก Viewport ได้
Viewport Meta Tag จึงมีขึ้นมา เพื่อให้เราสามารถเปลี่ยนค่า Default Settings ของ Viewport ได้ ค่า Default Settings นี้ ไม่ได้มีแค่ Width ของ Viewport เพียงอย่างเดียวครับ แต่จะรวมไปถึง Height และ Scale ของ Viewport ด้วย
พอจะเข้าใจ Responsive Design คืออะไร กันแล้วใช่ไหมครับ อย่าลืมนะครับว่าถ้าได้ทำตามขั้นตอนที่ผมแนะนำทั้งหมดแล้ว ก็ควรนำเว็บไซต์ที่ทำมา ไปลองเปิดดูกับ Devices จริง ๆ ครับ ถ้าหากทุกท่าน เข้าใจในแต่ละขั้นตอนที่ผมได้เล่ามา แล้วทำตามอย่างละเอียดแล้วละก็ เว็บไซต์ก็จะมีหน้าตาสวยงามในทุก ๆ Devices โดยอัตโนมัติเลยครับ
แต่ก็อย่าลืมนะครับว่าก็ยังมีสิ่งที่แตกต่างกันในแต่ละ Devices ก็คือเรื่องของ Viewport ครับ และยังมีความแตกต่างในเรื่องของ Os, Browser รวมไปถึงข้อจำกัดบางประการที่แต่ละ Devices อาจมีไม่เหมือนกัน ในส่วนนี้ ก็ยังคงต้องหมั่นเช็คกับ Devices นะครับ หรืออาจเลือกมาเฉพาะ Devices ที่เป็นเป้าหมายหลัก ๆ ก็ได้ครับ ทั้งหมดนี้ก็เพื่อความน่าเชื่อถือของเว็บไซต์ธุรกิจของเรา และต่อยอดส่งผลไปถึงการจัดอันดับ SEO ครับผม
บทความแนะนำ
