Open in app

Sign in

Write

Sign in

Responsive Web Design (RWD)

Faruslan Waming
Lotus’s IT
Published in
7 min readNov 27, 2023
Photo by Successive Digital

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

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

Responsive Web Design คืออะไร และทำไมต้องมี

Photo by Daniel Schwarz

Responsive Web design หรือ RWD เป็นตัวช่วยในการพัฒนาเว็บไซต์ โดยจะมีจุดมุ่งหมายเพื่อให้ผู้ใช้งานสามารถเข้าชมเว็บไซต์ได้อย่างมีประสิทธิภาพ รวมถึงเว็บไซต์สามารถแสดงผลได้อย่างดีบนทุกอุปกรณ์ต่างๆ โดยเราจะใช้ Layout ที่มีความยืดหยุ่น และใช้รูปภาพที่สามารถปรับขนาดได้ ซึ่งคุณสามารถทำการพัฒนาเว็บไซต์ด้วยการเขียนเว็บไซต์โดยใช้ HTML และ CSS ในการควบคุมการแสดงผลเป็นหลัก เพื่อให้แยกการแสดงผลได้อย่างสวยงามตามทุกขนาดของหน้าจอ ไม่ว่าจะเป็นสมาร์ทโฟน แท็บเล็ต แล็ปท็อป และคอมพิวเตอร์ หรืออื่นๆ เป็นต้น

เหตุผลที่จำเป็นต้องใช้ Responsive Web Design (RWD)

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

ประโยชน์ของการพัฒนาเว็บไซต์ด้วย Responsive Web Design

  1. พัฒนาเว็บไซต์เพียงแค่ครั้งเดียว จะสามารถรองรับได้ทุกอุปกรณ์
  2. เพิ่มความรวดเร็วในการดูแล หรือจัดการเว็บไซต์
  3. ประหยัดเวลาและค่าใช้จ่าย โดยทำหน้าต่างแยกกันระหว่าง Mobile และ Desktop site
  4. ได้รับการรับรองจาก Google ซึ่งจะช่วยติด Index google ในหน้าเดียว โดยได้ทั้งสองหน้าพร้อมกัน คือแบบ Desktop และ Mobile site
  5. สร้างประสบการณ์การใช้งานที่ดีให้กับผู้เข้าชมเว็บไซต์

ข้อจำกัดของการพัฒนาเว็บไซต์ด้วย Responsive Web Design

  1. สำหรับการเขียนโค้ดให้สามารถรองรับหลาย Devices พร้อมกัน อาจทำให้เกิดปัญหาได้ เช่น โทรศัพท์มือถือมีหน้าจอขนาดเล็ก
  2. ในการซ่อนเนื้อหาที่ไม่มีความจำเป็น เช่น โฆษณาต่างๆ ซึ่งในบางเว็บบราวเซอร์อาจจะยังมีการโหลดข้อมูลเหล่านี้และเข้ามาแสดงผลอยู่ด้วย
  3. ในเรื่อง Image Resizing ที่ไม่ได้ทำการไปลด File Size ของตัว Image อาจจะทำให้เวอร์ชั่นของโทรศัพท์มือถือต้องโหลดรูปแสดงผลเดียวกับบน Desktop ซึ่งทำให้เสียเวลาในการโหลดโดยไม่จำเป็น

ขั้นตอนในการทำ Responsive Web Design เป็นอย่างไร

  1. Media Queries
Example Media queries for desktop, tablet, smartphone Photo by Matteo Duò

เริ่มต้นด้วยการใช้ Media Queries เพื่อนช่วยให้คุณสามารถกำหนดสไตล์ของเว็บไซต์ของคุณ ให้เปลี่ยนแปลงตามขนาดหน้าจอ ใน CSS คุณสามารถใช้ @media rule เพื่อกำหนดสไตล์สำหรับขนาดหน้าจอที่แตกต่าง

  • ข้อดี : ช่วยให้นักพัฒนาเว็บไซต์มีความยืดหยุ่นในการปรับแต่งสไตล์ CSS
  • การใช้งาน : นักพัฒนาสามารถใช้ @media rule ใน CSSเพื่อกำหนดเงื่อนไขและปรับสไตล์ตามขนาดหน้าจอที่ต้องการ
