เบื้องหลังการออกแบบ แมคมือใหม่.คอม # 1

เนื้อหานี้เขียนขึ้นหลังจากที่ได้อัพเดทเวป พร้อมกับเปลี่ยนตีมของแมคมือใหม่.คอมเรียบร้อยแล้วในวันที่ 22 มีนาคม 2552

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

มาเริ่มกันต้องแต่ต้นนะครับ =)

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

ผมเริ่มต้นจากการทำหน้าเวปออกเป็น 2 ส่วนในตอนแรก เพราะผมต้องการความ compact และไม่ได้คิดว่าเนื้อหาในเวปจะมีมากขึ้นเหมือนที่เป็นอยู่ในปัจจุบันนี้... โดยรูปแบบตอนแรกหน้าเวปจะเหมือนกับ blog ปรกติ ที่จะมีเนื้อหาอยู่ที่ด้านขวา และพวก tag หรือเมนูอยู่ทางด้านซ้ายของตัวเวป .. เวลา 3 เดือนผ่านไปโดยประมาณ เวปแมคมือใหม่เริ่มมีเนื้อหาและ tag มากขึ้นเรื่อย ๆ ทำให้เริ่มที่จะดูลำบากกับรูปแบบ 2 ส่วนแบบเดิมนี้ เพราะว่าต้องเลื่อนขึ้นลงบ่อย ๆ ในการตามว่ามีอะไรเกิดขึ้นบ้างในเวป

จากตรงนั้นผมเลยแบ่งหน้าตาเวปออกเป็น 3 ส่วน คือมี sidebar 2 ด้าน (ซ้าย - ขวา) เพื่อแยกส่วนของข้อมูลออกเป็นชุด ๆ ตามภาพนี้

แลกมาด้วยต้องเปิดหน้าต่าง browser ที่กว้างขึ้น แต่สะดวกขึ้นในการมองภาพรวมของเวป

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

ปัญหาที่ว่านี้คือ เนื้อที่ของ sidebar ด้านข้าง กว้างไม่มากพอให้แสดงเนื้อหาที่ผมต้องการได้ .. ที่เกิดขึ้นคือ เมื่อเข้า link ไปอ่านในส่วนของ How-To ลึก ๆ แล้ว ตัว list หรือว่ารายการเนื้อหาจะเร่ิมแสดงผลซ้อนกันหลายบรรทัด ทำให้อ่านไม่รู้เรื่อง และดันหน้าเวปส่วนอื่น ๆ ให้ร่นลงไปเกินจำเป็น ผมจะลองยกตัวอย่างให้เห็นภาพง่าย ๆ ก็แล้วกันนะครับ

หน้าเวปเดิม แสดงผลแบบนี้
- หัวข้อ How-Tos
อันที่ 1
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ยว
กับ ABCDE
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ย
วกับ FGHIGKL
MNOP
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ยว
กับ FGHIGKLM
NOP

และนี่เป็นสิ่งที่ผมอยากให้เป็น

- หัวข้อ How-Tos อันที่ 1
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ ABCDE
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ FGHIGKLMNOP
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ FGHIGKLMNOP

ตรงนี้เลยเป็นข้อจำกัดของ ตีมเดิมที่พื้นที่ไม่พอ และขอบของแต่ละ block ที่มีอยู่ ผมคิดว่า น่าจะเอามาแสดงเนื้อหาให้มากขึ้นได้ ... ผมคิดว่า น่าจะหาทางออกให้ใช้ Screen real estate ได้ดีขึ้นกว่าที่เป็นอยู่

คำตอบที่ผมคิดได้คือ เวปที่มีเนื้อหา / รูปแบบเฉพาะแบบนี้ จะดีที่สุดคือ ต้องมีตีมเฉพาะ ซึ่งนั่นก็หมายความว่า ผมต้องทำตีมขึ้นมาใหม่เอง .. ตรงนั้น ทำให้ผมเริ่มต้นที่จะเรียนรู้ HTML, CSS, PHP เพื่อเอามาใช้งานการทำตีมให้แมคมือใหม่.คอม ครับ..

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

ผมคิดว่า คำตอบสำหรับเรื่องนี้คือ ผมรักเวปนี้มากจนผมอยากที่จะทำเองครับ .. ผมอยากให้เวปนี้พิเศษในแบบที่ไม่ค่อยมีใครทำกัน (เป็นประมาณว่า ถ้ามีบ้านก็อยากที่จะตกแต่งเองครับ )

• คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำเวป นั่งวาด อีโมชั่นไอคอนขึ้นมาไว้ใช้เอง (อันที่ใช้กันอยู่ใน macmuemai.com นี้ เป็นเซทที่ไว้ใช้ที่เดียวในโลกครับ )
• คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำเวป ไม่เคยสนใจเรื่อง SEO หรือว่า Flash
• คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำกราฟฟิก กับคนทำโปรแกรมทำงานร่วมกันได้ 100% แบบนี้ เพราะทำคนเดียวเลย ฮ่า... ถามเอง ตอบเอง แก้ปัญหาเอง
• และสุดท้ายคงมีไม่กี่เวป community ในประเทศไทย ที่ถูกสร้างขึ้นมาด้วยคนที่ทำตีมขึ้นมาเอง =)

ผมคิดว่า ถ้าผมเริ่มต้นจากตรงนี้ อนาคตจะไปทำงานกับใครก็น่าจะง่ายกว่าอยู่ ๆ ไปจ้างเขาเลย อย่างน้อย ทำให้ผมพอจะมีความรู้พื้นฐานไปสื่อสารกับคนทำงานอีกด้านหนึ่งบ้าง .. ซึ่งนั่นน่าจะดีกว่าในความคิดผมครับ

พอเท่านี้ก่อน เดี๋ยวมาเขียนต่อวันหลังนะครับ =)