web responsive

html5

Responsive Web Design คือ การออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอของอุปกรณ์ทุกชนิด ตั้งแต่คอมพิวเตอร์ที่มีขนาดหน้าจอหลากหลาย ไปจนถึงโทรศัพท์มือถือ Smart Phone และ Tablet ต่างๆ ที่มีมาตรฐานขนาดหน้าจอที่แตกต่างกัน พูดได้ว่าออกแบบครั้งเดียวสามารถนำไปใช้ได้กับทุกหน้าจอเลยทีเดียว ทั้งนี้ Responsive Web Design เป็นการออกแบบเว็บไซต์ โดยใช้เทคนิคของ CSS , CSS3 และ JavaScript ในการออกแบบเพื่อให้เว็บไซต์สามารถจัดลำดับ เรียงข้อมูลบนเว็บไซต์ให้รองรับการแสดงผลผ่านหน้าจอที่มีขนาดแตกต่างกันได้โดยอัตโนมัติ โดยผู้ใช้งานเว็บไซต์สามารถเปิดใช้งานเว็บไซต์ได้ โดยไม่ต้องคำนึงถึงขนาดของหน้าจอหรือชนิดของอุปกรณ์สื่อสาร

flat design

css3

เทรนด์ออกแบบนี้จะเป็นแบบสะอาดๆ เน้นแสดงข้อมูลเป็นการทำเว็บไซต์แบบสะอาดๆ เรียบๆ ไม่เน้น Effect มาก ก่อนหน้านี้คนจะชอบแบบ Skeuomorphism (แบบสมจริง เช่น ใช้ลายไม้ในการออกแบบแอพอ่านหนังสือ) Flat Design เป็นการตัดรายละเอียดหลายๆ อย่าง พวกการใช้เงา การไล่ Gradient ออกไป ซึ่งจะเน้นการใช้สี / รูปทรงเพื่อแสดงว่าส่วนไหนสำคัญในเว็บไซต์ มากกว่าเมื่อก่อนที่ปุ่มในเว็บต้องไล่ Gradient เด่น ๆ เพื่อให้ปุ่มดูนูนและคนมองเห็นได้ง่าย อย่างไรก็ตาม บางคนมองว่า Flat Design อาจดูธรรมดาเกินไป หรือดูไม่มีความลึกในงานดีไซน์ จึงมีบางส่วนที่ดีไซน์เป็นแนว Almost Flat Design คือไม่ได้เรียบ ๆ ไปหมด แต่บางส่วนมีการใช้ Gradient มาช่วยทำให้ดูเด่นขึ้น หรือมีการใช้รูปถ่ายจริงร่วมกับปุ่มแบบ Flat สร้างความแปลกใหม่

one page web design

flash

เทรนด์นี้เริ่มมีการใช้อย่างแพร่หลาย จากเมื่อก่อนนี้เว็บไซต์จะมีหลายๆหน้า เช่น หน้าแรก, หน้ารวมสินค้า, หน้าฟอร์มติดต่อ ฯลฯ แต่ One Page Web Design จะทำให้หน้าแรกหน้าเดียวมีข้อมูลครบทุกอย่าง ลิสต์สินค้าได้ ลงฟอร์มติดต่อได้ เล่าเรื่องการก่อตั้งบริษัทก็ได้ จะเห็นว่าหน้าเว็บจะค่อนข้างยาวมาก ซึ่งเว็บไซต์ที่เหมาะกับ One Page Design ก็มีหลายแบบ เช่น เว็บไซต์ธุรกิจ หรือเว็บไซต์ Portfolio ที่รวมผลงาน รวมถึงข้อมูลติดต่อในหน้าเดียว ข้อดีของเว็บไซต์แบบนี้คือ เขียนเว็บไซต์ขึ้นมาหน้าเดียว ไม่ต้องทำเว็บไซต์เป็นหลายหน้าให้ยุ่งยาก สะดวกทั้งคนทำ และคนดู การออกแบบแนวนี้ไม่มีการใช้ Sidebar ในงานดีไซน์เลย ซึ่งก็ช่วยลด Element ที่จะมากินพื้นที่การอ่านบทความ (โดยเฉพาะเว็บไซต์แนว Blog, Magazine)ช่วยให้คนอ่านบทความอ่านได้สบายขึ้น

