Responsive Web Design
หลักการของ Responsive Web Design
เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น
% หรือการใช้ font-size หน่วยเป็น em เป็นต้น
ต่อมาคือการทำ Flexible
Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล
หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา
เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น สุดท้ายคือการใช้ CSS3
Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style
sheets สำหรับ Devices ต่างๆ
ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้
ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ
หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด
ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
ข้อดีของ Responsive Web Design
1.สามารถรองรับการแสดงผลได้ทุกหน้าจอ ในรูปแบบที่แตกต่างกันไป
เช่นผ่านทางอุปกรณ์คอมพิวเตอร์ จะเป็นหน้าจอที่สมบูรณ์แบบ
แต่หากผ่านทางอุปกรณ์มือถือ จะมีการเรียงลำดับเมนูลงมาเรื่อย
โครงสร้างการออกแบบจะขึ้นอยู่กับผู้พัฒนา
2.เพิ่มความสะดวกสบายสำหรับผู้ใช้งาน สามารถใช้งานได้โดยผ่าน url ตัวเดียวกัน โดยไม่ต้องมีการกำหนดเวอร์ชั่นนี้สำหรับอุปกรณ์มือถือเท่านั้น
ซึ่งมีผลดีในด้าน SEO ด้วย
3.การแก้ไขข้อมูล
แก้ไขข้อมูลในที่เดียวแสดงผลทุกอุปกรณ์
ข้อเสียของ Responsive Web Design
1.ไม่สามารถรองรับการทำงาน พวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
2.เนื่องจากอุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก
ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ ออก
3.ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี
เช่น html5 css ให้เหมาะสม
4.การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก
อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหา
ไม่มีความคิดเห็น:
แสดงความคิดเห็น