AI Web Mobile (ไทย) |
(English| ภาษาไทย) หลักการออกแบบที่เรียกว่า Mobile First นั้น ผู้ออกแบบจะออกแบบจะต้องกำหนดขนาดเป้าหมายเริ่มต้นของการแสดงผลก่อน เช่นต้องการให้รองรับขนาดเล็กสุด (XS-Extra Small) แล้วจึงขยายการรองรับกับอุปกรณ์ที่มีขนาดหน้าจอใหญ่ขึ้นตามลำดับ
อุปกรณ์ smart device มีขนาดหน้าจอแตกต่างกัน สามารถกำหนดได้เป็น XS, SM, MD, LG เป็นต้น
การจัดเรียงข้อมูล (Content) จะถูกแบ่งออกเป็น 12 Column ต่อบรรทัด แล้วกำหนดให้แสดงในขนาดหน้าจอที่ต่างกัน โดยใช้ Bootstrap CSS เป็นตัวกำหนด
ตัวอย่างการแสดงผลบน smart phone / tablet
|