Responsive Web Design

สรุปแนวคิดออกแบบเว็บไซต์แบบ Content First จากงาน Event Apart

เรื่องที่เกี่ยวข้อง - Content First, Event Apart, Mobile First, Responsive Web Design

โค้ชพลเชื่อว่า เทคนิคและแนวคิดการออกแบบเว็บไซต์, mobile application, หรือ ebook, epub ตั้งแต่คอมพิวเตอร์ตั้งโต๊ะ ยัน smart phone และ tablet กำลังเข้าสู่ส่วนที่ละเอียดยิ่งกว่า ที่มีชื่อเรียกว่า “Content First

Content First ไม่ใช่เรื่องใหม่แกะกล่อง เรื่องนี้ถูกหยิบยกขึ้นมาพูดคุยกันตั้งแต่ปี 2012 แล้ว เพียงแต่หลายๆ คนยังไม่เข้าใจ วิ่งไปหา Responsive Web Design กันยกใหญ่ เพียงเพื่อดูว่าจะทำให้เว็บไซต์ยืดหดตามขนาดหน้าจอโทรศัพท์และแท็บเล็ตได้อย่างไร

แต่แนวคิดที่ละเอียดกว่า Responsive Web Design ก็คือ

  1. Mobile-First
  2. และที่เริ่มชัดเจนขึ้นก็คือ Content First

โค้ชพลชอบแทรกแนวคิดพวกนี้ใน Workshop อย่างสม่ำเสมอ เพราะแนวคิดออกแบบสำหรับ PC มันไม่สามารถสร้างงานที่เหมาะสมบน Smart phone และ Tablet ได้ ต้องค่อยๆ ปรับให้เหมาะสมกับพื้นฐานแต่ละคน

และวันนี้พอดีโค้ชพลไปเจอสรุป Keynote ของ Jeffrey Zeldman โดย Luke Wroblewski ขอเอามาสรุปเป็นภาษาไทย โดยแทรกประสบการณ์ของโค้ชพลจากงานต่างๆ เข้าไปด้วยนะครับ

แนวคิดสำคัญ

  • การมองว่าเว็บไซต์คือโบรชัวร์โฆษณา จะทำให้การเปลี่ยนแปลงงานออกแบบทีหลังนั้นยากขึ้น
  • แนวคลิก “3-คลิก-จบ” ในการออกแบบเว็บไซต์อาจไม่จำเป็นเสมอไป เพราะจากประสบการณ์ ถ้ามีการลำดับขั้นตอน และทำให้ผู้คนรู้ว่าเข้าใกล้เป้าหมาย คนจะทำต่อจนเสร็จ
  • เป้าหมายของเว็บไซต์: เข้าถึงลูกค้าที่ตรงกลุ่มเป้าหมาย ด้วย content ที่ใช่ และเวลาที่เหมาะสม
  • คนใช้เว็บเป็นผู้ควบคุมการแสดงผลของเว็บ ผ่าน Web browser
  • ถ้าเราออกแบบ Content บนเว็บไซต์ไม่ดี คนใช้จะทำให้มันดีเอง โดยการโยนเข้าระบบอื่น เช่น Pocket หรือ Instapaper (คนใช้ต้องมีความรู้ส่วนนี้ด้วย)
  • ความท้าทายของนักออกแบบเว็บไซต์ตอนนี้: ทำอย่างไรที่จะสื่อความเป็นตัวเราในผลงาน แทนที่จะถูกกลืนกินโดยเนื้อหาของเว็บไซต์
  • งานออกแบบที่ไม่มุ่งช่วยเหลือคนใช้ ก็จะไม่ส่งผลดีต่อตัวธุรกิจเช่นกัน
  • งานออกแบบที่มุ่งร้ายต่อคนใช้ จะส่งผลร้ายต่อตัวธุรกิจในระยะยาว
  • ถ้าคุณออกแบบงานที่เล่นลูกไม้ (trick) กับคนใช้ มันจะย้อนกลับมาแว้งกัดทีหลัง
  • เมื่อ 1 ใน 3 ข้อด้านบนเกิดขึ้น เจ้าของธุรกิจนั้นจะเป็นผู้จ่ายค่าบทเรียนราคาแพง

เมื่อ 1 ใน 3 ข้อด้านบนเกิดขึ้น เจ้าของธุรกิจนั้นจะเป็นผู้จ่ายค่าบทเรียนราคาแพง (ไม่ใช่นักออกแบบ)

