HTML5 Responsive Web Design

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

ทางเลือกอีกทางคือออกแบบเว็บไซต์แบบ Responsive

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

Screen Shot 2013-09-03 at 9.48.05 AM

Responsive Design ที่มีผู้ใช้มากที่สุดคือ Bootstrap ซึ่งพัฒนาโดย Twitter โดยปัจจุบันก็ได้ออก Bootstrap 3.0 มาเรียบร้อยแล้ว ซึ่งมีจุดเด่นหลายประการที่เหนือกว่าเวอร์ชั่นก่อนหน้า (Bootstrap 2.3.6) อย่างมาก แต่การเปลี่ยนจาก 2.3.6 มาเป็น 3.0 นั้นไม่ง่ายนัก อาจจะถึงขั้นต้องออกแบบกันใหม่กันเลยทีเดียว

ข้อดีอย่างหนึ่งของ Bootstrap 3.0 คือ ผู้ออกแบบสามารถจัดรูปแบบของการแสดงผลในแพลทฟอร์ทต่างๆ ได้เอง เช่น ถ้าต้องการให้บน Desktop แสดง 6 columns แต่ใน iPad แนวตั้ง ให้แสดง 4 columns และในมือถือให้แสดงเพียง 1 column ก็เพียงแค่กำหนด class ใน div นั้นๆ ตามกลุ่มของความกว้าง หน้าเว็บก็จะปรับเปลี่ยนไปตามที่เราต้องการเอง

Comments are closed, but trackbacks and pingbacks are open.