@media only screen and (max-width: 768px) {
  /* ปรับการแต่งสไตล์สำหรับขนาดหน้าจอน้อยกว่าหรือเท่ากับ 768px */
  body {
    font-size: 14px;
  }

  /* เพิ่มการปรับแต่งอื่น ๆ ตามต้องการ */
}

2. Grid Systems และ Flexbox

Example of flexbox container Photo by Matteo Duò

Grid Systems และ Flexbox เป็นเครื่องมือที่มีประสิทธิภาพ สำหรับช่วยในการจัดวางหน้าเว็บไซต์ให้ Responsive โดย Grid Systems ช่วยในการสร้างโครงสร้างหลายคอลัมน์และ Flexbox ช่วยในการจัดการองค์ประกอบในลักษณะของแถวหรือคอลัมน์ เป็นต้น

  • ข้อดี : Flexbox ทำให้การจัดวางขององค์ประกอบในเว็บไซต์เป็นเรื่องง่าย มีความยืดหยุ่นและให้ความสามารถในการจัดการพื้นที่ได้อย่างอิสระ
  • การใช้งาน: Flexbox ใช้สำหรับจัดการกับองค์ประกอบในลักษณะของแถวหรือคอลัมน์ และ Grid Layout ใช้สำหรับการจัดลำดับแบบกริด เช่น display: flex และ flex properties เป็นต้น
.container {
  display: flex;
  justify-content: space-between;
}

.column {
  flex: 1;
}

3. Responsive Images

Example of fluid layout and fixed layout Photo by Daniel Schwarz

ทำให้รูปภาพของคุณปรับขนาด Responsive ได้ตามขนาดหน้าจอ โดยใช้ CSS properties เพื่อให้รูปภาพปรับขนาดได้ตามขนาดหน้าจอที่ต้องการ

  • ข้อดี : ช่วยลดการโหลดข้อมูลไม่จำเป็นและสามารถปรับขนาดได้ตามความต้องการ
  • การใช้งาน : ใช้ <img> tagร่วมกับ CSS propertiesเพื่อให้รูปภาพปรับขนาดตามขนาดหน้าจอ
img {
  max-width: 100%;
  height: auto;
}

4. Fluid Typography

Responsive typography Photo by ia

ทำให้ขนาดตัวอักษรปรับตัวได้ตามขนาดหน้าจอ

body {
  font-size: calc(16px + 0.5vw);
}

5. Mobile-First Design

Mobile-first design Photo by silocreativo.com

นำเสนอการออกแบบโดยให้มุมมองเฉพาะสำหรับมือถือก่อน

@media only screen and (min-width: 768px) {
  /* ปรับแต่งสไตล์สำหรับขนาดหน้าจอขนาดใหญ่ที่ขึ้น */
}

6. ทดสอบ

Photo by Successive Digital

ใช้ Google Chrome Developer Tools เพื่อทดสอบการแสดงผลของเว็บไซต์ของคุณในหลายขนาดหน้าจอ โดยการเปิด Developer Tools และเลือก Responsive Design Mode เพื่อดูหน้าเว็บไซต์ในโหมดทดสอบ

ตัวอย่าง Code Responsive Web Design โดยใช้ React JS

เริ่มต้นโดยการติดตั้งโปรเจกต์ React JS ก่อนสิ่งที่ต้องมีคือ

  • Node.js 8.10.0 หรือใหม่กว่า
  • npm 5.2 หรือใหม่กว่า

ใครยังไม่มี สามารถกดดาวน์โหลดได้ที่ https://nodejs.org/en/ เวอร์ชั่นล่าสุดที่ใหม่กว่า 8.10.0 มาติดตั้งก่อนนะครับ ซึ่งการติดตั้ง Node.js เราจะได้ npm มาพร้อมกันเลย

เช็คเวอร์ชั่น Node และ npm

ไปที่ Terminal แล้วพิมพ์คำสั่ง

node -v
-------
v21.1.0

npm -v
------
10.2.0

มาเริ่มสร้างโปรเจกต์ใหม่ด้วย create-react-app กัน

เปิด Terminal แล้วพิมพ์คำสั่งดังต่อไปนี้ สำหรับคนที่ใช้ npm 5.2 ขึ้นไป

