หลายคนคิดว่าการจะทำเว็บไซต์หนึ่งขึ้นมา ต้องออกแบบและแสดงผลบนอุปกรณ์ Desktop อย่างคอมพิวเตอร์ก่อนเสมอ แน่นอนว่าถ้าเป็นเมื่อก่อนอาจจะใช่ เพราะในสมัยก่อนอุปกรณ์ที่ใช้งานอินเทอร์เน็ตเพื่อเข้าเว็บไซต์จะเป็นคอมพิวเตอร์เป็นหลัก แต่ในยุคสมัยที่การเข้าเว็บไซต์ไม่ได้ถูกใช้แค่เพียงคอมพิวเตอร์อย่างเดียวแล้ว ยังมีอุปกรณ์พกพาและเคลื่อนที่ที่สามารถเข้าใช้งานเว็บไซต์ได้ ไม่ว่าจะเป็น สมาร์ตโฟนมือถือ หรือแท็บเล็ต ดังนั้นเว็บไซต์คุณควรทำ Responsive Web Design เพื่อให้เว็บไซต์ของคุณนั้นสามารถแสดงผลหน้าเว็บบนทุกอุปกรณ์ได้ดี
Responsive Web Design คืออะไร
Responsive Web Design คือ การออกแบบเว็บไซต์แบบใหม่ โดยการแสดงผลหน้าเว็บไซต์จะถูกปรับเปลี่ยนขนาดให้เหมาะสมกับอุปกรณ์ที่เข้าใช้งานเว็บ ไม่ว่าจะเป็น มือถือ แท็บเล็ต หรือคอมพิวเตอร์ ซึ่งในแต่ละอุปกรณ์จะมีการแสดงผลหน้าเว็บที่แตกต่างกันไป
หลักการทำงานของ Responsive Web Design คือการเขียนโค้ด HTML, CSS และ JavaScript ของเว็บไซต์ให้ปรับขนาดการแสดงผลหน้าเว็บอัตโนมัติตามอุปกรณ์ที่เข้าใช้งานเว็บไซต์ โดยหน้าเว็บยังมีเพียง 1 URL เหมือนเดิม ไม่ได้แยกเว็บไซต์เป็นเวอร์ชัน Desktop หรือ Mobile โดยนอกจากนี้ยังต้องพึ่งพาเทคนิคต่าง ๆ ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries
Responsive Web Design มีความสำคัญอย่างไร?
เราคงไม่ลืมว่า 70-80% ของผู้ใช้งานบนโลกออนไลน์ในปัจจุบันที่เข้าชมเว็บไซต์ มักใช้งานกันผ่านอุปกรณ์เคลื่อนที่อย่างสมาร์ตโฟน หรือแท็บเล็ตกันเป็นหลักแล้ว การจะทำเว็บไซต์ให้แสดงผลบนอุปกรณ์ Desktop อย่างคอมพิวเตอร์ไม่ใช่คำตอบหลัก คำตอบเดียวอีกต่อไป
ผู้ทำและออกแบบเว็บไซต์จึงควรที่จะหันมาใส่ใจ กับการทำเว็บไซต์เพื่อให้รองรับการแสดงผลบนอุปกรณ์เคลื่อนที่เหล่านี้ด้วย เพราะหากเว็บไซต์ไม่ใส่ใจ เวลามีผู้ใช้งานเข้าเว็บไซต์ผ่านอุปกรณ์เคลื่อนที่อย่างมือถือ แล้วเข้ามาเจอหน้าเว็บไซต์ที่มีขนาดใหญ่ หรือเล็กเกินไปกับขนาดหน้าจอมือถือแล้ว พวกเขาอาจจะหันหลังและปิดเว็บหนี ซึ่งการทำแบบนี้จะสร้างประสบการณ์เชิงลบแก่ผู้ใช้งาน และส่งผลเสียต่อเว็บไซต์ที่ทำ SEO เป็นอย่างมาก
ดังนั้น Responsive Web Design จึงมีความสำคัญอย่างมากในยุคที่อุปกรณ์เคลื่อนที่อย่าง มือถือสมาร์ตโฟน และแท็บเล็ตถูกใช้งานในการเข้าเว็บไซต์เป็นหลัก เพราะเว็บไซต์ที่ออกแบบการแสดงผลให้รับรองได้ทุกอุปกรณ์ ย่อมสร้างประสบการณ์การใช้งานที่ดีให้แก่ผู้ใช้งานอย่างแน่นอน
ขั้นตอนการทำ Responsive Web Design เบื้องต้น
เราได้รู้กันไปแล้วว่าเจ้าตัวออกแบบ Responsive Web Design นั้นคืออะไร มีความสำคัญและข้อดีอย่างไร ต่อไปหากผู้ทำเว็บไซต์ไหนต้องการจะทำเว็บไซต์ให้รองรับการแสดงผลทุกอุปกรณ์ จะมีขั้นตอนดังต่อไปนี้
1. วางแผน และออกแบบให้ง่าย
ขั้นตอนแรกสำหรับเว็บไซต์ที่ต้องการจะทำ Responsive คือการวางแผนและออกแบบหน้าเว็บไซต์ในทุกอุปกรณ์ โดยคุณจะจำแนกเป็น มือถือ แท็บเล็ต และคอมพิวเตอร์ หรือจะมีแค่มือถือ และคอมพิวเตอร์ก็ได้ โดยวางตำแหน่งเนื้อหา ภาพ เมนู ข้อความ ต่าง ๆ บนแต่ละอุปกรณ์ให้พอดี และดูใช้งานได้ง่าย โดยในแต่ละอุปกรณ์การแสดงผลเนื้อหาและรูปภาพ อาจจะไม่เหมือนกัน ยกตัวอย่างเช่น อุปกรณ์มือถือที่มีหน้าจอขนาดเล็ก อาจะไม่มีภาพประกอบ หรือไม่มีเมนูบางอย่างที่ไม่ได้สำคัญ แต่ในอุปกรณ์คอมพิวเตอร์ที่มีขนาดหน้าจอใหญ่กว่า อาจจะแสดงเนื้อหาได้ครบ เป็นต้น
ข้อควรระวังสำหรับผู้ออกแบบเว็บไซต์แบบ Responsive คือ เว็บไซต์ควรเป็นเว็บที่พึ่งทำขึ้นมาใหม่ เพราะการใช้งานเว็บไซต์เก่ามาทำแบบนี้ อาจจะทำให้การทำงานของโค้ดซ้ำกัน จนเกิดปัญหาได้ และเว็บไซต์ที่ออกแบบ Responsive ไม่ควรเน้นฟังก์ชันหรือลูกเล่นบนเว็บไซต์มากเกินไป เพราะอาจจะมีปัญหาเวลาในการเขียนโค้ดให้แสดงผลบนอุปกรณ์ต่าง ๆ ได้
2. เริ่มต้นที่ขนาดหน้าจอเล็กเสมอ
เมื่อกำหนดวางแผน และออกแบบเว็บไซต์แล้ว ในขั้นตอนถัดไปคือการเขียนโค้ดให้รองรับการแสดงผลบนทุกอุปกรณ์ โดยโค้ดที่ใช้งานเป็นหลักจะมี HTML, CSS และ JavaScript เป็นหลัก โดยเทคนิคที่ทางเราแนะนำคือให้เริ่มเขียนโค้ดกับการแสดงผลบนอุปกรณ์มือถือ ที่มีขนาดหน้าจอเล็กก่อนเสมอ เพราะการเขียนโค้ดให้แสดงผลบนอุปกรณ์คอมพิวเตอร์แล้วมาทำแบบมือถือต่อนั้น ค่อนข้างยาก และจะเสียเวลา
3. การใช้ Media Queries
เมื่อคุณเริ่มเขียนโค้ดของเว็บไซต์ไปเรียบร้อยแล้ว คุณสามารถใช้งาน Media Queries ในการปรับขนาดเนื้อหาบนหน้าเว็บไซต์ให้แสดงผลเข้ากับขนาดหน้าจอของอุปกรณ์ที่เข้าใช้งานได้แบบอัตโนมัติ ซึ่งเจ้าตัว Media Queries เป็นหนึ่งในความสามารถของ CSS โดยในขั้นตอนนี้คุณต้องหาจุด Breakpoint ของขนาดหน้าจอแต่ละอุปกรณ์ก่อน
Breakpoint คือการกำหนดค่าการแสดงผลหน้าเว็บไซต์ ว่าเมื่อถึงขนาดหน้าจอเท่านี้แล้ว ให้ใช้งานรูปแบบนี้ เมื่อถึงอีกขนาดหน้าจอหนึ่ง ให้ใช้งานอีกรูปแบบหนึ่ง ยกตัวอย่างเช่น
โค้ดเขียนว่า (max-width: 400px){…ค่าแสดงผล} จะหมายถึง เมื่อหน้าจอ 400 px หรือต่ำกว่า จะใช้งานโค้ด CSS ที่กำหนดไว้ใน {…ค่าแสดงผล}
โดยตัวค่า Breakpoint มีตั้งแต่ 320, 480, 600, 768, 1024, 1280 ขึ้นอยู่กับการกำหนดค่าของเรา ว่าจะให้ขนาดไหนเหมาะกับอุปกรณ์แบบใด
4. การกำหนด Responsive Images
เมื่อเรากำหนดค่าการแสดงผลของเนื้อหาได้เรียบร้อยแล้ว สิ่งถัดไปคือ รูปภาพ ซึ่งเราสามารถใช้เทคนิคที่เรียกว่า Responsive Images ได้ พูดง่ายๆ ก็คือ เทคนิคการปรับแต่งรูปภาพที่ใช้งานบนเว็บไซต์ ให้แสดงผลตามขนาดความกว้างของหน้าจอได้ ตัวอย่างเช่น การใช้ tag หรือ เพื่อให้รูปภาพแสดงผลได้เหมาะสมกับขนาดหน้าจอ
ภาพประกอบการใช้งาน Responsive Image
ถึงแม้การใช้งานตัว Responsive Image จะสามารถใช้งานได้ดี แต่ก็ยังมีปัญหาเรื่องประสิทธิภาพ เพราะต้องเตรียมรูปภาพขนาดใหญ่เผื่อไว้สำหรับการรองรับหน้าจอขนาดใหญ่ ซึ่งรูปภาพขนาดใหญ่เหล่านี้มักมีขนาดไฟล์ที่หนัก ซึ่งสำหรับอุปกรณ์อย่างมือถือ ก็ต้องมาโหลดภาพขนาดใหญ่นี้โดยไม่จำเป็น ซึ่งอาจจะส่งผลในเรื่องของ Page Speed ได้
5. ทดสอบก่อนเปิดใช้งานจริงเสมอ
เมื่อเสร็จสิ้นขั้นตอนข้างต้นไปหมดแล้ว สิ่งถัดไปคือการทดสอบเว็บไซต์ก่อนเปิดใช้งานจริง เพราะเราไม่รู้ว่าโค้ดที่เราเขียนไปนั้นจะทำงานได้อย่างถูกต้องหรือไม่ และสามารถผลได้ตามที่วางแผนไหม โดยให้เน้นทดสอบในอุปกรณ์ที่กลุ่มเป้าหมายของเราเข้ามาใช้งานอยู่บ่อยครั้ง หรือคิดว่าเว็บไซต์เรานั้น ผู้ใช้งานจะเข้าใช้งานอุปกรณ์ใดเป็นหลัก
ข้อเสียของ Responsive Web Design
แม้ตัว Responsive Web Design นั้นจะทำให้เว็บไซต์สามารถแสดงผลหน้าเว็บได้ทุกอุปกรณ์ ทุกขนาดหน้าจอแล้ว แต่ก็ยังมีข้อเสียหนึ่ง เช่น การเขียนโค้ดเว็บไซต์รองรับทุกอุปกรณ์ โดยตัวมือถือที่มีขนาดหน้าจอเล็ก อาจจะจำเป็นต้องซ่อนเนื้อหาบางส่วนไม่ว่าจะเป็นภาพ หรือเมนูที่ไม่จำเป็นต่อการแสดงผลบนหน้าจอมือถือออกไป แต่ในส่วนของไฟล์ข้อมูลที่ซ่อนจะยังมีการโหลดบนมือถืออยู่ กล่าวได้ว่าแม้จะซ่อนเนื้อหาเพื่อให้แสดงผลบนหน้าจอมือถือได้ดี แต่ยังต้องโหลดไฟล์ข้อมูลเนื้อหาของเว็บไซต์ที่ซ่อนไว้อยู่ดี ซึ่งอาจจะส่งผลเสียต่อการทำ Page Speed ได้เช่นกัน
ความแตกต่างระหว่าง Responsive Web Design กับ Mobile Web
ใครหลายคนที่อ่านมาถึงจุดนี้แล้ว อาจจะคิดว่าการออกแบบ Responsive Web Design นั้น คือการออกแบบ Mobile Web ไปในตัวด้วยเลย แต่ไม่ใช่เลย การออกแบบเว็บไซต์แบบ Responsive นั้นยังมีข้อจำกัดหลายอย่าง ไม่ว่าจะเป็นการไม่ควรใช้งานฟังก์ชัน หรือลูกเล่นบนเว็บไซต์มากเกินไป ซึ่งแตกต่างกับตัว Mobile Web ที่สามารถใส่ลูกเล่นเหล่านี้ได้แบบเต็มที่ หากให้อธิบายให้เห็นภาพชัดเจนขึ้นหน่อย เว็บไซต์ที่ออกแบบ Responsive คือ เสื้อฟรีไซซ์ที่ใส่และใช้ได้ทุกคน แต่กับ Mobile Web คือ การตัดขนาดเสื้อให้พอดีกับผู้ใช้งานมือถือ
บทสรุป Responsive Web Design กับข้อควรระวังในการใช้งาน
Responsive Web Design คือการออกแบบเว็บไซต์รูปแบบหนึ่ง ให้สามารถรองรับการแสดงผลหน้าเว็บบนทุกขนาดหน้าจอ และทุกอุปกรณ์ ไม่ว่าจะเป็นมือถือ แท็บเล็ต หรือคอมพิวเตอร์ แน่นอนว่าในยุคที่อุปกรณ์เคลื่อนที่อย่าง มือถือมีการใช้งานโลกออนไลน์เป็นหลักนี้ การออกแบบนี้ยิ่งมีความสำคัญมากยิ่งขึ้นไปอีก แต่ถึงกระนั้นแม้การออกแบบเว็บไซต์นี้ จะเหมาะแก่การแสดงผลบนทุกอุปกรณ์ แต่ก็ไม่ได้เหมาะสำหรับเว็บไซต์ที่มีมาดั้งเดิมอยู่แล้ว หากใครต้องการจะทำเว็บไซต์แบบ Responsive ควรเป็นเว็บไซต์ที่ทำขึ้นมาใหม่ ที่มีตั้งแต่จุดเริ่มต้นการเขียนโค้ดพื้นฐานของเว็บไซต์
ดังนั้นเว็บไซต์ที่ออกแบบ Responsive จึงควรออกแบบเว็บไซต์ให้ออกมาดี ตั้งแต่จุดเริ่มต้น การวางแผน การออกแบบ ใช้เวลาในจุดนี้ให้นานเท่าที่ควร เพื่อให้การแสดงผลหน้าเว็บไซต์ของเรานั้นออกมาดีที่สุดบนทุกอุปกรณ์
