มารู้จัก Responsive Web Design กับการออกแบบเว็บไซต์

ในปัจจุบันเราจะเห็นอุปกรณ์ประเภท มือถือ แท็บเลท หลายแบบหลายขนาด ในท้องตลาด และ ก็หลากหลายระบบ ปฎบัติการทั้ง Android  ,  ios และ Windows Mobile ที่เราใช้กันซึ่งอุปกรณ์เหล่านี้ ในปัจจุบัน เราก็ใช้งานเชื่อมต่อเพื่อเข้าชมเว็บไซต์บ่อยครั้งในทุกวันนี้ รวมถึงการเข้าสู่เว็บไซต์ผ่าน Notebook และ Desktop อีกด้วย

Responsive-Web-Design

 

 

 

 

 

 

 

ดังนั้น การที่เราจะรู้จัก การออกแบบ เว็บไซต์แบบ  Responsive Web Design  ก็น่าจะช่วยให้เราเรียนรู้การเริ่มต้น
ออกแบบและใช้งานได้ไม่มากก็น้อยนะครับ  😆

Responsive Web Design คือการออกแบบเว็บไซต์ โดยมีแนวคิดที่ว่า ถ้าเป็นสมัยก่อนการทำเว็บ สำหรับ  Desktop version กับ Mobile เราต้องทำเว็บไซต์ออกมาหลายๆ version สำหรับ อุปกรณ์ต่างชนิดกัน เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ อุปกรณ์  นั้นๆ Responsive Web Design เป็นการออกแบบที่ทำให้เว็บไซต์แสดงผลได้อย่างเหมาะสมบนอุปกรณ์ที่ต่างกันโดยใช้ โค้ดและ URL เดียวกัน เหตุผลที่นักพัตนาต้องเรียนรู้เพิ่มเติมเพราะพฤติกรรมการใช้งาน internet ในปัจจุบันนั้น ไม่ได้จำกัดอยู่ใน เฉพาะ Desktop Computer หรือ Notebook Computer เพียงอย่างเดียว อีกต่อไปแล้ว
เพราะการขยายตัวในการใช้ Internet ได้มีมากขึ้นและ มีอุปกรณ์หลากหลายที่ใช้เชื่อมต่อ Internet เพื่อเข้าชมเว็บไซต์ จึงต้องทำให้นักพัฒนาและออกแบบเว็บไซต์ ต้องปรับตัวและเรียนรู้หลักการ และวิธีการสร้างเว็บแบบ Responsive Web Design ด้วยเหมือนกัน

แล้วในการสร้างเว็บไซต์แบบ Responsive Web Design ต้องเรียนรู้อะไรบ้างล่ะ??

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

responsive web design screen sizes

HTML5 กับ Responsive Web Design

ความสามารถของ Html 5 ที่โดดเด่นและ เป็นที่น่าสนใขในการนำมาใช้งานในการออกแบบเว็บไซต์แบบ Responsive มีดังนี้

  • Semantic Markup: โครงสร้างโค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย
  • Form Enhancement: เพิ่มประสิทธิภาพการใช้งานของฟอร์ม ให้มีหลากหลายตามการใช้งานที่เพิ่มขึ้น
  • เสียง / วีดิโอ: ฟังชั้น HTML5 Video ที่มาใช้ทดแทน Flash Video (.flv) ที่ใช้งานบนบางอุปกรณ์ไม่ได้
  • Canvas: ใช้ในการวาดรูป ตกแต่งรูปเป็นอีกทางเลือกหนึ่งเพิ่มจาก การวาดรูปในแฟลช (Adobe Flash)
  • ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
  • Drag and Drop: ลากของมาวาง ออบเจ็คต่างบนหน้าเว็บไซต์
  • Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว

html5

การเขียนโค้ดแบบ Html 5 เป็นการจัดวางโค้ดที่เป็นระบียบ โดยแยกแต่ละส่วน แยกกันออกมาเป็นโมดูลทำให้ง่ายต่อการเขียน CSS กำกับในแต่ละขนาดของหน้าจอแสดงผล โดยมี  <header> </header> , <footer></footer> , <section></section> แบ่งออกเป็นส่วนๆอย่างเป็นระเบียบ ดังนั้นจึงส่งผลถึง การเก็บข้อมูล ของ search engine bots เช่นกัน

พร้อมกับเสริมพลังเพิ่มให้กับ Responsive Web Design ด้วย CSS3

CSS3 หรือ Cascading Style Sheets ver.3  ใน Css3 มีการเพิ่มเติมในส่วรของการใช้งาน selectors เพิ่มมากยิ่งขึ้น จึงทำให้สามารถกำหนดข้อปลีกย่อยที่ Css2 ไม่สามารถทำได้ ในหลายความสามารถ ในการแสดงผลซึ่งปัจจุบัน Browser ต่างๆก็รองรับการแสดงผลของ CSS 3 แล้วด้วย

CSS3

และยังมี ส่วนที่ช่วยให้การเขียน CSS3 และ Responsive ง่ายขึ้น!!
เสริมหลังด้วย  Responsive Design ด้วย css framework !!
ในปัจจุบันมีการ พัฒนา css framework  ขึ้นมาใช้งานเพื่อใหการเขียนโค้ด ง่ายขึ้น โดยมี framework เจ้าหลักที่เราคุ้นหูอย่าง

Jquery UI Css Framework   หรือที่มาแรงอย่าง Framework Bootstrap และ Framework Foundation ซึ่งเหล่านี้จะเป็นตัวช่วยให้การสร้างเว็บไซต์ยืดหยุ่นและหลากหลายยิ่งขึ้น

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*