งานพับลิชชิ่ง (Web publishing)

งานพับลิชชิ่ง งานดีไซน์ และงานพัฒนาแบ่งกันอย่างไร

งานดีไซน์กำหนดหน้าตาของหน้าจอ งานพับลิชชิ่งแปลงหน้าตานั้นเป็นโค้ดที่เบราว์เซอร์อ่านได้ ส่วนงานพัฒนาสร้างฟังก์ชันที่จัดเก็บและประมวลผลข้อมูลอย่างการจอง · การชำระเงิน สำหรับเว็บไซต์เล็ก ๆ บางครั้งคนเดียวรับหลายขั้นตอนไปพร้อมกัน

งานพับลิชชิ่งใช้ภาษาหลัก 3 ภาษา HTML เป็นโครงของเนื้อหาอย่างหัวข้อ · ข้อความ · รูปภาพ CSS ดูแลการตกแต่งอย่างสี · ขนาด · การจัดวาง ส่วน JavaScript ดูแลการเคลื่อนไหวอย่างการเปิดเมนู · การเลื่อนรูป

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

เว็บไซต์แนะนำธุรกิจที่ไม่มีการจอง · ชำระเงิน บางครั้งแค่งานดีไซน์กับงานพับลิชชิ่งก็เสร็จสมบูรณ์ กลับกัน ถ้ามีการจอง · ชำระเงิน จะมีขั้นตอนเชื่อมฟังก์ชันที่พัฒนาเข้ากับหน้าจอที่พับลิชแล้วเพิ่มเข้ามา ระยะเวลาก็นานขึ้น

ตัดสินอย่างไรว่างานพับลิชชิ่งทำได้ดี

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

เกณฑ์เหล่านี้มองด้วยตาไม่เห็นทันทีจึงตรวจเองได้ยาก แต่แค่ถามบริษัทว่า “ตรวจตามเกณฑ์อะไร” ก็พอ อีกวิธีคือใส่ที่อยู่เว็บใน PageSpeed Insights ที่ Google ให้ใช้ฟรี แล้วดูผลการตรวจความเร็วไปด้วย

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

• หัวข้อ · หัวข้อย่อยเขียนด้วยแท็กหัวข้อจริง ให้เครื่องมือค้นหาและโปรแกรมอ่านหน้าจออ่านโครงสร้างได้หรือไม่
• ตัวอักษรกับรูปไม่ซ้อนกันไม่ว่าจะเป็นความกว้างของมือถือ · แท็บเล็ต · คอมพิวเตอร์
• ลดขนาดไฟล์รูปไว้ให้เปิดได้เร็วแม้อินเทอร์เน็ตช้า
• ปุ่มใหญ่พอให้กดด้วยนิ้ว
• ขยายตัวอักษรในการตั้งค่ามือถือแล้วเนื้อหาไม่ถูกตัด

คำอธิบายรูปภาพ (alt) ควรเขียนอย่างไร

คำอธิบายรูปภาพ (alt) คือประโยคสั้น ๆ ที่ถ่ายทอดเนื้อหาในรูปแทนให้คนที่มองไม่เห็นรูป ประโยคนี้จะถูกอ่านเมื่อรูปเปิดไม่ขึ้น หรือเมื่อลูกค้าฟังเว็บไซต์ผ่านโปรแกรมอ่านหน้าจอ

ถ้าเขียนว่า “รูปภาพ” “image1” จะไม่ได้ให้ข้อมูลอะไรเลย ถ้าเป็นรูปเมนูคาเฟ่ ให้เขียนสิ่งที่เห็นในรูปอย่างเจาะจง เช่น “เค้กสตรอว์เบอร์รีวิปครีมหนึ่งชิ้นกับอเมริกาโน”

Google ก็แนะนำว่า alt เป็นแอตทริบิวต์ที่สำคัญที่สุดในการถ่ายทอดข้อมูลรูปภาพในการค้นหารูปภาพ แต่การยัดคีย์เวิร์ดเรียงกันกลับไม่ดี ให้เขียนเป็นประโยคธรรมชาติที่อธิบายรูป ส่วนรูปที่ไม่มีความหมายอย่างลวดลายตกแต่ง ปล่อยคำอธิบายว่างไว้จะถูกต้อง

ตรวจหน้าจอที่พับลิชแล้วอย่างไร

ถ้าดูผลงานพับลิชชิ่งจากอุปกรณ์เดียว มักพลาดปัญหาไป ทำตามลำดับด้านล่างราว 10–15 นาที ก็หาปัญหาเจอเกือบทั้งหมด