เมื่อให้ Content นำการออกแบบ

  • การออกแบบโดยไม่มี content คือการตกแต่งให้สวยงามเท่านั้น และมันยากเสมอ
  • การหาสไตล์ที่เหมาะสมกับงานนั้นยากมาก โดยเฉพาะทำโดยไม่มี Content
  • การสร้างสร้าง Theme ที่เหมาะสมสำหรับทุกงานนั้นยากมาก การออกแบบโดยไร้ content ส่วนใหญ่จะจบที่ Minimalist เพราะมันเข้ากับ Content อะไรก็ได้
  • งานออกแบบที่เข้าใจ และเน้นตัว content ได้ จะส่งผลดีเสมอ

Progressive และ Responsive Design

 

  • ยุคของ “ควรเปิดดูบนบราวเซอร์…”​ (Best viewed with…) จบไปนานแล้ว อย่าบังคับผู้คนให้ใช้ Browser เฉพาะเพื่อเข้าดูเว็บคุณ (อันนี้เจอมากับตัว)
  • Progressive Enhancement เป็นวิธีที่ดีมาก และทำให้มั่นใจว่าตัวเว็บจะเข้าถึงผู้คนได้มากที่สุด
  • Responsive Design มีความยืดหยุ่นสูง การสร้าง Layout ที่แปลงร่างได้นั้นมีอิสระมาก
  • เว็บแบบ Responsive เกิดขึ้นมาเพื่อตอบความต้องการของผู้คนที่ใช้อุปกรณ์พกพาโดยเฉพาะ
  • แนวคิด Mobile First ถูกพิสูจน์แล้วว่าเหมาะสมกับการนำมาใช้ในขั้นตอนการออกแบบ Responsive Web Design (โค้ชพลนำมาให้ฝึกใน workshop ทุกครั้ง เช่น Workshop 1, Workshop 2)
  • แนวคิด Mobile First จะทำให้เราปลดของไม่จำเป็นออกจากเว็บไซต์ และเน้นไปที่ผู้ใช้ได้ชัดเจนขึ้น
  • Mobile First tips: 3 สิ่งที่ควรอยู่บนเว็บไซต์คืออะไร?
  • Mobile First = User First = Content First
Web design: Mobile First, Content First Workshop Kasetsart
ช่วง Mobile First: Workshop ของการอบรม Responsive Web Design Workshop 2015 ให้กับบุคลากรของม.เกษตรศาสตร์

สรุป

  • Content คือปัญหาหลักของการออกแบบเว็บไซต์ งานออกแบบที่ดีจะหลีกเลี่ยงปัญหานี้ โดยให้ความสำคัญกับ Content ก่อน
  • ถ้าเว็บที่เราออกแบบนำเสนอ Content ได้ไม่ดี ผู้คนจะหาทางเข้าถึง Content เอง (เช่นไปหาจากเว็บอื่น หรือโยนเข้าแอพ ซึ่งอาจจะผิดจุดประสงค์ของเว็บเรา)
  • Smartphone และ Tablet รวมถึง Responsive Design จะบังคับให้เราเน้นไปที่ความสะดวกในการใช้งานของผู้คน และ Interaction ใหม่ๆ กับ Content เอง
  • ถ้านักออกแบบไม่เริ่มออกแบบ โดยให้ความสำคัญกับ Content ส่วนมากจะจบลงที่ลูกค้านั่นแหละ ที่จะจัดการเอง

ถ้านักออกแบบไม่เริ่มออกแบบ โดยให้ความสำคัญกับ Content ส่วนมากจะจบลงที่ลูกค้านั่นแหละ ที่จะจัดการเอง

เทคโนโลยีต่างๆ เกิดตามหลังแนวคิด ดังนั้นแนวคิดอย่าง Mobile-Fisrt ให้กำหนดเครื่องมือมากมาย เช่น Adobe Edge Reflow, Sketch, CSS Media Queries หรือ Bootstrap

ดังนั้นการเข้าใจแนวคิด จะทำให้เราแตกฉานในการนำเทคโนโลยีมาใช้งาน อย่างที่โค้ชพลจะพูดเสมอในการบรรยาย กับ Workshop นะครับ

อ้างอิง – Event Apart 

Photo by Serge Kit

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save