Responsive web design วิธีทํา

Responsive Web Design คืออะไร?

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

ความเป็นมาของ Responsive Web Design

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

ต่อมาจึงมีการออกแบบเว็บไซต์สำหรับอุปกรณ์มือถือที่เรียกว่า "Moblie" แยกออกมาจากเว็บหลัก โดยสังเกตได้จาก URL ของเว็บไซต์ที่มักขึ้นต้นด้วย "m." (เช่น m.example.com) หรือใช้ "/m/" หรือ "/mobile/" ต่อท้าย (เช่น example.com/m/ หรือ example.com/mobile/) เป็นต้น

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

หลักการทำงานของ Responsive Web Design

การออกแบบเว็บไซต์แบบ Responsive นี้จะใช้การกำหนดขนาดของเว็บไซต์ด้วย HTML, CSS3 และ JavaScript ซึ่งจะสามารถปรับขนาดของเว็บไซต์ได้อัตโนมัติตามขนาดของอุปกรณ์ที่ใช้งานอยู่ หน้าเว็บไซต์จะมีเพียง 1 URL เท่านั้น ไม่จำเป็นต้องแยกเว็บไซต์เป็นเวอร์ชั่น Desktop และ Mobile อีกต่อไป

เมื่อเปิดเว็บไซต์ด้วยหน้าจอคอมพิวเตอร์ โน้ตบุ๊ค หรือจอโทรทัศน์ที่มีขนาดจอกว้าง เว็บไซต์แบบ Responsive Web Design นี้ก็จะแสดงผลได้อย่างเต็มจอสวยงาม และเมื่อเปิดด้วยแท็บเล็ตที่มีหน้าจอขนาดเล็กลงมา เว็บไซต์ก็ยังสามารถปรับขนาดตามได้อย่างพอดี

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

ข้อดีของ Responsive Web Design

• สะดวกและลดความยุ่งยาก รวมถึงช่วยลดค่าใช้จ่ายในการดูแลปรับปรุงเว็บไซต์ เพราะมีเพียงแค่เว็บไซต์เดียว ไม่ต้องแก้ไขหน้าเว็บหลายๆ หน้า และไม่เปลืองเซิร์ฟเวอร์
• ทำให้เว็บไซต์รองรับอุปกรณ์มือถือไปในตัว หรือที่เรียกว่า "Mobile-Friendly" ซึ่งปัจจุบันจำนวนผู้ใช้งานเว็บไซต์จากโทรศัพท์มือถือนั้นกำลังเพิ่มมากขึ้น
• ผู้ใช้สามารถใช้งานเว็บไซต์ได้ง่าย หรือที่เรียกว่า "User-Friendly" ไม่ว่าจะเปิดเว็บไซต์ด้วยอุปกรณ์หรือขนาดหน้าจอใดๆ ก็ตาม
• สนับสนุนการทำ SEO (Search Engine Optimization) กับ Google ทั้งเวอร์ชั่น Desktop และ Mobile ในเว็บไซต์เดียว

ข้อควรระวังในทำ Responsive Web Design

• ควรทดสอบเปิดเว็บไซต์ด้วยหน้าจอขนาดต่างๆ ก่อนใช้งานจริง เพราะอาจมีการแสดงผลผิดไปจากตำแหน่งที่ต้องการได้
• ควรกำหนดการแสดงและซ่อนส่วนประกอบต่างๆ ของเว็บไซต์ เพราะเราไม่สามารถแสดงหน้าเว็บไซต์ได้เหมือนกันในทุกขนาดหน้าจอ เช่น เมนู รูปภาพ โฆษณา เป็นต้น
• ควรระวังการจัดเรียงเนื้อหาในเว็บไซต์เมื่อเปิดด้วยโทรศัพท์มือถือ เพราะขนาดจอที่แคบทำให้ต้องเรียงเนื้อหาต่อกันยาวจนเกินไป
• ควรเตรียมรูปให้เหมาะกับหน้าจอ เมื่อเปิดด้วยหน้าจอที่ขนาดเล็ก ก็ให้โหลดรูปที่มีขนาดเล็ก ไม่อย่างนั้นแล้วจะทำให้เสียเวลาโหลดซึ่งจะส่งผลเสียต่อผู้ใช้ และได้คะแนน PageSpeed ต่ำซึ่งเป็นคะแนนจากการวัดความเร็วในการโหลดหน้าเว็บไซต์จาก Google ซึ่งจะส่งผลเสียต่อการทำ SEO อีกด้วย

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

ติดต่อฝ่ายขาย
095-524-1193 (คุณพิม)
065-592-3564 (คุณปาล์ม)

แบบฟอร์มสำหรับติดต่อสอบถาม

• เราขออนุญาติไม่รับเว็บไซต์หรือธุรกิจที่เกี่ยวข้องกับการพนัน เพศ และสินค้าผิดกฏหมายละเมิดลิขสิทธิทรัพย์สินทางปัญญา เช่น สินค้าเลียนแบบ เป็นต้น
• หากต้องการสอบถามเกี่ยวกับบริการ SEO (Search Engine Optimization) โปรโมทเว็บไซต์ให้ติดอันดับ
  กรุณาระบุตัวอย่าง Keyword ในช่อง "ข้อความ" เพื่อความรวดเร็วในการนำเสนอบริการที่เหมาะสม