parallax scrolling

JQuery

เทรนด์การทำเว็บไซต์แบบ parallax design หรือ parallax scrolling design ออกมาพร้อมๆ กับ One Page Web Design เนื่องจากการทำเว็บไซต์แบบ One Page ถ้าเลื่อนลงมาธรรมดาๆ มันไม่เท่ เลยมีการใส่ Effect แบบ Parallax Scrolling เพื่อให้มันมีเอฟเฟ็กต์ให้คนเข้าเว็บไซต์รู้สึกตื่นตาตื่นใจมากขึ้น อธิบายแบบง่ายๆ คือมันช่วยให้เว็บไซต์ดูมีมิติมากขึ้นโดยการทำให้ Element บนหน้าเว็บไซต์เลื่อนตามเม้าส์ลงมาไม่พร้อมกัน ซึ่งการทำเว็บไซต์แบบ Parallax Design มีคนนำไปใช้เยอะมาก

interactive html5

mootools

HTML5 คือการแก้ไขมาตรฐานภาษา HTML ที่ออกมาเมื่อปี 2012 หลังจากที่กระแสของ Flash เริ่มตกลงไปด้วยหลายๆ สาเหตุ และเล่นไม่ค่อยได้ใน Smartphone, Tablet ก็ทำให้ HTML5 ผงาดขึ้นมาแทนที่ โดย HTML5 นำเอาเทคโนโลยีใหม่ๆมาผสมผสานกันทั้งในส่วนของ CSS3 และ JavaScript APIs ทำให้ความสามารถของ Web Application เทียบเท่าสิ่งที่แอพลิเคชั่นบนเดสท์ท็อปทำได้ ทั้งในเรื่องของ interactivity และ connectivity รวมถึงมี Tool, Library ออกมารองรับมากมาย ทำให้เดี๋ยวนี้การทำ Interactive ด้วย HTML5 สะดวกขึ้น ซึ่งปัจจุบันมีเทคโนโลยีอย่าง WebGL, Canvas ที่ทำให้สามารถทำกราฟฟิกแบบ 3D ได้

svg graphics

vanvas element

SVG หรือ Scalable Vector Graphics เป็นมาตรฐานรูปภาพแบบเวกเตอร์ ข้อดีของ SVG คือไฟล์ภาพมีขนาดเล็กและย่อขยายแล้วไม่แตก และ HTML5 ถูกเขียนขึ้นมาโดยสนับสนุนการใช้ SVG เป็นอย่างมาก ที่ผ่านมาคนทำเว็บไซต์พยายามหาวิธีการนำ Vector Graphic มาใช้ ซึ่งก็มีการนำ Vector มาแปลงเป็นฟ้อนต์อีกที กลายเป็น Icon Font พอมาถึงยุคที่ Icon Font เริ่มมีปัญหา เพราะต้องใช้กับ CSS3 @font-face ซึ่งถ้าบราวเซอร์ไม่รองรับก็มองไม่เห็น แถมถ้าเรียกไฟล์ไอคอนจากโฮสต์อื่นก็จะทำให้ Firefox บล็อค Icon Font ไป หรือบางทีเราอยากได้แค่ไอคอนเดียว แต่ต้องใช้ไฟล์ฟ้อนต์ทั้งไฟล์ก็ดูเยอะไป สุดท้ายทางออกของการใช้ Vector Graphic บนเว็บไซต์ ก็กลายมาเป็น SVG ซึ่งเป็นนามสกุล Vector นามสกุลหนึ่งที่สามารถอ่านบน Browser ได้