ต่อจากตอนที่แล้ว "ได้เวลาปรับกระบวนการในการออกแบบเว็บไซต์สมัยใหม่ (ตอนที่ 1)" เราคุยกันเรื่องของ Photoshop CC 2015 ไปแล้ว ทีนี้มาดูโปรแกรมสำคัญอีกตัวนึงคือ Adobe Dreamweaver CC 2015 ก่อนต่อ ก่อนอื่นผมต้องบอกก่อนว่า โปรแกรม Dreamweaver นั้น เปลี่ยนไปมาก ถ้าเทียบกับ Photoshop แล้ว เรียกว่า เปลีย่นมาเยอะจนบางที ต่อให้คนที่ใช้งานประจำก็ยังต้องปรับตัวเยอะพอสมควร จนบางคนรู้สึกว่ามันใช้งานไม่ง่ายเหมือนก่อน ที่จริงมันก็ไม่ได้ยากขึ้นนะครับ แต่ว่ามันบังคับให้เราทำงานอย่างถูกต้อง และเป็นระบบมากขึ้น โดยเริ่มจากการสร้างเอกสารใหม่กันเลยทีเดียว
Archives for : Basic WebDesign
หลังจากที่ Adobe CC ได้ปล่อยอัพเด็ทโปรแกรมใหม่ออกมาใหม่เรื่อยๆ โดยอัพเด็ทล่าสุดนั้น เหล่าผู้ออกแบบเว็บไซต์ หรือ Webdesign น่าจะได้เห็นเครื่องมือของตัวเองเปลี่ยนไป๋ นอกจาก user interface ที่ออกมาแนวขรึมมากขึ้น โดยใช้ตรีมสีดำทะมึน (ผมแอบคิดว่ามันดูคล้ายกับโปรแกรมของ Macromedia สมัยก่อนเลยแฮะ) แต่เครื่องมือชูโรงสำหรับนักออกแบบเว็บไซต์นั้น คงหนีไม่พ้น Adobe Photoshop และ Adobe Dreamweaver โดยผมจะพูดถึงสิ่งที่ปรับปรุงใหม่ ที่น่าจะกระทบการนักออกแบบอย่างเรา
ช่วยในการออกแบบเว็บไซต์แบบมืออาชีพการออกแบบเว็บไซต์ในสมัยใหม่นั้น จำเป็นต้องสร้างให้รองรับอุปกรณ์สำหรับการเข้าถึงอินเตอร์เน็ตที่มีความหลากหลายมากขึ้นเรื่อยๆ สำหรับนักออกแบบเว็บไซต์แล้ว ยิ่งอุปกรณ์มีความหลากหลายก็ยิ่งสร้างภาระในการออกแบบมากขึ้น เทคนิคหนึ่งที่ถูกนำมาใช้ในการออกแบบเว็บไซต์สมัยใหม่นั้น นักออกแบบต่างพยายามพัฒนาและแบ่งปันเทคนิคที่ดีขึ้นและง่ายขึ้น ต่อสู้กับความเปลี่ยนแปลงที่ว่านี้
เทคนิคที่นิยมใช้งานกัน อย่างมากคือ การแทนที่โครงสร้างเว็บไซต์แบบเดิมที่เป็น HTML layout (Table Tag) ด้วย CSS (DIV Tag) เช่นการใช้ fluid Layout เป็นต้น ในบทความนี้รวบรวมจากข้อแนะนำ วิธีการของ Web Designer ระดับโลก นำมาช่วยในการออกแบบเว็บไซต์แบบมืออาชีพ
ติดตั้งและใช้งาน ADOBE EDGE INSPECT
สำหรับคนที่คิดจะทำเว็บไซต์ในปัจจุบัน ไม่ว่าจะทำเป็น Fix-layout หรือ Responsive Layout ก็ตาม สิ่งที่น่าปวดหัวสำหรับนักออกแบบเว็บไซต์มืออาชีพก็คือ ทำอย่างไรจะให้แสดงผลได้สวยงาม กับอุปกรณ์ที่หลากหลาย ด้วยเหตุนี้ Adobe จึงสร้างโปรแกรมที่ชื่อว่า EDGE Inspect ขึ้นมาช่วยเหลือนักออกแบบและนักพัฒนาเว็บไซต์ เพื่อให้แสดงผลในอุปกรณ์ต่างๆได้ทีเดียวพร้อมๆกัน ไปดูกันว่าทำได้อย่างไร
รู้จักกันก่อน Adobe EDGE Inspect โปรแกรม Adobe Edge Inspect ทำให้ Web designer สามารถทดสอบเว็บที่กำลังสร้างบน PC Workstation ไปแสดงผลใน smartphone และ tablet ได้ทันที ทำให้ลดเวลาในการทำงาน และยังเชื่อมต่อโดยตรงกับ Google Chrome และสามารถเรียกใช้งานจากโปรแกรมอื่นๆ ใน Adobe Creative Cloud ได้ทันที สำหรับคนสมัคร Adobe Creative Cloud แบบทดลองใช้งาน จะเชื่อมต่อกับ Smartphone หรือ Tablet ได้ทีละเครื่องสำหรับคนที่จ่ายเงินซื้อลิขสิทธิ์แล้ว สามารถเชื่อมต่อกับ Smartphone หรือ Tablet ได้ไม่จำกัดจำนวนเลยทีเดียว
responsive web design (RWD) เริ่มเป็นที่นิยมใช้กัน และพูดถึงกันมากขึ้น จนกำลังจะมาเป็นมาตรฐานใหม่ของการออกแบบเว็บไซต์ไปแล้ว สำหรับนักออกแบบเว็บไซต์แล้ว ถ้าไม่รู้จัก RWD อาจจะบอกได้ว่าตกยุก
และด้วยการเกิดของโทรศัพท์สมาร์ทโฟน, iPads และจอภาพอื่น ๆ ที่มีขนาดแตกต่างกันอัตราส่วน ขนาด ความละเอียดของจอภาพ ดูเหมือนว่าเราจะควบคุมมันได้ยากขึ้นมากๆ ดังนั้น RWD เข้ามาอาสาแก้ปัญหาตรงนี้
ในบทความนี้ผมจะอธิบายวิธีการที่ใช้ในการออกแบบสำหรับอุปกรณ์ที่แตกต่างกัน สิ่งที่หน้าจอขนาดและความละเอียดที่ควรจะนำมาพิจารณา และวิธีการทำงานของ RWD และมุมมองในการออกแบบ
หาคำตอบเพิ่มเติมได้ที่ http://wp.me/p4ztX6-aN
