เทคนิคทำ Responsive Web ให้ดูดีได้ไม่ว่าจอขนาดใด

การออกแบบเว็บไซต์แบบ Responsive Web คืออะไร? แล้วทำไมต้องทำให้เว็บเป็นแบบ Responsive Web ด้วย?

หลายคนที่เป็นนักท่องเว็บมานานคงจำได้ดีว่าในช่วงที่สมาร์ทโฟนและแท็บเล็ตกำลังบูม ๆ เว็บไซต์ต่าง ๆ มักจะมีเวอร์ชั่น Desktop กับเวอร์ชั่น Mobile เพื่อให้ผู้ใช้สะดวกในการใช้งานเว็บไซต์ทั้งจากหน้าจอคอมพิวเตอร์และโทรศัพท์มือถือ ซึ่งการทำเว็บแบบนี้ก็เป็นเรื่องที่ยุ่งยากทีเดียว เพราะทั้งสองเวอร์ชั่นก็จะต้องมี Source Code เป็นของตัวเอง ทำให้ต้องเขียนโค้ดแยกกันสองชุด

แต่ในปัจจุบันมีการปรับใช้โค้ด HTML, CSS3 และ JavaScript ร่วมกันเพื่อกำหนดขนาดของเว็บไซต์ให้แสดงผลได้ตามขนาดของอุปกรณ์ที่กำลังใช้งานอยู่ได้แบบพอดิบพอดี หรือที่เรียกว่า Responsive Web Design นั่นเอง ทำให้ผู้ใช้สามารถใช้งานเว็บไซต์ได้อย่างสะดวกสบายไม่ว่าจะด้วยอุปกรณ์ใดก็ตาม โดยที่องค์ประกอบต่าง ๆ ของเว็บไม่ผิดเพี้ยน ไม่ต้องแยกเว็บไซต์ออกเป็นสองเวอร์ชั่น และใช้ Source Code เพียงชุดเดียว ทำให้ประหยัดทั้งเวลาและค่าใช้จ่ายในการพัฒนาไปได้เยอะเลยทีเดียว

แล้วทำไมต้องทำให้เป็น Responsive Web ด้วยล่ะ?

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

5 เทคนิคในการออกแบบเว็บไซต์แบบ Responsive Web

1. เน้นการออกแบบที่เรียบง่าย

พื้นฐานของการทำ Responsive Web ควรเป็นการออกแบบเว็บไซต์โดยเน้นความเรียบง่ายให้มากที่สุด นำเสนอเนื้อหาที่จำเป็นเท่านั้น ไม่ควรมีเนื้อหาเยอะจนรกไม่น่าดู ภาพและสื่อต่าง ๆ รวมถึงเมนูก็ไม่ควรมีเยอะมาก หากมีเมนูเยอะให้จัดเป็นหมวดหมู่แล้วซอยย่อย การเขียนโค้ด HTML ก็ควรเขียนให้กระชับเข้าไว้ เน้น Elements ที่จำเป็นไม่ต้องซับซ้อนเกินควร

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

ให้นึกถึงหน้าจอโทรศัพท์เอาไว้เป็นอันดับแรกครับ เพราะการออกแบบจากเล็กไปใหญ่ย่อมง่ายกว่าการออกแบบจากใหญ่ ๆ แล้วต้องมานั่งย่อขนาดให้เล็กลง ตัดนั่นตัดนี่ออก ดูจะวุ่นวายเกินจำเป็น ลองคิดว่าเราเป็นผู้ใช้ที่เข้ามาชมเว็บไซต์เป็นครั้งแรก จะออกแบบ UI อย่างไรกับหน้าจอเล็ก ๆ ให้ใช้งานง่าย เข้าใจง่าย อ่านเนื้อหาได้สะดวก ลองขีด ๆ เขียน ๆ ดูแล้วปรับแก้จนกว่าจะพอใจ จากนั้นเริ่มเขียน HTML แล้วลอง Preview ดูให้พอเห็นภาพการวาง Content โอเคหรือยัง และต้องไม่ลืมเรื่อง Sectioning Content และ Document Outlines ด้วย

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

นับเป็นหัวใจสำคัญของการทำ Responsive Web เลยล่ะครับ หลังเสร็จจาก HTML แล้ว ก็ต่อด้วยการเขียน Style Sheets โดยต้องกำหนดขนาดของสิ่งต่าง ๆ ให้เป็นแบบ Relative เพื่อให้ขนาดแต่ละสิ่งสัมพันธ์กับสิ่งที่อยู่ข้างเคียง ซึ่งอย่างแรกที่ต้องกำหนดเลยก็คือ Layout นั่นเอง โดยต้องกำหนดความกว้าง-ความยาวต่าง ๆ ให้มีค่าเป็น % แทนจำนวน Pixel ที่ตายตัวนั่นเอง จากนั้นก็มากำหนดขนาดของ Image ให้เป็น % อีกเช่นกันโดยอิงตาม Container ของแต่ละ Image ไป แล้วกำหนด Max-Width ให้เป็นความกว้างที่แท้จริงของภาพด้วยเพื่อป้องกันภาพแตก ต่อมาก็มาดำหนดขนาด Font โดยเริ่มจากการกำหนดขนาดของ Font ที่ Body ให้เป็น 100% ซึ่งจะทำให้ขนาดของ Font ทั้งหมดที่อยู่ในส่วนของ Body มีขนาด 100% และหากต้องการกำหนดขนาด Font ใน Element ไหนเป็นพิเศษ ก็ให้ใช้หน่วย Em แทนนั่นเอง

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

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

5. กำหนด Viewport Meta Tag

โดยปกติแล้ว หน้าเว็บที่ไม่ได้กำหนด Viewport Meta Tag ไว้จะถูกเบราว์เซอร์ย่อขนาดลงให้พอดีกับหน้าจอ ซึ่งอาจทำให้เนื้อหาดูเล็กเกินไป จึงต้องกำหนด Viewport Meta Tag เพื่อควบคุมสเกลของหน้าเว็บบนอุปกรณ์ต่าง ๆ โดย Viewport Meta Tag มักจะถูกใส่ไว้ในส่วน <head> ของ HTML โค้ด และมีรูปแบบดังนี้ครับ

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

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

หากต้องการทราบรายละเอียดเพิ่มเติมสามารถเข้าไปดูได้ที่ https://www.1001click.com/ 

หรือติดต่อขอคำปรึกษาเพิ่มเติมได้ผ่านช่องทาง

• Line Id : 1001click
• Tel :  081 116 1001
• Email : info@1001click.com