ทำเว็บให้รองรับมือถือ

ทำเว็บให้รองรับมือถือ (Responsive Web Design)

สมัยก่อนเวลา ทำเว็บให้รองรับมือถือ เราจะใช้วิธีการสร้างเว็บไซต์ขึ้นมา 2 เว็บ ให้เว็บนึงแสดงผลสำหรับคอมพิวเตอร์ และอีกเว็บจะใช้เป็น subdomain ให้แสดงผลสำหรับมือถือโดยเฉพาะ เช่น m.themevilles.com แต่ปัจจุบันมีการพัฒนาทางโค๊ดดิ้งหรือการเขียนภาษาทั้งทาง html, css มากขึ้น จึงเกิดคำว่า Responsive web หรือที่เราเรียกการสร้างเว็บแบบ Mobile First เข้ามาแทนที่การเขียนเว็บแบบดั้งเดิม ดังนั้นเราจะมารู้จักเรื่อง Responsive web กันหน่อยดีกว่า

Resposive web

Responsive Web  คือ เว็บไซต์ที่สามารถแสดงผลบนอุปกรณ์ที่แตกต่างกัน เช่น มือถือ แท็บเลต และคอมพิวเตอร์ ด้วยการออกแบบเว็บไซต์ด้วยโค๊ดตัวเดียวกันและใช้ URL เดียวกัน
ตัวอย่าง Responsive web แสดงผลบนมือถือ
ตัวอย่าง Responsive web แสดงผลบนมือถือ

การสร้างเว็บไซต์ Responsive

การสร้างเว็บไซต์ Responsive นั้นจะใช้เทคนิคในการกำหนค่าความกว้างเพียงตัวเดียวในชั้นบนสุดตามขนาดของอุปกรณ์นั้นๆ แล้วทำการแบ่งสัดส่วนของเว็บไซต์เป็นแบบ %  หรือ Grid ไล่ลงมาตามลำดับ เช่น มือถือ ขนาด 480px เราก็จะนำตัวเลขนี้เป็นค่าบนสุด เมื่อทำการแบ่งเนื้อหาลงมาในส่วนของ Content และ Sidebar ก็จะทำการกำหนดค่าให้เป็นสัดส่วน เช่น 70% สำหรับเนื้อหา และ 30% สำหรับแถบด้านข้าง Sidebar
การทำ Responsive นั้น จะใช้ในส่วนของ Media Queries ซึ่งเป็นเครื่องมือของ CSS เข้ามาจัดการในการระบุขอบเขตการใช้งานของโค๊ด CSS ในแต่ละอุปกรณ์ โดยจะกำหนดในลักษณะเป็นช่วงหรือระยะขนาดของอุปกรณ์นั้นๆ ยกตัวอย่างเช่น ในกรณีของมือถือส่วนใหญ๋จะมีขนาดเล็กกว่า 480px เราก็จะเขียน Media Queries ว่า @media only screen and (max-width: 480px) ทำการครอบในส่วนของ CSS ที่ต้องการให้แสดงผลในส่วนของมือถือนี้ 
หากเราต้องการให้แสดงผลในส่วนของแท็บเลต เราก็อาจจะกำหนดให้ขนาดของ Media Queries อยู่ระหว่าง 480px ถึง 992px และหากเราต้องการให้แสดงผลสำหรับคอมพิวเตอร์ก็อาจจะกำหนดให้ขนาดของ Media Queries อยู่ที่ 993px ขึ้นไปเป็นต้น
ตัวเลขที่เรากำหนดนี้ เราสามารถที่จะกำหนดได้เองตามใจที่เราต้องการ ตัวอย่างด้านล่างคือการกำหนดขนาดของ Media Queries โดยอ้างอิงมาจากเว็บ w3schools
ตัวอย่าง Media Queries
ตัวอย่าง Media Queries

การแบ่งพื้นที่แบบ Grid

เราจะทำการแบ่งพื้นที่แบบ Grid โดยจะใช้เทคนิค Column เข้ามาจัดการ โดยอาจจะกำหนดให้หนึ่งแถว (Row) ของเนื้อหาประกอบไปด้วยคอลัมน์จำนวน 12 คอลัมน์ ซึ่งแต่ละคอลัมน์จะมีพื้นที่เท่าๆ กัน ยกตัวอย่างเช่น ขนาดของหน้าจอที่ 600px จะมีขนาดของคอลัมน์ 1 คอลัมน์ที่ 8.33% เป็นต้น ซึ่งเราจะสามารถเขียนได้ในลักษณะตามรูป
การแบ่งคอลัมน์แบบ Grid
การแบ่งคอลัมน์แบบ Grid
สำหรับในส่วนรูป เราจะกำหนดให้ขนาดของรูปมีความยืดหยุ่นตามขนาดของอุปกรณ์ที่ใช้เช่นเดียวกันกับคอลัมน์ต่างๆ โดยจะให้รูปของเรามีขนาดเป็น 100% และขนาดของความสูงเป็นแบบ Auto

แปลงเว็บเก่าให้กลายเป็น responsive

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

การแปลงเว็บเก่าให้กลายเป็น Responsive นั้น จึงจะต้องมีความเข้าใจในส่วนของโครงสร้างเว็บ และการดีไซน์ในส่วนของ CSS ควบคู่กันไป

responsive web banner

หากท่านใดมีความประสงค์ที่ต้องการจะเปลี่ยนเว็บเก่าของท่านให้สามารถทำงานแบบ Responsive ได้ สามารถที่จะแจ้งความต้องการโดยติดต่อผ่านทางหน้าติดต่อเรา หรือผ่านทางกล่องขอความ inbox ของเฟสบุ๊ค Themevilles WordPress ได้ครับ ทางเรามีทีมงานที่สามารถทำการปรับแต่งเว็บให้รองรับมือถือและแท็บเลตได้โดยที่เว็บของท่านไม่ต้องปิดระบบการทำงาน

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.