090-292-1719
  golly design ทำเว็บราคาถูก บริษัทรับทำเว็บราคาถูก รับทำเว็บไซต์ ทำเว็บบริษัทราคาถูก
รับโปรโมทเว็บไซต์ด้วย google adwords รับโปรโมทเว็บไซต์ด้วย google adwords รับโปรโมทเว็บไซต์ด้วย SEO รับออกแบบเว็บไซต์ รับจดโดเมนเนม เช่าพื้นที่เว็บไซต์

     บทความทั้งหมด >> Responsive web design คืออะไร


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

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

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

ไว้คราวหน้าผมจะมา สอนการทำ Responsive Web Design กันนะครับ
ขอบคุณที่ติดตามนะครับ แล้วจะมาเขียนบทความดี ๆ ให้อ่านกันเรื่อยๆ ครับ


ยังไง ฝากติดตาม หรืออ่านบทความ เพิ่มเติม คลิกที่นี่
Golly-design รับทำเว็บไซต์ ราคาถูก


     บทความทั้งหมด >> Responsive web design คืออะไร
      บทความที่น่าสนใจ
ข้อดีและข้อควรคำนึง
ในการทำเว็บไซต์
ทิศทางการทำ
seo ปี 2015
การทำ Backlink
ข้อแนะนำในการ
ทำเว็บไซต์


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

ขอบคุณที่ไว้วางใจให้เราบริการ :)

 
Tel : 090-292-1719
Line : @gollydesign
info.gollydesign@gmail.com

164/9 หมู่ 11 ซ.สุขสวัสดิ์ 92
ต.ในคลองบางปลากด อ.พระสมุทร
เจดีย์ จ.สมุทรปราการ 10290

Copyright © 2015
All Rights Reserved.