Responsive web คืออะไร
Responsive Web Design คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน เพื่อแก้ปัญหาดังกล่าว
หลักการของ Responsive Web Design
เริ่มแรกคือการทำ 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
ก่อนที่จะมี Responsive Web Design เค้าทำเว็บอย่างไรให้แสดงบนมือถือได้?
เว็บไซต์ใหญ่ๆหลายไซต์ที่ต้องการเข้าถึงกลุ่มผู้ใช้งานอินเทอร์เน็ตบนโทรศัพท์มือถือมักนิยมที่จะสร้างเว็บไซต์แยกออกมาจากเวอร์ชั่นเดิม เป็นเวอร์ชั่นมือถือซึ่งต้องจำกัดขนาดการแสดงผลและการแสดงข้อมูลให้กระชับและดูได้ง่ายบนหน้าจอมือถือ ซึ่งมีข้อดีคือ สามารถทำให้ผู้บริโภคเข้าใจข้อมูลได้ง่าย และไม่มีปัญหาเกี่ยวกับตัวอักษรที่เล็กลงหรือรูปภาพที่เล็ก หรือข้อมุลบางส่วนขาดหายไป แต่ก็มีข้อเสียคือต้องสร้างเว็บไซต์ใหม่ทั้งหมดเพื่อให้สามารถแสดงผลตามความต้องการและการปรับปรุงระบบในเว็บไซต์หลัก เราต้องมาปรับปรุงที่เว็บไซต์เวอร์ชั่นมือถือด้วย ซึ่งทำให้เปลืองงบประมาณในการพัฒนาโปรแกรมเป็นอย่างมาก และใช้เวลาในการพัฒนาที่เพิ่มขึ้นอีกด้วย
แล้ว Responsive Web Design มันคืออะไรหล่ะ มันทำอะไรได้บ้าง?
Responsive Web Design สิ่งที่จะมาแก้ไขปัญหาการพัฒนาเว็บแบบเก่าเพื่อให้แสดงบนอุปกรณ์ทุก Platform และกำลังได้รับความนิยมในขณะนี้ ใครที่เป็น Web Desgin ยังไม่รู้จักก็ถือว่าเชยมากๆ ในนาทีนี้เลยหล่ะครับ (อิอิ ไม่รู้มาเรียนรู้ที่นี้ได้ครับ) จุดประสงค์เพื่อ ทำให้ผู้ใช้งานสามารถดูเนื้อหาของเว็บไซต์ได้ง่ายที่สุดและแสดงผลหน้าเว็บในขนาดหน้าจอที่แตกต่างกันไป โดยที่ผู้ใช้งานไม่ต้องมาถ่างๆหน้าจอเพื่อดูข้อมูลที่ขนาดเล็กจิ๊ดเดียวอีกแล้วหล่ะครับ ซึ่งมีข้อดีคือ พัฒนาครั้งเดียวไปเลย ทำให้ประหยัดเวลา และค่าใช้จ่ายอย่างมากเลยครับ แต่สามารถปรับการแสดงผลให้เหมาะสมกับอุปกรณ์อื่นๆ เช่นเดียวกับการพัฒนา2เวอร์ชั่น คือ คอมพิวเตอร์ กับ มือถือ เลยทีเดียว
Responsive Web Design ทำได้อย่างไร?
Responsive Web Design ไม่ได้เป็นภาษาหรือเทคโนโลยีอะไรหรอกครับ แต่มันเป็นการนำเทคนิคหลายๆอย่างมารวมกัน ซึ่งแต่ละเทคนิคถ้าพูดถึง ชาว Web Design ก็จะรู้จักกันเป็นอย่างดีเลยหล่ะครับนั่นก็คือ CSS, HTML และ JavaScript ครับมารวมๆกันจนเกิดเป้น Responsive Web Design
หลักการของ 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 ทำให้เสียเวลาโดยไม่จำเป็น
from: www.siamhtml.com/responsive-web-design
www.phpdevthailand.com/archive
www.artaddesign.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น