สรุปอย่างย่อ ของหนังสือ Responsive Web Design ของ Ethan Marcotte

ได้อ่านหนังสือ Responsive Web Design เขียนโดย Ethan Marcotte แล้ว อ่านง่าย ไม่หนามาก เนื้อหาจริงๆ ประมาณ 140 หน้าเอง ทำให้มีกำลังใจอ่าน

เล่มนี้ ผมว่าเขียนได้ดีมาก เลยอยากสรุปเนื้อหาบางส่วนมาแชร์กันครับ

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

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

การแสดงผลเว็บไซต์บน web browser ที่มีขนาดต่างๆ กัน ทำให้เกิดปัญหา เพราะแต่ก่อน เว็บไซต์ถูกออกแบบขึ้นมาในลักษณะของ fixed width layout เพื่อให้สอดคล้องกับขนาดหน้าจอของพีซีมากที่สุด

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

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

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

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

สิ่งที่จะทำให้เกิดเว็บไซต์ที่เป็น Responsive Design จะต้องประกอบด้วย องค์ประกอบหลัก 3 ส่วนด้วยกัน คือ

  1. ระบบ layout แบบ grid ที่ยืดหยุ่น (Flexible grid base layout)
  2. รูปและมีเดียที่สามารถยืดหยุ่นได้ ( Flexible images and media)
  3. การนำ Media queries ซึ่งเป็นส่วนหนึ่งในข้อกำหนดของ CSS3 มาใช้

ขอเกริ่นเอาไว้เพียงเท่านี้ แล้วมาดูรายละเอียดในแต่ละส่วนด้วยกันอีกในครั้งหน้าครับ

Show your support

Clapping shows how much you appreciated worrawutp’s story.