npx create-react-app my-app
cd my-app
npm start
  • ใช้คำสั่ง npx create-react-app my-app (ชื่อโปรเจกต์ของเรา) เพื่อสร้างโปรเจกต์ใหม่ที่ชื่อว่า “my-app”
  • ใช้คำสั่ง cd my-app เพื่อเข้าไปที่โฟลเดอร์นั้น
  • เริ่มการทดสอบโปรเจกต์ ด้วยคำสั่ง npm start
  • เปิดเว็บบราวเซอร์ http://localhost:3000 ก็จะเห็นเว็บของเราทำงานได้แล้ว !

ถัดไปเรามาเริ่มสร้าง Responsive Web Design กัน โดยทำการแก้ไขไฟล์ App.js

// App.js

import React from 'react';
import { useMediaQuery } from 'react-responsive';
import MediaQuery from 'react-responsive';
import { DesktopNav, MobileNav, TabletNav } from './Component';

const Container = ({ children }) => {
  return (
    <section>
      {children}
    </section>
  );
};

const Navbar = ({ children }) => {
  return (
    <nav>
      {children}
    </nav>
  );
};

const ContentView = () => {
  return (
    <div class="body-cont">
      <div>
        <h1>Responsive Web Design</h1>
        <h2>Device Test !</h2>
        <MediaQuery minWidth={992}>
          <p>You are a desktop or laptop site</p>
        </MediaQuery>
        <MediaQuery minWidth={768} maxWidth={991}>
          <p>You're a tablet or a landscape smartphone site</p>
        </MediaQuery>
        <MediaQuery maxWidth={767}>
          <p>You're a smartphone site</p>
        </MediaQuery>
      </div>
    </div>
  );
};

const App = () => {
  const isDesktop = useMediaQuery({ minWidth: 992 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 });
  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Container>
      <Navbar>
        {isDesktop && <DesktopNav />}
        {isTablet && <TabletNav />}
        {isMobile && <MobileNav />}
      </Navbar>
      <Container>
        <ContentView />
      </Container>
    </Container>
  );
};

export default App;

ถัดไปสร้างไฟล์ใหม่ที่ชื่อว่า Component.js

// Component.js

import * as React from "react";

export function DesktopNav() {
  return (
    <nav class="desktop-nav">
      <a href="Home">Home</a>
      <a href="About">About</a>
      <a href="Contact">Contact</a>
    </nav>
  );
}

export function TabletNav() {
  return (
    <nav class="tablet-nav">
      <a href="Home">
        <svg viewBox="0 0 1024 1024" fill="currentColor" height="1.5em" width="1.5em">
          <path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" />
        </svg>
      </a>
      <a href="About">
        <svg viewBox="0 0 1024 1024" fill="currentColor" height="1.5em" width="1.5em">
          <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z" />
        </svg>
      </a>
      <a href="Contact">
        <svg viewBox="0 0 1024 1024" fill="currentColor" height="1.5em" width="1.5em">
          <path d="M594.3 601.5a111.8 111.8 0 0029.1-75.5c0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5a158.09 158.09 0 00-74.6 126.1 8 8 0 008 8.4H407c4.2 0 7.6-3.3 7.9-7.5 3.8-50.6 46-90.5 97.2-90.5s93.4 40 97.2 90.5c.3 4.2 3.7 7.5 7.9 7.5H661a8 8 0 008-8.4c-2.8-53.3-32-99.7-74.7-126.1zM512 578c-28.5 0-51.7-23.3-51.7-52s23.2-52 51.7-52 51.7 23.3 51.7 52-23.2 52-51.7 52zm416-354H768v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H548v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H328v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H96c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32zm-40 568H136V296h120v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56h148v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56h148v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56h120v496z" />
        </svg>
      </a>
    </nav>
  );
}

