สินค้า

ตู้สาขาโทรศัพท์ เครื่องสแกนนิ้วมือ เครื่องสแกนใบหน้า เครื่องสแกนระบบการ์ด เครื่องอ่านการ์ด กล้องวงจรปิด AVTECH กล้องวงจรปิด Hi-View กล้องวงจรปิด Hikvision กล้องวงจรปิด INNEKT กล้องวงจรปิด dahua กล้องวงจรปิด FUJIKO กล้องวงจรปิด KENPRO กล้องจรปิด Panasonic กล้องติดรถยนต์ โปรแกรมสแกนไวรัสลิขสิทธิ์แท้ ระบบ WiFi Internet สัญญาณกันขโมยบ้าน / ออฟฟิศ เครื่องสำรองไฟฟ้า ป้ายโฆษณา LED (ขาย-ให้เช่า) ป้ายไฟวิ่ง แผงไม้กั้นประตู หมู่บ้าน ,ทางเข้า ทางออก Car Parking System Video Door Phone Wirelss Video Door Phone Digital Door Lock งานเข้าหัวไฟเบอร์ ออฟติค Video Conference ประตูรีโมท ประตูบานเลื่อนอัตโนมัติ (Auto door) ประตูอัตโนมัติ (Folding Gate) ระบบแจ้งเตือนเพลิงไหม้ (fire alarm) อุปกรณ์ดับเพลิง อุปกรณ์ความปลอดภัยส่วนบุคคล ตู้เซฟ HomeXpert รั้วไฟฟ้า ระบบห้องประชุม ระบบ POS Network accessories ประตูรีโมทเลื่อน ประตูรีโมทสวิง ประตูยืดอัตโนมัติ ประตูปีกผีเสื้อ แขนกั้นรถอัตโนมัติ เครื่องตรวจอาวุธ ประตูอัตโนมัติ ประตูโรงรถ เสากั้นการบุกรุก กลอนประตูดิจิตอล เครื่องอ่านการ์ดเปิด-ปิดไฟ วิดีโอ คอนเฟอเร็นซ์ นาฬิกายาม FIber Optic Accessries RACK 19" LAN CABLE ระบบประตูกั้นทางเดิน New Product

List All Products

จำนวนผู้เข้าชม

/home/allsulu/domains/allsolutionstech.com/public_html/administrator/components/com_vvisit_counter/helpersPlease reinstall [Vinaora Visitors Counter] component53
RESPONSIVE WEB DESIGN คืออะไร PDF Print E-mail
Written by super admin   
Thursday, 19 August 2021 15:00

 

ความหมาย และ ความสำคัญ ของ RESPONSIVE WEB DESIGN

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

ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobile version เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา

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

 

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

 

RESPONSIVE WEB DESIGN ไม่ใช่พระเจ้า!

 

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

 

ถึงตอนนี้ เพื่อนๆ คงจะพอเข้าใจเกี่ยวกับ Responsive Web Design อย่างคร่าวๆ แล้วใช่มั้ยครับ ถ้าใครสนใจจะเริ่มลงมือทำจริงๆ สามารถอ่านต่อได้ที่ Responsive web design ง่ายๆ ใน 6 ขั้นตอน ครับ

 

เว็บไซต์ของเราใช้คุกกี้เพื่อมอบประสบการณ์การท่องเว็บและข้อมูลที่เกี่ยวข้อง ก่อนใช้งานเว็บไซต์ของเราต่อไป คุณตกลงและยอมรับ Cookie Policy & Privacy.