บทความแนะนำ

• อยากมีเว็บไซต์เป็นของตัวเอง ต้องรู้อะไรบ้าง?
• อยากเปิดร้านค้าออนไลน์ เลือกเว็บขายของออนไลน์แบบไหนดี?
• ข้อที่ควรระวังเมื่อสร้างเว็บไซต์ด้วยตัวเอง

ระบบ Grid มีประสิทธิภาพในการช่วยให้ Web designer ออกแบบ Layout ของเว็บไซต์ได้ดียิ่งขึ้น ยิ่งเข้าสู่ยุคของ Responsive Web Design ระบบ Grid ก็พัฒนาให้ตอบโจทย์ความต้องการของพวกเราได้มากขึ้น แต่ถ้าเราต้องการปรับความเข้าใจในการใช้ Grid กับ Responsive Layout มีอะไรที่เราต้องรู้เพิ่มเติมนะ

ต้องขอขอบคุณ Adam Kaplan มีเทคนิคดีๆ ที่น่าสนใจสำหรับคนที่คล่องตัวในการใช้ CSS ออกแบบเว็บไซต์อยู่แล้ว และอนุญาติให้ผมสรุปเป็นภาษาไทย พร้อมยก code ตัวอย่างจาก page ของเขามาเผื่อเป็นประโยชน์กับเพื่อนๆ ดังนี้

1. ใช้ Normalize.css

เพื่อความชัวร์ว่า Web Browser ทุกเจ้าจะแสดงผล CSS ของเราเหมือนกันหมด แนะนำให้ใช้ Normalize.css ช่วยโดยใส่ก่อน CSS ไฟล์อื่น

<link rel="stylesheet" href="/css/normalize.css" type="text/css">
<link rel="stylesheet" href="/css/grid.css" type="text/css">

2. ใช้ Viewport meta tag

เพื่อให้ใช้ media queries ได้ชัวร์ๆ ใส่ Viewport Meta tag ในส่วน <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

3. พิจารณา box-sizing: border-box เป็นตัวเลือกในการคิด Layout ของ Box Model

ระบบ Box Model ที่เป็นพื้นฐานการวาง layout ของ web ยังมีผลเช่นเดิม

แต่ก็มีทางเลือก 2 แบบคือ

1. แบบปกติ: จะวาด padding และ border ต่อจากขนาดของ width ใน Box model
2. แบบ border-box: จะวาด padding และ border ให้อยู่ภายในขนาด width ที่กำหนด (ยังไม่นับ Margin เหมือนเดิม)

ซึ่งถ้าเลือกแบบ border-box คุณ Adam แนะนำให้ใส่ CSS Rule แบบด้านล่างลงไปด้านบนสุดของ CSS ทั้งมวล

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

4. ใช้ Container เพื่อความง่าย

โดยปกติผมและเพื่อนๆ หลายๆ คนก็ใช้ Container (หรืออีกชื่อคือ Wrapper) อยู่แล้ว พอมายุค Responsive Web ก็ปรับใช้ได้ไม่ยาก การรวมทุก element ในเว็บเพจไว้ใน Container สักตัวจะทำให้การแปลง Responsive Web Layout ง่ายกว่าแบบที่ไม่ใช้มาก

.container {
margin: 0 auto;
max-width: 48rem;
width: 90%;
}

5. สร้าง Column และกำหนดขนาด

แนวคิดการแบ่ง column ในระบบ grid จะมีบทบาทมาก โดยเราสามารถแบ่ง column ใน layout สำหรับมือถือสมาร์ทโฟน (Mobile-First) เป็น stack เรียงกันตามธรรมชาติของ Web layout ก็คือเรียงจากบนลงล่าง สำหรับ block element

แล้วค่อยมาใส่ float:left  เมื่อขนาดหน้าจอการแสดงผลใหญ่ขึ้น

HTML:

<div class="container">
  <div class="row clearfix">
    <div class="column half">
      <!-- Your Content -->
  </div>
  <div class="column half">
      <!-- Your Content -->
  </div>
 </div>
</div>

 CSS:

@media (min-width: 40rem) {
.column {
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 24.95%; }
.column.flow-opposite { float: right; }
}

6. สร้าง Row (แถว) ครอบ Column ไว้เพื่อป้องกันการซ้อนทับกันในแนวดิ่ง

ใช้ Clearfix กับ Row ที่ครอบ Column ไว้ เป็นเทคนิคเดียวกันกับที่คิดค้นโดย Nicolas Gallagher

CSS:

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

สามารถเข้าไปดูรายละเอียดเพิ่มเติม ได้ใน Link ของ Adam เลยครับ

http://www.adamkaplan.me/grid/

[sb name=”Bottom-Post-Ads”]

Related