แน่นอนว่าเราก็ต้องรู้พื้นฐานอย่างการใช้ CSS และ Media Queries ในการสร้าง Web แน่ๆ แต่คำถามต่อไปคือ “แล้วเราจะทำงานกับมันให้ง่ายขึ้น เสร็จเร็วขึ้นได้หรือเปล่า?” ตรงนี้แหละครับ ที่ผมได้เลือก Adobe Edge Reflow CC มาเป็นเครื่องมือในการออกแบบ Website ในยุค Tablet และ smartphone ครองโลก หากคุณเพิ่งได้รู้จัก Adobe Edge Reflow CC งั้นให้ผมได้ช่วยแนะนำเครื่องมือนี้นะครับ 🙂
Adobe Edge Reflow CC เป็นอีกโปรแกรมหนึง ที่ใช้ออกแบบ Web Layout ครับ ใช่แล้ว Web Layout (รูปร่างหน้าตาของ Web page) ไม่ใช่โปรแกรมที่ใช้สร้างและจัดการ Website เหมือนกับ Adobe Dreamweaver ที่เรารู้จักกันดี
Edge Reflow CC เกิดมาเพื่อการออกแบบ Web Layout ยุคอุปกรณ์พกพาเกลื่อนเมืองโดยเฉพาะ และทำให้ง่ายเข้าโดยการกันส่วน coding ออกไป ให้เหลือแค่ 2 ส่วน นั่นคือหน้าต่างเอาไว้ปรับค่าต่างๆ ของ CSS และส่วนจำลองหน้าตาของ Web page ที่เราสามารถนำภาพหรือข้อความ มาลากๆ วางๆ ได้คล้ายๆ กับ Photoshop แต่ทั้งหมดจะถูกเปลี่ยนเป็น HTML และ CSS ไว้ให้เราเอาไปใช้งานในส่วนต่อไปได้ (Dreamweaver ยังอยู่นะจ๊ะ) ดังนั้น Designer จะชอบ Edge Reflow เป็นพิเศษครับ
และคำตอบของคำถามคาใจหลายๆ คนคือ Edge Reflow ไม่ได้มาแทนที่ Adobe Dreamweaver อย่างที่คนอื่นๆ เข้าใจผิดกัน (อ่านข้อเปรียบเทียบระหว่าง Adobe Edge Reflow และ Adobe Dreamweaver) ในตอนแรกคุณจะรู้สึกว่าโปรแกรมนี้ดีมาก อยากเอามาใช้แทน Dreamweaver จังเลย แต่ใช้ๆ ไปเอ๊ะ ไม่มี code?! เอ๊ะ ไม่มี Sitemap!? และอีกหลายๆ เอ๊ะ จนคุณพบว่า Adobe Edge Reflow เป็นแค่ฟันเฟืองตัวหนึงในขั้นตอนการออกแบบ และสร้าง Website ใช่เครื่องมือม้วนเดียวจบอย่าง Dreamweaver
หวังว่าคงพอให้คุณรู้จัก Edge Reflow แบบเบาๆ ก่อนนะครับ ถ้ามีคำถามอะไร comment ถามไว้ด้านล่างของเพจนี้ได้ครับ
ยืนยันว่าคุณควรจะมีความรู้ด้าน CSS ครับ แต่ไม่ต้องลึกมากจนเหาะเหินเดินอากาศได้ แต่ต้องรู้ส่วนที่จำเป็น จากที่ผมจัดฝึกอบรมด้าน Responsive Web Design และเลือก Edge Reflow มาเป็นเครื่องมือ คนที่มาอบรมต้องมีความรู้ด้าน CSS พอสมควร ไม่งั้นจะใช้เครื่องมือของ Edge Reflow ได้ไม่คล่อง
เพราะ Egde Reflow จะแตกต่างจาก Photoshop ที่ชัดเจนคือการวางตำแหน่งจะอิงหลักของ CSS ทั้งหมด ไม่เหมือนกับตำแหน่ง X,Y ใน Photoshop ทำให้ Graphic Designer ที่ไม่มีความรู้ด้าน CSS มาใช้งานกระโดดมาใช้แล้วจะอึ้ง ทึ่ง งึ่ง งง เพราะไม่มีพื้นฐาน ใช้ไปพาลจะหงุดหงิดเปล่าๆ
ดังนั้นหากคุณไม่มีความรู้ด้าน CSS และต้องการออกแบบ Website ควรตามมาดู video ที่ผมสอนพื้นฐาน CSS เอาไว้ เวลาใช้ Edge Reflow จะได้ไม่งงกัน ใครมีพื้นฐานหรือเป็น Web Designer อยู่แล้วก็ลุยไปด้านล่างต่อได้เลย
การเอา Edge Reflow มาใช้งาน เราจำเป็นต้องติดตั้งผ่าน Adobe Creative Cloud Account (สมัครก่อนที่นี่) ซึ่งมีแบบสมัครฟรี และเสียตังค์ แบบฟรีจะติด Trial 30 วันครับ ดูวิดีโอได้ด้านล่าง
การสร้าง Responsive Web Layout บน Edge Reflow จะอาศัยเครื่องมือที่เรียกว่า Visual Breakpoint (ดู video อธิบายการทำงานของ Breakpoint ได้ที่นี่) ทำให้เราสามารถกำหนดตำแหน่งของวัตถุต่างๆ บนหน้าเว็บ สำหรับหน้าจอขนาดต่างๆ ได้สะดวกกว่าการไปนั่งเขียน CSS แบบธรรมดาครับ
แนวทางการทำงานสามารถดูและทำตามได้จากวิดีโอด้านล่างครับ
วิธีนำรูปภาพมาใช้ในการออกแบบ Web ด้วย Edge Reflow จะมีอยู่ 2 แบบครับ คือการนำภาพเข้ามาใช้ตรงๆ กับการนำภาพเข้ามาใช้เป็น background ตรงนี้แหละ ที่ทำให้ผลทีไ่ด้แตกต่างกันอย่างสิ้นเชิง สิบปากว่าไม่เท่าตาเห็น ดูวิดีโอด้านล่างกันดีกว่า
การใช้ Font จากบริการออนไลน์มาตกแต่งข้อความใน web page อย่าง Typekit นั้น ลดปัญหาปวดหัวเรื่อง font ไม่เหมือนกันระหว่างเครื่องลูกค้ากับเครื่องของ designer ได้ดีทีเดียว (เป็นปัญหาเก่าแก่ตั้งแต่ที่ผมเริ่มสร้าง web กันใหม่ๆ เลย) โดย Adobe ได้ทำให้การดึง font จาก Typekit มาใช้งาน
ซึ่งคนที่ซื้อ Adobe Creative Cloud แล้วจะเลือกใช้ font ของ Typekit ได้ทั้งหมดครับ และถ้าสนใจเบื้องลึกวิธีการเลือก font มาใช้งานบน web design ก็อ่านเพิ่มเติมได้ที่นี่
การออกแบบทุกชนิด ต้องมีการทดสอบก่อน การออกแบบ Responsive Web ด้วย Edge Reflow ก็เช่นกัน วิธีทดสอบว่า Layout ของเราทำงานได้อย่างถูกต้องไหม มี 3 แบบครับ นั่นก็คือ
ลองดูวิธีทำกันเลยดีกว่า
เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า