สำหรับการทำเว็บไซต์ทั่วไป โดยหลักๆส่วนที่ขาดไม่ได้เลยนั่นก็คือเรื่องของการ Design ซึ่งความสวยงามมักจะถูกจัดมาเป็นลำดับต้นๆและเป็นหัวใจหลักของเว็บไซต์เลยก็ว่าได้ และนั่นจะเป็นส่วนสำคัญในการดึงดูดผู้ใช้งานปัจจุบันมี Frontend template สำหรับช่วยอำนวยความสะดวกในเรื่องของการ Design อยู่หลายตัว โดยมีหลากหลาย Feature และสามารถ Download มาใช้งานกันได้ฟรีๆ ซึ่งจะขอยกตัวอย่าง Frontend Template ที่กำลังเป็นที่นิยมในขณะนี้ ซึ่งก็คือ Bootstrap นั่นเอง
จุดเด่นของ Bootstrap นอกจากจะเป็นเรื่องของความสวยงามแล้ว ก็ยังมีอีกหนึ่งความน่าสนใจคือ ความเป็น Responsive แล้ว Responsive มันคืออะไร ทำไมถึงได้หันมาให้ความสนใจกันมากขึ้น
Responsive ก็คือ แนวคิดการออกแบบเว็บไซต์เพื่อให้รองรับการนำเสนอผ่านอุปกรณ์หรือ Device ต่างๆ โดย content (เนื้อหา) ถูกจัดให้ออกมาในรูปแบบที่เหมาะสม สวยงาม และง่าย (Friendly) แก่การใช้งาน ตัวอย่างเช่น เว็บไซต์ขายของซึ่งลูกค้ามีการใช้งาน Tablet หรือ Mobile บ่อยกว่าการใช้งาน Notebook หรือ PC ฉะนั้น ผู้ให้บริการหรือเจ้าของเว็บไซต์ จึงต้องมีคำนึงและเน้นการทำเว็บไซต์ให้ออกมาในรูปแบบของ Responsive เพื่อง่ายต่อการใช้งานใน Mobile หรือ Tablet มากขึ้น
เขียน CSS อย่างไรให้เป็น Responsive
- หลักการของ Responsive คือ การปรับเปลี่ยนขนาด และเนื้อหาให้เข้ากับ Layout ที่เปลี่ยนไป ซึ่งรูปแบบการกำหนดค่าของ Property หลักๆ เช่น width, padding ควรกำหนดเป็น % และเลี่ยงการใช้ Pixel
- การทำ Layout ลักษณะ Relative
- กำหนดการตั้งค่าเนื้อที่การแสดงผล ด้วย @viewport CSS Rule
- google search more..
ตัวอย่าง workshop CSS responsive (ยังไม่ได้อัพโหลด แต่เป็นเร็วๆนี้)
- หน้า Login
- หน้า Register
- หน้า Products
- หน้า Blog
- หน้า Chat
- หน้า webboard
