บทความ

กำลังแสดงโพสต์จาก มิถุนายน, 2017

ผู้ใช้งานมือถือเพิ่มขึ้นอย่างรวดเร็ว ทำให้มีบริการรับทำเว็บไซต์ Responsive เกิดขึ้นมากมาย



ในขณะนี้ Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว แล้วก็มีลักษณะท่าทางที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความมากมายหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของจอแสดงผล (screen size and resolution) แนวของการแสดงผล (orientation) หรือแม้กระทั้งระบบปฏิบัติการ (OS) ถ้าหากเป็นสมัยเก่า พวกเราจะต้องเขียนเว็บไซต์ออกมาหลายๆversion ยกตัวอย่างเช่น Desktop version กับ Mobile version เพื่อเว็บไซต์ของพวกเรา สามารถแสดงผลลัพธ์ได้อย่างเหมาะสมกับ Device นั้น ๆ ซึ่งแนวทางนี้จะทำให้ต้นทุนเพิ่มขึ้น ในด้านเวลาและก็ค่าแรงในการพัฒนา และมีหลายคนเห็นโอกาสนี้จึงเกิดเป็นบริการรับทำเว็บไซต์ Responsive ขึ้นมา

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

Responsive Web Design ทำอย่างไร?

การจะทำ Responsive Web Design มักใช้แนวทางหลายๆอย่าง ด้วยกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images รวมทั้ง CSS3 Media Queries เริ่มแรกคือกระบวนการทำ Fluid Grid ซึ่งหมายถึงการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่มิได้กำหนดขนาดของ Grid แบบตายตัว แม้กระนั้นจะกำหนดให้สมาคมกับสิ่งอื่นๆดังเช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em ฯลฯ ถัดมาเป็นแนวทางการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆให้มีความข้องเกี่ยวกับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มากมาย เวลาแสดงในโทรศัพท์เคลื่อนที่ที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างงดงาม ฯลฯ ท้ายที่สุดคือการใช้ CSS3 Media Queries ซึ่งจะช่วยทำให้พวกเราสามารถกำหนด style sheets สำหรับ Devices ต่างๆได้ โดยส่วนใหญ่ พวกเราจะเขียน style sheets เบื้องต้นเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นกับ Devices ใดๆก็ตามต่อจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดจอที่เล็กสุด มากขึ้นไปเรื่อยๆจนถึงขนาดใหญ่สุดซึ่งการเขียนแบบงี้ จะช่วยลดความซ้ำไปซ้ำมาของโค้ด รวมทั้งยังส่งผลให้การแก้รหัสในวันหลังทำเป็นง่ายอีกด้วย

ข้อผิดพลาดของ Responsive Web Design

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