หน้าแรก     บทความ     Website     เทคนิคการทำ Responsive Design ที่จะช่วยให้เว็บไซต์ของคุณน่าสนใจ

เทคนิคการทำ Responsive Design ที่จะช่วยให้เว็บไซต์ของคุณน่าสนใจ
Website

เทคนิคการทำ Responsive Design ที่จะช่วยให้เว็บไซต์ของคุณน่าสนใจ

4 เดือน ที่แล้ว

Responsive Design คือ เทคนิคการออกแบบเว็บไซต์แบบใหม่ ซึ่งจะมีการปรับเปลี่ยนขนาดของเว็บไซต์ ให้เหมาะสบกับการแสดงผลบนหน้าจอขนาดต่าง ๆ รวมถึงความละเอียดของหน้าจอในอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์ โน้ตบุ๊ค โทรศัพท์มือถือ แท็บเล็ต เป็นต้นครับ


สารบัญน่ารู้

หลักการทำงานของ Responsive Design


การออกแบบเว็บไซต์แบบ Responsive นี้จะใช้การกำหนดขนาดของเว็บไซต์ด้วย HTML, CSS3 และ JavaScript ครับ ซึ่งสามารถปรับขนาดของเว็บไซต์ได้ตามขนาดของอุปกรณ์ที่ใช้งานอยู่ โดยที่หน้าเว็บไซต์จะมีเพียงแค่ 1 URL เท่านั้น ไม่จำเป็นต้องแยกเว็บไซต์เป็นเวอร์ชั่น Desktop หรือ Mobile เหมือนแต่ก่อน


ซึ่งเมื่อเปิดเว็บไซต์ด้วยหน้าจอคอมพิวเตอร์ โน้ตบุ๊ค หรือจอโทรทัศน์ที่มีขนาดจอกว้าง เว็บไซต์แบบ Responsive Design นี้ก็จะแสดงผลได้อย่างเต็มจอ แต่เมื่อเปิดด้วยแท็บเล็ตหรือโทรศัพท์มือถือ เว็บไซต์ก็ยังสามารถปรับขนาดตามได้อย่างพอดี โดยองค์ประกอบในเว็บไม่ผิดเพี้ยน


การทำ Responsive Design จึงทำให้ผู้ใช้งานไม่ต้องคอยเลื่อนซ้ายขวาให้วุ่นวาย เพียงแค่เลื่อนลงแนวตั้งตามปกติเท่านั้นครับ อีกทั้งขนาดของตัวหนังสือก็สามารถปรับให้ตัวใหญ่ขึ้นได้อีกด้วยเพื่อให้สะดวกเวลาดูกับอุปกรณ์ที่มีหน้าจอเล็ก ไม่ต้องคอยเพ่งอ่านอีกต่อไป

หลักการออกแบบ Responsive Design จะประกอบด้วยองค์ประกอบหลักๆ 3 ส่วนคือ


  1. Fluid Grid  คือ การออกแบบ Lay out โดยใช้กริดที่มีความยืดหยุ่น ซึ่่งไม่มีการกำหนดขนาดตายตัวเป็น PX แต่จะใช้การกำหนดเป็น % แทน

2. Flexible Images and Media  คือ รูปและสื่อมีเดีย เช่น ความกว้างของรูปจะกำหนดให้สามารถแสดงผลโดยใช้ % กับขนาดของหน้าจอ แทนการกำหนดความกว้างเป็น PX


3. CSS3 Media Queries คือ การใช้โค้ดกำหนด Style Sheet พื้นฐานและเขียนโค๊ดกำหนด Style Sheet  สำหรับหน้าจอขนาดต่าง ๆ ไว้

ข้อดีของ Responsive Web Design


1. Responsive Design มีผลต่อ การจัดอันดับใน Google SEO ซึ่งการที่เว็บไซต์สามารถแสดงผลได้ในอุปกรณ์ที่แตกต่างกัน จึงส่งผลดีต่อการจัดอันดับ เพราะทำให้ Google Bot สามารถเก็บข้อมูลไปจัดอันดับ ได้จากเว็บไซต์เดียวในอุปกรณ์สื่อสารที่แตกต่างกัน ยิ่ง Google แยกการจัดอันดับ ของ มือถือ และ คอมพิวเตอร์ PC ออกจากกัน โอกาสที่เว็บไซต์ของเราจะติดอันดับทั้งใน คอมพิวเตอร์ PC, มือถือ ย่อมมีมากขึ้น

 

2. การดูแลอัพเดทข้อมูลในเว็บไซต์ การดูแลเว็บไซต์ในรูปแบบ Responsive Design  สามารถทำได้ง่ายมากเลยครับ เพียงแค่เจ้าของเว็บไซต์ยังคงอัพเดทเนื้อหา เข้าไปในเว็บไซต์เพียงครั้งเดียว ก็ทำให้เนื้อหาและข้อมูลทั้งไปสามารถไปแสดงผลได้ ในทุกอุปกรณ์ ทุกหน้าจอ ได้เองครับ 

 

3. การคงเอกลักษณ์ของสินค้า/บริการ งานออกแบบเว็บไซต์โดยภาพรวมมีความลงตัวและดูเป็นรูปเดียวกัน ใกล้เคียงกัน ไม่ว่าจะแสดงผลผ่านทางคอมพิวเตอร์ หรือ มือถือ ก็ตาม เนื่องจากเป็นการพัฒนาครั้งเดียว ที่เดียวกัน เพียงแต่มีเทคโลยี ที่ทำให้การแสดงผลแตกต่างกันเท่านั้นเอง

