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

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

Flexible Images

ปัญหาที่เกิดขึ้นบ่อยในการออกแบบเว็บไซต์แบบ Responsive Web คือ ปัญหาเกี่ยวกับการแสดงผลรูปภาพบนอุปกรณ์ที่มีขนาดแตกต่างกัน ซึ่งปัจุบันมีเทคนิคมากมายที่ช่วยในการจัดการปัญหาดังกล่าว
โดยเทคนิคที่ได้รับความนิยมมากคือนำ CSS มาช่วยในการออกแบบการแสดงผลดังกล่าวเนื่องจากสามารถทำได้ง่าย และไม่ซับซ้อน คือกำหนดขนาดของรูปภาพให้มีความกว้าง 100% แทนการกำหนดขนาด
ของรูปภาพแบบตายตัว (width: 100px) ทำให้การแสดงผลของรูปภาพจะขึ้นอยู่กับขนาดของหน้าจออุปกรณ์หรือความกว้างของบราวเซอร์แทน

ข้อเสีย

– บราวเซอร์ Internet Explorer ยังไม่รองรับ properties ที่ชื่อว่า max-width แต่สามารถแก้ไขโดยการใช้ properties ที่ชื่อว่า width แทน
– ในบราวเซอร์เวอร์ชั่นเก่าๆ ยังไม่รองรับเทคนิคการทำงานดังกล่าวเช่นกัน ซึ่งสามารถแก้ไขโดยการใช้ JavaScript ช่วยในการทำงานแทนได้

แม้วิธีข้างต้นจะเป็นการแก้ปัญหาการยืดหยุ่นของภาพได้ดีและรวดเร็ว แต่สิ่งที่ไม่ควรมองข้ามคือ ความละเอียดของภาพและเวลาในการโหลดรูปภาพ เนื่องจากในปัจจุบัน นิยมใช้งานเว็บไซต์ผ่านทาง Smartphone หรือ Tablet มากขึ้น การโหลดภาพที่มีขนาดใหญ่และความละเอียดสูงจะทำให้เสียเวลาและใช้พื้นที่โดยไม่จำเป็น Filament Group’s Responsive Images เป็นเทคนิค ที่ไม่เน้นการปรับขนาดของรูปภาพ แต่ใช้วิธีเลือกรูปภาพที่มีขนาดเหมาะสมกับอุปกรณ์มาแสดงแทน ซึ่งช่วยแก้ปัญหาการโหลดรูปภาพที่มีขนาดใหญ่มาแสดงผลในอุปกรณ์ที่มีขนาดเล็ก และลดการใช้พื้นที่โดยไม่จำเป็นได้

ปัจจุบันอุปกรณ์ของค่าย Apple ไม่ว่าจะเป็น IPhone(เวอร์ชั่น 4 ขึ้นไป) หรือ IPad(เวอร์ชั่น 2 ขึ้นไป) ได้นำเทคโนโลยีที่ช่วยในการแสดงผลของหน้าจอได้ดีขึ้นซึ่งมีชื่อเรียกว่า Retina Display ทำให้การแสดงผลของ Responsive Web บนอุปกรณ์ดังกล่าวไม่ได้ขนาดที่เหมาะสมกับที่ได้ทำการออกแบบไว้ ซึ่งมีเทคนิคในการแก้ไขปัญหาดังกล่าวโดยการนำค่า pixels มาเป็นตัวช่วยในการแก้ปัญหา

Pixels

หน่วยที่ใช้วัดค่าความละเอียดของรูปภาพหรือหน้าจออุปกรณ์ pixels แบ่งได้ 3 แบบด้วยกัน คือ Physical Pixels, CSS Pixels และ Device Pixels
- Physical Pixels คือ จำนวน pixels จริงๆ ตาม spec ของ Device นั้นๆ เช่น iPhone3 เท่ากับ 320×480 ส่วน iPhone4 เท่ากับ 640×960 เป็นต้น

- CSS Pixels นั้นเป็นส่วนที่ใช้ใน CSS declarations ตัวอย่าง เรากำหนด width:320px หรือ font-size:16px ค่า pixels ในส่วนนี้จะหมายถึง CSS Pixels ซึ่งโดยปกติแล้ว CSS Pixels จะมีค่าเท่ากับ Physical
Pixels ถ้าเราไม่ได้ Zoom หน้าจอ แต่ถ้าเรา Zoom เข้า ภาพจะขยายใหญ่ขึ้น นั่นเป็นเพราะว่าเว็บบราวเซอร์จะไปขยาย CSS Pixels ให้มีขนาดใหญ่ขึ้น ในทางกลับกัน ถ้าเรา Zoom ออก CSS Pixels ก็จะมีขนาดเล็กลง
ส่งผลให้ภาพที่ได้มีขนาดเล็กลง ซึ่งนี่ก็เป็นหลักการเดียวกับการเปลี่ยน Resolution ของหน้าจอ PC ครับ สมมติหน้าจอเรามี Physical Pixels เป็น 1280×1024 หากเราเปลี่ยน Resolution เป็น 1024×768
สิ่งที่เปลี่ยนไปก็คือ CSS Pixels นั่นเอง

