ไอคอนแบบ Responsive..?

การออกแบบเว็บแบบ responsive นั้นมีประโยชน์อย่างมากในการแสดงผลบนหน้าจอที่มีความละเอียดแตกต่างกัน โดยเฉพาะการใช้งานบนเว็บไซต์ข่าวหรือบล๊อก ที่เราเพียงเลือกธีมเดียวแล้วที่เหลือก็เป็นหน้าที่ของ CSS ที่จะคอยจัดการกับการแสดงผลเอง ว่าแต่.. “ไอคอน” แบบ responsive ล่ะ มีมั้ย???

วันนี้โดบะไปเจอบทความนึงที่หน้าสนใจมากชื่อว่า Do we really need responsive icons? ครับ เป็นบทความเกี่ยวกับไอคอนแบบ responsive เนี่ยแหละ ก็เลยทำให้โดบะรู้ว่าไอคอนก็มีแบบ responsive เหมือนกัน!

หลักการของไอคอนแบบ responsive ก็คือการนำโค้ดการออกแบบเว็บ responsive มาประยุกต์ใช้กับไฟล์ SVG (เวกเตอร์) ครับ ให้เลือกส่วนของออบเจกต์ในไฟล์ SVG มาแสดง ลองดูตัวอย่างได้ในเว็บของ Joe Harrison และ P.J. Onori ที่ลิงก์ด้านล่างครับ

http://www.responsiveicons.co.uk/

http://useiconic.com/concepts/responsive/

ผมลองเข้าไปดูในไฟล์ SVG ของ Joe Harrison แล้วก็พบสิ่งที่น่าสนใจครับ…

CapturFiles
คลิกที่ภาพเพื่อขยายครับ (ไฟล์ SVG: http://www.responsiveicons.co.uk/_client/images/home_sprite.svg)

ก็ถือว่าเป็นสิ่งที่น่าสนใจมากๆๆๆๆๆ ครับ เพราะแต่ละหน้าจอไม่ใช่แค่ความละเอียดของหน้าจอที่ต่างกัน แต่ยังมีความหนาแน่นของพิกเซลที่ต่างกันด้วย ตรงนี้แหละครับที่เป็นปัญหาของการแสดงผลที่ไอคอนแบบ responsive จะมาช่วยได้ด้วยการลดรายละเอียดของไอคอนลง

ในอนาคตเราคงจะเห็นไอคอน responsive ถูกนำมาใช้ในเว็บกันมากขึ้นครับ ซึ่งมันจะทำให้เว็บดูน่าใช้ด้วย 555+

Advertisements

One thought on “ไอคอนแบบ Responsive..?

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s