ข้อควรระวังในทำ Responsive Web Design


  • ควรทดสอบเปิดเว็บไซต์ ด้วยหน้าจอขนาดต่าง ๆ ก่อนใช้งานจริงนะครับ เพราะมีความเป็นไปได้ที่จะมีการแสดงผลผิดไปจากตำแหน่งที่ต้องการได้
  • ควรกำหนดการแสดงและซ่อนส่วนประกอบต่าง ๆ ของเว็บไซต์ เพราะ Responsive Design ไม่สามารถแสดงหน้าเว็บไซต์ได้เหมือนกันในทุกขนาดหน้าจอ เช่น เมนู รูปภาพ โฆษณา เป็นต้น
  • ควรวางแผนการจัดเรียงเนื้อหาในเว็บไซต์ เมื่อเปิดด้วยโทรศัพท์มือถือ เพราะขนาดจอที่เล็ก จะทำให้ต้องเรียงเนื้อหาต่อกันยาวจนเกินไปครับ
  • ควรเตรียมรูปให้เหมาะกับหน้าจอ เมื่อเปิดด้วยหน้าจอที่ขนาดเล็ก ก็ให้โหลดรูปที่มีขนาดเล็ก เพราะอาจทำให้เสียเวลาในการโหลดได้ถ้าขนาดใหญ่กว่าหน้าจอ ซึ่งจะส่งผลเสียต่อผู้ใช้ และได้คะแนน PageSpeed ต่ำครับ ทำให้ทาง Google อาจจะลดอันดับ SEO เว็บไซต์ได้

5 ขั้นตอน การทำ Responsive Design


1. ออกแบบให้เรียบง่าย


การทำ Responsive Design ควรคำนึงถึง การออกแบบเว็บไซต์ให้เรียบง่ายที่สุดครับ เน้นเนื้อหาที่จำเป็น ดีไซน์ที่ไม่เยอะมาก รวมไปถึงการเขียน html ให้ clean เข้าไว้ เพราะต้องคิดถึงตอนหน้าเว็บไซต์ไปแสดงผลในอุปกรณ์ต่าง ๆ หาก มีเนื้อหาหรือการดีไซน์ ภาพ วีดีโอต่าง ๆ ที่มากเกินไป อาจส่งผลต่อความเร็วได้


2. เริ่มที่หน้าจอเล็กสุดก่อนเสมอ


ให้เริ่มต้นการออกแบบสำหรับหน้าจอที่เล็กที่สุดก่อนครับ ซึ่งก็คือการแสดงผลใน Mobile ขั้นตอนนี้สำคัญมากครับ เพราะถือเป็นรากฐานของเว็บไซต์เลย 

เทคนิคง่าย ๆ คือ ให้เราลืม PC ไปเลยครับ หันมาโฟกัสกับหน้าจอเล็ก 

ความกว้างประมาณ 300px ควรออกแบบ UI (User Interface) อย่างไร ที่จะทำให้ User ใช้งานง่ายมากที่สุด 

ผมแนะนำตัวช่วยในการออกแบบครับ คือ 

  • ให้วาดกรอบสี่เหลี่ยมผืนผ้าความกว้างประมาณ iPhone 4 (5×7.5 cm) ครับ ทีนี้ให้ลองนำกระดาษโพสต์–อิท ที่เขียนเนื้อหาเตรียมไว้ 
  • ลองจัดวางลงบนกรอบนั้นครับ 
  • สังเกตการวางตำแหน่งของเนื้อหาจะทำให้เข้าใจไหม ใช้งานได้ง่ายไหม 
  • แล้วลองปรับจนกว่าจะพอใจครับ 


เมื่อได้ html แล้ว ให้ลอง Preview ดูครับ จะเห็น content ต่างๆ ที่เขียนไว้ ให้ลองดูครับว่าลำดับความสำคัญ มันสมเหตุสมผลไหม แล้วอย่าลืมคำนึงถึงเรื่อง Sectioning Content และ Document Outlines ด้วยนะครับ


3. กำหนดขนาดแบบ Relative


เมื่อ 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 แทนครับครับ



4. หา Breakpoints แล้วเขียน Media Queries


หากเลอง Preview ดู ที่ความกว้างประมาณ 300px ภาพที่อยากเห็น คือการแสดงผลที่ทำให้ User ใช้งานได้ง่ายมากที่สุด ทีนี้ ให้ลองขยาย Viewport จาก 300px ขึ้นเรื่อย ๆ ครับ 

ด้วยการที่กำหนดขนาดของสิ่งต่างๆ ให้เป็นแบบ Relative แม้จะขยาย Viewport ให้ใหญ่ขึ้น องค์ประกอบต่าง ๆ จะยังคงแสดงผลได้ดีอยู่ในระดับหนึ่ง แต่ถ้าเมื่อเพิ่มขนาดขึ้นไปเรื่อย ๆ แล้วพบว่า ที่ความกว้างขนาดนี้ สามารถปรับองค์ประกอบต่าง ๆ เพิ่มเพื่อทำให้ใช้งานได้สะดวกขึ้นได้อีก ซึ่งจุดนั้นจะเรียกว่า Breakpoint ครับ 


  • ให้ใช้ Media Queries ในการใส่ Style Sheets สำหรับ Breakpoint นั้น ๆ เพื่อที่จะปรับการแสดงผลให้เหมาะสมตรงตามที่ต้องการ 
  • เพิ่มขนาดของ Viewport อีก แล้วหา Breakpoint ต่อไป 
  • ทำแบบนี้ไปเรื่อยๆ จนกว่าจะถึงขนาดที่ต้องการครับ

5. กำหนด Viewport Meta Tag


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 ครับผม