วันอังคารที่ 17 พฤษภาคม พ.ศ. 2559

Responsive Web Design

              Responsive Web  คือ เว็บไซต์ที่สามารถรองรับการทำงานบนหน้าจออุปกรณ์เครือข่ายได้อุปกรณ์  เช่น   Desktop Internet ,  Mobile Internet (  ipad ,iphone, android ,  windows mobile อื่น ๆ )  ซึ่งอุปกรณ์เหล่านี้จะมีหน้าจอแตกต่างกันไป ตามขนาดความกว้างของเครื่อง

หลักการของ Responsive Web Design

1.การทำ Fluid Grid คือการออกแบบ Grid ให้เป็นแบบ Relative คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น

2.การทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม

3.การใช้ CSS3 Media Queriesจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน styl

ข้อดีของ Responsive Web Design
·   สามารถรองรับการแสดงผลได้ทุกหน้าจอ ในรูปแบบที่แตกต่างกันไป 
·   เพิ่มความสะดวกสบายสำหรับผู้ใช้งาน
·   การแก้ไขข้อมูลในที่เดียวแสดงผลทุกอุปกรณ์

ข้อเสียของ Responsive Web Design
·  ไม่สามารถรองรับการทำงาน พวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
·  อุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ออก
·  ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี  เช่น  html5 css  ให้เหมาะสม
·  การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหาได้

ที่มา : http://www.siamhtml.com/responsive-web-design
        : http://web.stoms.co.th/2013/10/15/responsive-web-design/

ไม่มีความคิดเห็น:

แสดงความคิดเห็น