export function MobileNav() {
  return (
    <div class="dropdown">
      <span>
        <svg fill="none" viewBox="0 0 15 15" height="3em" width="3em">
          <path
            fill="currentColor"
            fillRule="evenodd"
            d="M7.5 3.1a.4.4 0 100 .8h7a.4.4 0 000-.8h-7zm0 2a.4.4 0 100 .8h7a.4.4 0 000-.8h-7zm-.4 2.4c0-.22.18-.4.4-.4h7a.4.4 0 010 .8h-7a.4.4 0 01-.4-.4zm.4 1.6a.4.4 0 100 .8h7a.4.4 0 000-.8h-7zm-.4 2.4c0-.22.18-.4.4-.4h7a.4.4 0 010 .8h-7a.4.4 0 01-.4-.4zM2.5 9.25L5 6H0l2.5 3.25z"
            clipRule="evenodd"
          />
        </svg>
      </span>
      <div class="dropdown-content">
        <a href="Home">Home</a>
        <a href="Contact">Contact</a>
        <a href="About">About</a>
      </div>
    </div>
  );
}

สุดท้ายตกแต่ง CSS ที่ไฟล์ index.css

// index.css

.body-cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-cont h1 {
  font-weight: 200;
  font-size: 3rem;
}

.body-cont div {
  text-align: center;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  font-size: 1.4rem;
  background-color: darksalmon;
}

.desktop-nav a {
  color: black;
  text-decoration: none;
  padding: 1rem;
}

.desktop-nav a:hover {
  background-color: cornflowerblue;
}

.tablet-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  font-size: 1.4rem;
  background-color: darksalmon;
}

.tablet-nav a {
  color: black;
  font-size: 1em;
  text-decoration: none;
  padding: 1rem;
}

.tablet-nav a:hover {
  background-color: cornflowerblue;
}

.dropdown {
  display: flex;
  justify-content: left;
  align-items: center;
  min-height: 10vh;
  font-size: 1.4rem;
  padding: 1rem;
  background-color: darksalmon;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 0px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  display: block;
  font-size: 1em;
  text-decoration: none;
  padding: 1rem;
}

.dropdown-content a:hover {
  background-color: cornflowerblue;
}

.dropdown:hover .dropdown-content {
  display: block;
  margin-top: 105px;
  margin-left: 30px;
}

ทำการรันโปรเจกต์ แล้วทดสอบ Responsive Web Design กัน

ไปที่ Terminal แล้วพิมพ์คำสั่ง

npm start

Desktop or Laptop site

Tablet site

Mobile site

สรุป

จบไปแล้วครับ สำหรับบทความที่กล่าวมาข้างต้น โดยตัว Responsive Web Design เป็นแนวคิดที่สำคัญในการพัฒนาเว็บไซต์ในยุคปัจจุบันนี้ โดยการใช้ Media Queries, Grid Systems, และ Flexbox, คุณสามารถปรับแต่งเว็บไซต์ของคุณให้เหมาะสมกับทุกรูปแบบของอุปกรณ์ได้อย่างง่ายดาย และสามารถทดสอบเว็บไซต์ของคุณในหลายขนาดหน้าจอเพื่อให้แน่ใจว่ามีการใช้งานที่ดีในทุกรูปแบบ ในบทความนี้เป็นเพียงแนวทางเบื้องต้น และเทคนิคพื้นฐาน ในการทำให้เว็บไซต์ของคุณเป็น Responsive แต่มันจะเพียงพอที่จะทำให้คุณสามารถเริ่มต้นกับ Responsive Web Design ในเวลาอันสั้นและกระชับชิด

…สุดท้ายท้ายสุด บทความนี้อาจไม่ได้ดีไปกว่าบทความอื่นที่เขียนเกี่ยวกับ Responsive Web Design (RWD) ผมหวังว่าทุกคนที่ได้เข้ามาอ่านบทความนี้จะได้รับประโยชน์ไม่มากก็น้อยนะครับ ถ้ามีข้อผิดพลาด หรือ ตกหล่นในส่วนไหน ก็ขออภัยมา ณ ที่นี้ด้วยครับ เจอกันใหม่ บทความหน้าครับ ขอบคุณครับ …

References

การพัฒนาเว็บไซต์ด้วย Responsive Web Design เน้นการเข้าถึงในทุกอุปกรณ์!

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

www.1001click.com

How to use React-Responsive for Responsive Design? | BrowserStack

Learn how to implement it in your React projects using the React-Responsive Library with different techniques and best…

www.browserstack.com

--

--

Faruslan Waming
Lotus’s IT

Written by Faruslan Waming

1 Follower
Editor for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams