ตัวอย่างการแสดงผลแบบ Responsive
Responsive Web Design คืออะไร
คือ การเขียนเว็บไซต์โดยกำหนด HTML และ ใช้ CSS ควบคุมการแสดงผลเป็นหลัก ให้สามารถปรับเปลี่ยนการแสดงผลหน้าเว็บเพจ ตามอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกัน เช่น คอมพิวเตอร์ โทรศัพท์มือถือ และแท็บเล็ต ซึ่งอุปกรณ์เหล่านี้ ขนาดหน้าจอแต่ละรุ่น แต่ละยี่ห้อ ไม่เท่ากัน
โดยเทคนิคนี้จะทำให้หน้าเว็บเพจ สามารถแยกการแสดงผลได้ตามขนาดหน้าจอ เพื่อให้การเว็บของเราสวยงาม แสดงผลได้ถูกต้อง และดูดีทุกขนาดจอภาพ
Responsive Web Design คิดยังไง
เนื่องจากปัจจุบัน ผู้ที่เข้าชมเว็บไซต์ 70% - 85% ใช้โทรศัพท์มือถือ ดังนั้นการออกแบบเว็บไซต์ จึงควรมุ่งเน้นไปที่คนกลุ่มใหญ่ก่อน คือ ควรออกแบบให้แสดงผลได้สวยงาม ครบถ้วน ที่หน้าจอขนาดเล็กเป็นหลัก โดยมีหลักการดังนี้
- พยายามเรียงข้อมูล บนลงล่าง เพราะจะทำให้อ่านง่าย เนื้อหาไม่แน่นจนเกินไป
- เว็บเพจหน้าหนึ่ง ไม่ควรมีข้อมูลหลายเรื่อง มากจนเกินไป เพราะจะทำให้เว็บเพจยาวจนหาข้อมูลที่สนใจไม่เจอ
- ส่วนที่เป็นข้อมูลสำคัญของหน้าเว็บเพจนั้น ควรอยู่ด้านบนๆ ของหน้าเว็บเพจ เพราะจะทำให้ผู้เข้าชม เห็นข้อมูลที่สนใจในทันทีที่เข้ามา
- ขนาดรูปภาพ ขนาดตัวหนังสือ ช่องไฟ ระยะห่างระหว่างบรรทัด ควรเว้นระยะให้อ่านง่าย สบายตา ไม่เล็กหรือใหญ่เกินไป
- การ Design ให้จินตนาการทุกขนาดหน้าจอไปด้วยเสมอ ว่าอะไรจะอยู่ตรงไหน ขยับยังไงได้บ้าง เมื่อขนาดหน้าจอเปลี่ยนไป
Responsive Web Design ทำยังไง
การทำ Responsive Website มี 2 ส่วนที่นักพัฒนาต้องทำ คือ การกำหนด HTML และ CSS โดยต้องกำหนด Meta และ CSS ดังนี้
- กำหนด HTML เพื่อให้ Responsive
ใส่ข้อมูลใน tag head คือ - กำหนด CSS ที่เรียกว่า "media queries" เพื่อให้การแสดงผลเป็นแบบ Responsive โดยให้แยกตามอุปกรณ์ โดยกำหนดขนาดหน้าจอ ยกตัวอย่างเช่น
@media screen and (max-width: 400px){ ... กำหนดการแสดงผลในนี้ ... }
จะหมายถึง ที่หน้าจอ 400px หรือ ต่ำกว่า จะใช้ CSS ที่เรากำหนดไว้ ได้แก่พวกโทรศัพท์มือถือรุ่นต่างๆ
@media screen and (max-width: 800px){ ... กำหนดการแสดงผลในนี้ ... }
จะหมายถึง ที่หน้าจอ 800px หรือ ต่ำกว่า จะใช้ CSS ที่เรากำหนดไว้ ได้แก่พวกแท็บเล็ตรุ่นต่างๆ
จากข้างต้น จะเห็นว่า เราไม่ได้จัดการแก้ไขเปลี่ยนแปลง Server Script เลย ดังนั้นระบบต่างๆ หลังบ้าน การทำงานของ PHP ASP หรือ JSP ของเรา ยังคงใช้โปรแกรมตัวเดิม มีอยู่ชุดเดียว ชุดเดิม นั่นเอง
บทความล่าสุด
19 พ.ค. 643,464
จากข้อมูลสถิติโดยเฉลี่ย 2 - 3% ของผู้เข้าชมเว็บเป็นผู้สนใจซื้อสินค้านั้นจริงๆ เคล็ดลับการออกแบบ UX ที่ดี 7 เคล็ดลับ สามารถช่วยเพิ่มยอดขาย มีอะไรบ้าง
8 พ.ค. 6429,716
บัญญัติ 10 ประการในการออกแบบเว็บไซต์ให้มีคุณภาพดี ตามหลักสากลนิยม ทำให้ผู้เข้าชมเกิดความรู้สึกประทับใจ ช่วยเสริมธุรกิจออนไลน์ มีอะไรบ้าง มาดูกัน
10 เม.ย. 648,624
Online Marketing คือ การทำการตลาด การทำโฆษณา ผ่านสื่อออนไลน์ ธุรกิจแบบไหนที่เหมาะกับการทำการตลาดออนไลน์? ทำการตลาดออนไลน์ทำอย่างไร?
30 มี.ค. 644,236
การทำ SEO ให้เว็บไซต์ติดอันดับ SERP แบ่งได้เป็น 3 ด้าน คือ ด้านโครงสร้างของเว็บไซต์ / ด้านข้อมูลบนเว็บไซต์ / ด้านการแชร์ข้อมูล แต่ละด้านมีหลักการอะไรบ้าง