ถ้าพบปัญหา ให้แจ้งพร้อมภาพแคปหน้าจอว่าเป็นอุปกรณ์อะไร หน้าจอไหน ปัญหางานพับลิชชิ่งหลายครั้งเกิดเฉพาะบางรุ่นหรือบางความกว้างหน้าจอ ถ้ามีชื่ออุปกรณ์จะแก้ได้เร็วขึ้นมาก

เวลาตรวจ เปิดแบบร่างไว้ข้าง ๆ แล้วเปรียบเทียบจะดี แต่ความต่างเล็กน้อยที่เกิดจากความกว้างหน้าจอต่างกันเป็นเรื่องปกติ ให้เน้นดูจุดที่ข้อมูลหายไปหรือลำดับเปลี่ยน

1. 01เปิดหน้าจอเดียวกันบนมือถือของคุณ และมือถือรุ่นอื่นของครอบครัว · พนักงาน
2. 02หมุนมือถือเป็นแนวนอน แล้วดูว่าการจัดวางพังไหม
3. 03ขยายขนาดตัวอักษรในการตั้งค่ามือถือ แล้วเปิดดูอีกครั้ง
4. 04บนคอมพิวเตอร์ ค่อย ๆ ย่อหน้าต่างเบราว์เซอร์ แล้วดูการซ้อนของช่องต่าง ๆ
5. 05ปิด Wi-Fi แล้วเปิดด้วยอินเทอร์เน็ตมือถือ ดูว่ารูปโหลดช้าเกินไปไหม
6. 06ลองกดทุกเมนู · ปุ่ม · ลิงก์เบอร์โทรอย่างละครั้ง

ปัญหาที่พบบ่อยในขั้นตอนพับลิชชิ่งมีอะไรบ้าง

ปัญหาที่พบบ่อยที่สุดคือข้อความชั่วคราวสั้น ๆ ในแบบร่างถูกเปลี่ยนเป็นข้อความจริงที่ยาวกว่า จนล้นช่อง ถ้าชื่อบริการของร้านทำผมยาว หรือคำอธิบายคลาสของร้านงานฝีมือยาว บนมือถือจะขึ้นบรรทัดใหม่หลายครั้งจนการจัดวางเพี้ยน

ตารางที่มีหลายช่องอย่างตารางราคาหรือตารางเวลา บนมือถือมักล้นไปด้านข้างจนถูกตัด เนื้อหาแบบนี้อาจต้องจัดวางต่างออกไป เช่น เปลี่ยนเป็นรูปแบบการ์ดบนมือถือ

หน้าที่มีรูปเยอะอย่างหน้ารายละเอียดสินค้าของร้านงานฝีมือ ถ้าใช้วิธีโหลดรูปเมื่อเลื่อนเข้าใกล้หน้าจอ (Lazy loading) หน้าจอแรกจะเร็วขึ้น ลองถามบริษัทว่าดูแลความเร็วของหน้าที่มีรูปเยอะอย่างไร

• อัปโหลดรูปต้นฉบับขนาดใหญ่ตรง ๆ จนหน้าจอแรกโหลดช้า
• บนมือถือป๊อปอัปบังทั้งหน้าจอจนหาปุ่มปิดยาก
• ไฟล์ฟอนต์หนักจนตัวอักษรขึ้นช้า
• ข้อมูลที่เห็นเฉพาะบนคอมพิวเตอร์ หายไปบนมือถือ

เรื่องงานพับลิชชิ่ง ควรถามบริษัทรับทำเว็บไซต์อะไรบ้าง

งานพับลิชชิ่งไม่ใช่เรื่องที่คุณต้องเลือกเอง แต่ถ้าถามถึงเกณฑ์ ก็จะรู้ว่าบริษัทรับประกันคุณภาพระดับไหน

หลังเปิดเว็บไซต์ เมื่อระบบปฏิบัติการมือถือหรือเบราว์เซอร์อัปเดต บางครั้งหน้าจออาจเปลี่ยนไปบ้าง ตรวจไว้ด้วยว่ากรณีแบบนี้การดูแลรักษาเว็บไซต์จะแก้ให้หรือไม่

ถามด้วยว่าหน้าจอมือถือปรับแบบ Responsive ภายในเว็บไซต์เดียวกัน หรือทำหน้าจอสำหรับมือถือแยก ถ้าทำแยก เวลาแก้เนื้อหาอาจต้องแก้ทั้งสองที่

• ตรวจบนอุปกรณ์และเบราว์เซอร์อะไรบ้าง
• ลดขนาดรูปและตรวจความเร็วหรือไม่
• ใส่พื้นฐานด้านการค้นหา · การเข้าถึงอย่างคำอธิบายรูป (alt) · โครงสร้างหัวข้อหรือไม่
• ข้อความอย่างราคา · เวลาเปิดทำการ วันหลังใครเป็นคนแก้ และแก้อย่างไร