ทำเว็บให้รองรับมือถือ (Responsive Web Design)
84 | | . | ความรู้, HTML and CSS, WordPress, ออกแบบเว็บไซต์ Responsive web, เว็บไซต์
สมัยก่อนเวลา ทำเว็บให้รองรับมือถือ เราจะใช้วิธีการสร้างเว็บไซต์ขึ้นมา 2 เว็บ ให้เว็บนึงแสดงผลสำหรับคอมพิวเตอร์ และอีกเว็บจะใช้เป็น subdomain ให้แสดงผลสำหรับมือถือโดยเฉพาะ เช่น m.themevilles.com แต่ปัจจุบันมีการพัฒนาทางโค๊ดดิ้งหรือการเขียนภาษาทั้งทาง html, css มากขึ้น จึงเกิดคำว่า Responsive web หรือที่เราเรียกการสร้างเว็บแบบ Mobile First เข้ามาแทนที่การเขียนเว็บแบบดั้งเดิม ดังนั้นเราจะมารู้จักเรื่อง Responsive web กันหน่อยดีกว่า
Resposive web
Responsive Web คือ เว็บไซต์ที่สามารถแสดงผลบนอุปกรณ์ที่แตกต่างกัน เช่น มือถือ แท็บเลต และคอมพิวเตอร์ ด้วยการออกแบบเว็บไซต์ด้วยโค๊ดตัวเดียวกันและใช้ URL เดียวกัน
![ตัวอย่าง Responsive web แสดงผลบนมือถือ](https://themevilles.com/wp-content/uploads/2018/07/responsive-169x300.png)
การทำให้เว็บรองรับมือถือ
เริ่มแรกก่อนจะเริ่มทำให้เว็บไซต์ของเราเป็น Responsive ได้ เราจะต้องทำให้เว็บของเราสามารถรองรับการใช้งานผ่านมือถือก่อน วิธีการก็คือ เราจะต้องทำการเพิ่มแท็ก <meta> ที่ระบุว่าให้เราสามารถดูเว็บตามขนาดอุปกรณ์ที่ใช้งาน (Device Width) เข้าไปในส่วนของแท็ก <head> วิธีการเชียนเป็นตามโค้ดด้านล่างครับ
<meta name="viewport" content="width=device-width, initial-scale=1">
การสร้างเว็บไซต์ Responsive
หลังจากเราได้ทำกาสร้างแท็ก <meta> แล้ว คราวนี้เรามาดูใเรื่องของการเนื้อหาเว็บไซต์กันบ้าง การสร้างเว็บไซต์ Responsive นั้นจะใช้เทคนิคในการกำหนค่าความกว้างเพียงตัวเดียวในชั้นบนสุดตามขนาดของอุปกรณ์นั้นๆ แล้วทำการแบ่งสัดส่วนของเว็บไซต์เป็นแบบ % หรือ Grid ไล่ลงมาตามลำดับ เช่น คอมพิวเตอร์ ขนาด 1200px เราก็จะนำตัวเลขนี้เป็นค่าบนสุด เมื่อทำการแบ่งเนื้อหาลงมาในส่วนของเนื้อหา (Content) และแถบด้านข้าง (Sidebar) ก็จะทำการกำหนดค่าให้เป็นสัดส่วน เช่น 70% สำหรับเนื้อหา และ 30% สำหรับแถบด้านข้าง
การทำให้เว็บไซต์รองรับมือถือนั้นจะใช้เครื่องมือของ CSS ที่ชื่อ Media Queries เข้ามาจัดการในการระบุขอบเขตการใช้งานของโค๊ด CSS ในแต่ละอุปกรณ์ โดยจะกำหนดในลักษณะเป็นช่วงหรือระยะขนาดของอุปกรณ์นั้นๆ ยกตัวอย่างเช่น ในกรณีของมือถือที่มีขนาดของหน้าจอ 480px เราต้องการให้ขนาดของหัวข้อของไซต์มีขนาด 25px ซึ่งไม่เท่ากับคอมพิวเตอร์ที่มีขนาด 42px ก็จะเขียนโค้ด CSS เพื่อทำการระบุขอบเขตดังนี้
@media only screen and (max-width: 480px) {
.site-title {
font-size: 25px;
}
}
หากเราต้องการให้แสดงผลในส่วนของแท็บเลต เราก็อาจจะกำหนดให้ขนาดของ Media Queries อยู่ระหว่าง 480px ถึง 992px และหากเราต้องการให้แสดงผลสำหรับคอมพิวเตอร์ก็อาจจะกำหนดให้ขนาดของ Media Queries อยู่ที่ 993px ขึ้นไปเป็นต้น ตัวเลขที่เรากำหนดนี้ เราสามารถที่จะกำหนดได้เองตามใจที่เราต้องการ ตัวอย่างด้านล่างคือการกำหนดขนาดของ Media Queries โดยอ้างอิงมาจากเว็บ w3schools
/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { ... } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { ... } /* Medium devices (landscrape tablets, 768px and up) */ @media only screen and (min-width: 768px) { ... } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { ... } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { ... }
การแบ่งพื้นที่แบบ Grid
นอกจากการใช้ขนาดของอุปกรณ์ทำการจัดการเว็บไซต์ให้รองรับมือถือแล้ว เรายังสามารถทำการแบ่งพื้นที่ของหน้าจอ โดยใช้เทคนิคกริด (Grid) ทำการแบ่งคอลัมน์ (Columns) เข้ามาจัดการ
@media only screen and (min-width: 1200px) { ... } .col-xl-1 { width: 8.33% } .col-xl-2 { width: 16.66% } .col-xl-3 { width: 25% } .col-xl-4 { width: 33.33% } .col-xl-5 { width: 41.66% } .col-xl-6 { width: 50% } .col-xl-7 { width: 58.33% } .col-xl-8 { width: 66/66% } .col-xl-9 { width: 75% } .col-xl-10 { width: 83.33% } .col-xl-11 { width: 91.66% } .col-xl-12 { width: 100% } }
โดยทั่วไปการแบ่งพื้นที่เป็นคอลัมน์นั้นอาจจะกำหนดให้หนึ่งแถว (Row) ของเนื้อหาประกอบไปด้วยคอลัมน์จำนวน 12 คอลัมน์ (บางที่แบ่งเป็น 10 คอลัมน์) ซึ่งแต่ละคอลัมน์จะมีพื้นที่เท่าๆ กัน ยกตัวอย่างเช่น ขนาดของหน้าจอที่ 1200px จะมีขนาดของคอลัมน์ 1 คอลัมน์ที่ 8.33% ซึ่งหมายถึงเราจะมีคลาสที่ชื่อ .col-xl-1 ที่มีขนาดคอลัมน์นี้อยู่ทั้งหมด 12 คอลัมน์ในหนึ่งแถว แต่ถ้าหากเราต้องการให้ 1 แถวมี 3 คอลัมน์ เราจะต้องมีพื้นที่แต่ละคอลัมน์เพียง 33.33% ซึ่งหมายถึง เราจะใช้คลาสที่ชื่อ .col-xl-4 จำนวน 3 ครั้งในหนึ่งแถว
เมื่อเราทำการแบ่งคอลัมน์แล้ว เราสามารถที่จะกำหนดขนาดของรูปให้อยู่ภายในคอลัมน์นั้นๆ แทน โดยเราจะต้องกำหนดให้รูปของเรามีค่า CSS โดยมีขนาดความกว้างสูงสุดเป็น 100% และความสูงของรูปเป็น Auto เพียงแค่นี้ก็จะเสร็จสิ้นในส่วนของการปรับแต่งรูปให้เว็บรองรับมือถือแล้วครับ
.img-responsive { max-width: 100%; height: auto; }
เมนูรองรับในมือถือ
หากเราเคยเห็นเมนูในมือถือ เมนูนั้นจะมีลักษณะเป็นเส้นขีดสามเน้นแนวนอน ที่เรียกว่า Hamburger Menu เมื่อเราทำการกดปุ่มเมนูนั้น รายการเมนู (Menu List) ก็จะเลื่อนออกมาแสดงให้เราเห็น โดยอาจจะเลื่อนออกมาจากด้านข้างหรือขยายออกมาด้านล่างก็ได้ การปรับแก้เมนูให้รองรับมือถือนั้นจะต้องทำการแก้ในส่วนของ HTML เพียงอย่างเดียวเท่านั้น ดังนั้นคนที่จะทำการแก้ไขจะต้องมีความรู้ในเรื่องของการโค้ดดิ้งพอสมควร ตัวอย่างด้านล่างนี้เป็นการสร้าง Hamburger Menu ของ Bootstrap ซึ่งเป็นเครื่องมือที่ช่วยเราจัดการในส่วนของ HTML, CSS และ JS ของเว็บไซต์
<!--Navbar--> <nav class="navbar navbar-light light-blue lighten-4"> <!-- Navbar brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Collapse button --> <button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i class="fas fa-bars fa-1x"></i></span></button> <!-- Collapsible content --> <div class="collapse navbar-collapse" id="navbarSupportedContent1"> <!-- Links --> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <!-- Links --> </div> <!-- Collapsible content --> </nav> <!--/.Navbar-->
ตารางข้อมูลในมือถือ
ตารางข้อมูลในมือถือเป็นอีกส่วนหนึ่งที่สำคัญ หากเราไม่ได้ทำการปรับแต่งตารางให้รองรับมือถือ เวลาเปิดดูจะเห็นว่าตารางจะถูกบีบและข้อความในตารางจะไม่สามารถอ่านได้ง่าย เนื่องจากตัวอักษรก็บีบลงมาด้วย ยิ่งตารางมีคอลัมน์มากเท่าไร ยิ่งทำให้อ่านได้ยากมากขึ้นเท่านั้น วิธีการแก้ในส่วนของตารางนั้นจะต้องใช้เทคนิค Scroll bar แบบแนวนอนเข้ามาช่วยเพื่อหลีกหนีปัญหาดังกล่าว โดยเราจะต้องทำการใส่โค้ด overflow-x: auto ครอบตารางที่เราต้องการให้เลื่อนไปมาครับ
<div style='overflow-x:auto'> <table cellpadding=5 border=1 cellspacing=0> <tr bgcolor=d7d7d7> <td>Location</td> <td>This</td> <td>Size</td> </tr> <tr> <td>Data Location</td> <td>More Data</td> <td>More Data</td> </tr> </table> </div>
แปลงเว็บเก่าให้กลายเป็น responsive
ปัจจุบันจะเห็นได้ว่าเว็บส่วนใหญ่มีการแสดงผลเป็น Responsive ไปเยอะพอควรแล้ว เว็บเก่าๆ ที่ยังเป็นแบบเดิมจึงจะต้องทำการปรับตัวให้ทันต่อเทคโนโลยีนี้ เราจะเห็นได้ว่าเว็บที่ทำ Responsive นั้น Google จะให้ความสำคัญมากกว่าเว็บที่สามารถดูแบบคอมพิวเตอร์ได้เพียงอย่างเดียว ซึ่งการปรับเว็บตัวเองนี้จะทำให้ลำดับใน Google ดึกว่าเว็บปกติหรือเว็บที่ไม่รองรับมือถือด้วย
ในกรณีที่ผู้อ่านอยากจะทำการแปลงเว็บเก่าให้กลายเป็น resonsive เบื้องต้นจะต้องมีความรู้ในเรื่องของ HTML และ CSS เป็นลำดับแรก และต้องเข้าใจในโครงสร้างของเว็บไซต์ที่เรากำลังทำการแก้ไข เพราะความยากของการแปลงเว็บเก่าให้รองรับมือถือนั้นจะอยู่ที่เราจะต้องทำการแก้โครงสร้างของเว็บไซต์ทั้งหมด แล้วนำโครงสร้างใหม่ใส่เข้าไปแทนที่ ซึ่งต้องใช้เวลาและความรู้ในการปรับปรุงเว็บไซต์ของเรา หากท่านใดมีความประสงค์ที่ต้องการจะเปลี่ยนเว็บเก่าของท่านให้สามารถทำงานแบบ Responsive ได้ สามารถที่จะแจ้งความต้องการโดยติดต่อผ่านทางหน้าติดต่อเรา หรือผ่านทางกล่องขอความ inbox ของเฟสบุ๊ค Themevilles WordPress ได้ครับ ทางเรามีทีมงานที่สามารถทำการปรับแต่งเว็บให้รองรับมือถือและแท็บเลตได้โดยที่เว็บของท่านไม่ต้องปิดระบบการทำงาน