- Device Pixels ในสมัยก่อน Device Pixels จะมีค่าเท่ากับ Physical Pixels เช่น iPhone3 จะมี Physical Pixels และ Device Pixels เท่ากันคือ 320×480 แต่ต่อมา iPhone4
ได้ปรับปรุงหน้าจอให้มีความละเอียดมากขึ้น หรือที่เรียกว่า Retina Display ซึ่งจะทำให้ iPhone4 มี Physical Pixels เพิ่มขึ้นเป็น 2 เท่า คือ 640×960 ซึ่งหมายความว่า เว็บที่แสดงผลได้ดีใน iPhone3
กลับมีขนาดเล็กลงใน iPhone4 ทั้งๆ ที่จริงๆ แล้ว ขนาดหน้าจอของ iPhone3 และ iPhone4 นั้นเท่ากัน ปัญหานี้สามารถแก้ง่ายๆ ด้วย Device Pixels ครับ เนื่องจาก Device Pixels นั้นเป็นเหมือน Pixels จำลอง
ที่จะช่วยให้ application สามารถกำหนดขนาดขององค์ประกอบต่างๆ ได้ตรงกับความเหมาะสมในมุมมองของผู้ใช้งาน ซึ่งค่านี้ไม่ได้เพิ่มตาม Physical Pixels แต่จะเพิ่มตามขนาดของหน้าจอ(Screen size) ครับ

โดยวิธีแก้ไขปัญหาคือการอ้างอิง Meta Tag ดังต่อไปนี้ในหน้าเว็บไซต์ของเรา
<meta name="viewport" content="width=device-width; initial-scale=1.0">
โค็ด html ด้านบน เป็นการกำหนดให้ viewport ของเราใช้ค่า Device Pixels แทน CSS Pixels และยังกำหนดให้ระดับการซูมเบื้องต้นเป็น 100% อีกด้วย

Custom Layout Structure

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

สิ่งที่ควรคำนึงก่อนออกแบบเว็บให้เป็น Responsive

1. ออกแบบโดยคำนึงถึงอุปกรณ์พกพาเป็นที่ตั้ง
เราควรจะออกแบบเว็บโดยคำนึงถึงอุปกรณ์พกพาต่างๆ (เช่นโทรศัพท์มือถือและTablet) เป็นที่ตั้ง โดยให้ Feature ที่สำคัญบนเว็บ สามารถแสดงผลและใช้งานได้เป็นอย่างดีบนอุปกรณ์พกพา
แล้วค่อยคิดจัดวางรูปแบบและปรับปรุงให้ใช้งานได้บนคอมพิวเตอร์ในภายหลัง อีกอย่างที่ต้องคำนึงถึงคือ Feature ที่คนเข้าชมสามารถใช้งานได้คอมพิวเตอร์ เขาก็ต้องการใช้มันบนโทรศัพท์เช่นกัน
ดังนั้นเมื่อปรับปรุงให้ใช้บนคอมพิวเตอร์ได้แล้ว อย่าลืมคำนึงถึงจุดนี้ด้วย Feature ที่เพิ่มเข้ามาบนเว็บสำหรับคอมพิวเตอร์ บนมือถือก็ควรใช้งานได้ด้วยเช่นกัน

2. ลำดับความสำคัญของ element ต่างๆ ให้ถูกต้อง
หลายๆ ครั้งที่เราเขียนโค็ด โดยไม่คำนึงถึงลำดับความสำคัญของ element ต่างๆ ตัวอย่างที่มักจะเจอกันบ่อยๆ คือ sidebar ที่บางคนเอาโค็ดของ sidebar มาไว้ก่อน content และจัดการ float:right
เพื่อให้มันไปอยู่ขวามือแทน ปัญหามักจะเกิดขึ้นเมื่อเราทำเว็บให้เปิดได้บนมือถือ ที่ทุกอย่างมักจะกลับไปเหลือเพียงคอลัมน์เดียว ถึงตอนนั้นเจ้า sidebar ที่เคยอยู่ขวามือ มันก็จะมาอยู่ข้างบนก่อนเข้าถึงเนื้อหา
ทำให้ผู้ใช้ต้องลากยาวๆ ผ่าน sidebar ไปก่อน ถึงจะเห็นเนื้อหา อย่างนี้ไม่ดีกับผู้ใช้แน่นอน ดังนั้น การวางลำดับ element ต่างๆ ให้ถูกต้อง ก็เป็นเรื่องที่สำคัญอีกเรื่องหนึ่ง

3. บนอุปกรณ์พกพา ต้องใช้พื้นที่แสดงผลให้คุ้มค่า
แม้ปัจจุบันมือถือจะแข่งกันแบ่งขนาดหน้าจอ (จนเริ่มแยกมือถือกับแท็บเล็ตไม่ออกแล้ว) แต่ความจริงคือพื้นที่ใช้งานบนหน้าจอมือถือก็ยังถือว่าน้อยกว่าบนคอมพิวเตอร์อยู่มาก ดังนั้นขอให้ลืมการออกแบ
ที่ให้ที่ว่างที่เยอะเกินไปได้เลยครับ เพราะเมื่อเว็บถูกเปิดบนโทรศัพท์ เมื่อเนื้อหาต่างๆ เหลือแค่คอลัมน์เดียว การมีที่ว่างเยอะๆ จะทำให้ผู้ใช้เหนื่อยกับการสกรอลข้ามที่ว่างนั้นจนกว่าจะถึงเนื้อหาไปเสีย เปล่าๆ
(ลักษณะเดียวกันกับการจัดลำดับ element ที่ไม่ถูกต้องนั่นเอง)

4. ลดการใช้งานไฟล์ขนาดใหญ่
การใช้งานเว็บบนอุปกรณ์พกพา (โดยเฉพาะโทรศัพท์มือถือ) นั้นล้วนเชื่อมต่อจาก EDGE หรือ 3G กันเป็นส่วนใหญ่ ซึ่งนอกจากความเร็วที่ค่อนข้างต่ำเมื่อเทียบกับ ADSL ตามบ้านแล้ว ยังติดปัญหา Fair Usage Policy (หรือที่เรียกว่า FUP) กันอีกด้วย ทำให้ผู้ใช้หลายคนค่อนข้างเหงื่อตก เมื่อต้องเปิดเว็บที่มีขนาดเป็นสิบเม็กกะไบต์