Graphic Design Community HardcoreGraphic

ผู้เขียน หัวข้อ: ตัวอย่างเว็บแนว Responsive Web Design  (อ่าน 10147 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ รปภ.

  • Administrator
  • Level 12
  • *****
  • กระทู้: 1230
  • Like 39
  • เพศ: ชาย
  • หาเลวที่ตัวเรา ไม่ต้องหาเลวที่คนอื่น
    • ดูรายละเอียด
    • HardcoreGraphic
ตัวอย่างเว็บแนว Responsive Web Design
« เมื่อ: กันยายน 27, 2012, 03:18:55 PM »
Responsive web design หรือ RWD กำลังเป็นโจทย์ใหม่สำหรับ Web Designer ทั้งหลายในการออกแบบสร้างเว็บเลย์เอาท์ให้เข้ากันกับแต่ละอุปกรณ์เช่น หน้าจอคอมพิวเตอร์, หน้าจอ Tablet ขนาดต่างๆ หรือหน้าจอโทรศัพท์มือถือที่มีขนาดแตกต่างกันออกไป ไม่ว่าจะแสดงผลแนวตั้งหรือแนวนอน ทั้งนี้เพื่อให้ผู้ใช้สะดวกในการอ่านหรือรับชมเว็บในแต่ละอุปกรณ์ของคนชมนั่นเอง ทั้งหมดนี้เราเรียกมันว่าเทคนิคการออกแบบเว็บแบบ Responsive web design ที่จะเป็นเทรนด์การออกแบบเว็บในปัจจุบันนี้

คุณลองคิดดูว่าถ้าเราออกแบบหน้าเว็บเฉพาะหน้าจอคอมพิวเตอร์ซึ่งมีการกำหนดขนาดของ Font มาขนาดนึงแล้วหากไปเปิดในหน้าจออุปกรณ์มือถือหรือ Tablet จะพบว่าการแสดงผลของตัวอักษรดันเล็กมาก อ่านยากทีนี้เราจะทำอย่างไร ไอ้พระเอกของงานมันก็คือการใช้เทคนิควิธีออกแบบเว็บแนว Responsive web design นั่นแหละครับ หรือเรียกง่ายกว่านั้นคือใช้ CSS เข้ามากำกับการแสดงผลของแต่ละขนาดหน้าจอนั่นเอง

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


http://www.fatmedia.co.uk


http://themes.activetofocus.com/newidea/demo/


http://emploinewyork.com/


http://kitchen.hi-res.net/


http://awesomenyc.com/


http://www.silktricky.com/


http://www.christmasgifs.org/


http://italiokitchen.com/


http://www.rockwerchter.be/nl


http://www.welikesmall.com/


http://starmatic.com/


http://builtbybuffalo.com/


http://mcgarrybowen.com/en


http://rvlt.com/



« แก้ไขครั้งสุดท้าย: มิถุนายน 25, 2013, 11:49:10 AM โดย รปภ »
*สมาชิกที่ไม่ได้ Login และโพสท์กระทู้ในบอร์ดประมาณ 2 ปี+ อาจถูกลบออกจากการเป็นสมาชิก ท่านจะต้องสมัครใหม่

*ไฟล์ลิขสิทธิ์ 150+ Vintage Logos และ Photo Mock-Ups ราคา 16 เหรียญ

 

©HardcoreGraphic.com All rights reserved