ทำเว็บให้รองรับมือถือ (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 ได้ เราจะต้องทำให้เว็บของเราสามารถรองรับการใช้งานผ่านมือถือก่อน วิธีการก็คือ เราจะต้องทำการเพิ่มแท็ก <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 ได้ครับ ทางเรามีทีมงานที่สามารถทำการปรับแต่งเว็บให้รองรับมือถือและแท็บเลตได้โดยที่เว็บของท่านไม่ต้องปิดระบบการทำงาน