Radiz Sutthisoontorn

เจ้าของ Website หลาย ๆ คนต่างก็อยากได้ผลลัพธ์ทาง SEO ที่สูง ๆ บางคนใช้วิธีการโกงต่าง ๆ นานา เพื่อให้ Website ของพวกเขานั้นได้ผลลัพธ์ทาง SEO อย่างที่คาดหวังไว้ ในทางเดียวกัน ด้วยเหตุผลเดียวกันนี้จึงทำให้เกิดอาชีพ search engine optimizer เพื่อสนองตอบความต้องการ เจ้าของ Website ต่าง ๆ ที่ต้องการผลลัพธ์ทาง SEO สูง ๆ เช่นนี้ ซึ่งหลาย ๆ ผู้ให้บริการในส่วนนี้ใช้เทคนิคที่ไม่ค่อยจะดีต่าง ๆ นานา อาทิ การ spam ตัวอย่างเช่น เอา Link ไปแปะไว้ในเวปที่มี page ranking สูง ๆ ซึ่งสร้างความเดือดร้อนให้กับคนอื่นมาก หรือ การซ่อนข้อมูล ที่ไม่เกี่ยวข้องกับเนื้อหาใน Website (User มองไม่เห็นแต่ Search Engine นั้นมองเห็น) หรือ Trick อื่น ๆ ต่าง ๆ ที่เยอะแยะมากมายอธิบายไม่หมด เหล่านี้เรียกว่า Black Hat ผมคิดว่าบางท่านที่กำลังอ่านนั้นก็คงใช้กันอยู่ด้วยความเคารพจะขอเอ่ยไว้ ก่อนว่าผมไม่ได้ต้องการโจมตี หรือ แฉใคร เพียงแต่อยากให้หันมาลองพิจารณาวิธีนี้ที่ผมจะเขียนให้ท่านอ่านกันบ้าง

การทำ SEO แบบ Black Hat นั้นเป็นอันตรายทั้งต่อ User และ Search Engine อธิบายคร่าว ๆ ง่าย ๆ สั้น ๆ ว่า การกระทำแบบนี้จะส่งผลให้ Search Engine นั้นต้องทำงานหนักมากขึ้น และ User อาจจะได้รับข้อมูลที่ไม่ถูกต้องอีกด้วย สิ่งที่ผมกำลังจะกล่าวถึงนั้นคือ White Hat SEO ซึ่งเป็นการพัฒนา Website ของคุณง่าย ๆ ด้วยการเขียน code ให้สนับสนุนกับระบบของ Search Engine เช่น แยก Style ออกจาก html code ลดการใช้ JavaScript ที่ไม่จำเป็น และ ลดความหนาแน่นของ code (ใช้เท่าที่จำเป็น) เหล่านี้ จะทำให้ง่ายต่อการ Spider ของ Search Engine ง่ายต่อการ index และ ง่ายต่อการจัดอันดับ Page Rank

CSS จะมีอายุครบ 10 ขวบในปีนี้ (17 ธันวาคม 2550) น่าจะเฉลิมฉลอง พร้อมกับมาลองมองย้อนกลับไปในอดีต และ มาร่วมคิดวางแผน มองไปในอนาคตเพื่อพร้อมที่จะก้าวไปข้างหน้า ผมถือว่า CSS เป็นจุดผกผันของวงการ Web Design และ CSS เป็นต้นกำเนิดแห่งรากฐานที่จะแยก Style ออกจากภาษาโครงสร้าง อำนวยความสะดวกสบายให้เหล่า Designer ทำงานได้สะดวกขึ้น และ สวยงามมากขึ้น ด้วย properties อันหลากหลายของมัน และ CSS3 ที่กำลังจะเปิดตัวในวันเกิดของ CSS ในปีนี้จะอุดมไปด้วย properties ที่ถูกร้องขอจากเหล่า Designer ทั่วโลก (W3C จะฉลอง 10 ขวบให้ CSS ในปีนี้ด้วยการ update เวอร์ชั่นใหม่ของ Online CSS Validator และ จัดทำ CSS10Gallery โดยคัดเลือกงานของสุดยอด Designer ระดับโลกมาโชว์ไว้ใน Gallery นี้: CSS: Happy tenth birthday โดย Michael(tm) Smith)

ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ CSS สำหรับ Layout ที่ถูก design มาหลาย ๆ column แล้ว column เหล่านั้นต้องมีความสัมพันธ์กันเมื่อ content ของฝั่งใดฝั่งหนึ่งนั้นยืดออกในแนวตั้ง อีกข้างก็ต้องยืดตามเท่ากันแม้ว่าจำนวน content ที่อยู่ด้านในนั้นจะไม่เท่ากันก็ตาม ถ้าเป็นเมื่อก่อนผมจะใช้วิธีทำ background picture มาหลอกเอาที่ block element หลัก หรือ ไม่ก็เขียน CSS hack ต่าง ๆ เท่าที่จะหาได้ หรือ เคย bookmark เก็บ ๆ เอาไว้ ถ้าจนปัญญาจริง ๆ ก็คงต้องพึ่งเจ้า czarft แห่ง thaiNUI.com เพื่อนสนิทคนนี้ ให้ช่วยเรื่อง Javascript แต่เมื่อเดือนที่แล้วผมได้ถูกเปิดหูเปิดตาด้วยการคิดนอกกรอบอย่างสร้างสรรค์ (จริง ๆ นะ ไม่เหมือนใครบางคน) ของ Alan Pearce ทำให้ผมได้เห็นว่าบางทีเราก็ควรจะมองจากมุมข้างนอกบ้างก็ดี อย่างน้อยชีวิตก็ไม่ได้อยู่ในกรอบแล้วกรอบอีก ไปซะหมด (ต้องปีนให้หลุดกรอบ แม้นมันจะมีหลาย ๆ กรอบ ก็ต้องพยายามข้ามออกไปบ้าง)

Pearce กล่าวว่าเขาได้พยายามใช้ idea จากที่ designer หลาย ๆ คนที่เขียนเกี่ยวกับเรื่องนี้ไว้แล้วตาม blog ต่าง ๆ แต่ก็ยังไม่ได้สิ่งที่เขานั้นต้องการอย่างแท้จริงเพราะบางวิธีนั้นก็เป็นวิธีที่ใช้กับ multi-column design แบบธรรมดา ๆ หรือ เป็น elastic อย่างที่เขาต้องก็จริงแต่ว่ามันยังคงมี bug ในหลาย ๆ browser เขาจึงเริ่มมานั่งทบทวนด้วยตัวเองแล้วลองมองต่างมุมจากหลาย ๆ บทความที่เขาได้อ่านผ่านมาดู สิ่งที่เขาคิดได้คือ การใช้ border ให้เป็นประโยชน์… อย่างไรล่ะ? มาลองคิดตาม concept ที่เขาคิดขึ้นมาในหัวดู concept มันมีอยู่ว่า

เมื่อเราใช้ !important เติมท้าย value ของ property ใดใดของ CSS โมเดิร์นบราวเซอร์ส่วนใหญ่นั้นจะเลือกทำตามคำสั่งนี้ แต่ทว่า IE6 หรือ เวอร์ชั่นต่ำกว่านั้น จะมีปัญหากับเจ้า !important นี้ คือ เมื่อมีการเขียน prooperty เดียวกันซ้ำเข้าไปใน attribute เดียวกันอีกครั้งนั้น เจ้า IE6 หรือ ในเวอร์ชั่นต่ำกว่านั้นจะทำตาม property ตัวเดียวกัน ที่เขียนไว้ล่างสุดแทน

พูดง่าย ๆ ว่ามันไม่เห็น priority value ของ !important ด้วยเหตุนี้เราสามารถเอาไปประยุกต์ใช้ในงานต่าง ๆ ของเราได้ ดังตัวอย่าง

p {background: green !important; background: red; }

เมื่อคุณลองนำไปเปิดใน modern browser ตัวหนังสือทั้งหมดใน p จะแสดงผลเป็น paragraph ที่มีสีพื้นหลังเป็นสีเขียว แต่ใน IE6 หรือ ต่ำกว่าจะแสดงเป็นสีแดงแทน

หวังว่าคงเป็นประโยชน์ในการนำไปใช้ครับ ขอโทษที่ไม่ได้เขียนเกี่ยวกับการ hack นาน

เมื่อคุณย่างก้าวที่จะเข้าสู่โลกของการ design แบบ tableless layout นั้น สิ่งที่คุณต้องคิดถึงไม่ใช่แต่เพียงคิดว่าจะจัดวาง container elements ของคุณอย่างไรแต่สิ่งที่คุณไม่ควรมองข้ามคือการจัดการ selector ของคุณด้วย

ข้อที่4: ความสุดยอดไม่ใช่ Desgin จนไม่มีอะไรจะใส่ลงไปแล้ว หากแต่ความสุดยอดนั้น คือ ไม่มีอะไรจะตัดออกไปแล้วต่างหาก

การที่จะเขียน code markup ขึ้นมาให้สนับสนุนกับมาตรฐานเต็ม ๆ นั้นมันขัดแย้งกับการที่เราใช้ table ที่เป็น container elements บรรจุทุก ๆ สิ่ง ทุก ๆ อย่าง แบบเมื่อก่อนโดยสิ้นเชิง เราจะใช้ container elements ให้เหมาะสมกับข้อมูล และ ไม่เอามาบรรจุ content ของเรามากมายซับซ้อนเหมือนแต่ก่อน คิดง่าย ๆ เลยให้คิดว่าเราจะเขียนหนังสือสักเล่มเราจะจัดระบบ content ของเราอย่างไรเริ่มและจบด้วยอะไร
อย่าเพิ่งคิดว่าจะปรุงเสริมเติมแต่งมันอย่างไร ให้เริ่มที่ content ของเราก่อน ดูว่าเราจะใช้อะไรร่วมกัน อะไรที่ต้องใช้แยกกัน (หมายถึง CSS properties ของ elements ต่าง ๆ)  ใช้เท่าที่จำเป็น และ ประหยัด (design อย่างพอเพียง) อย่ากลัวที่จะต้องใช้ divs  หรือ spans หรือ p หรือ อื่น ๆ ที่มี class ร่วมกันให้คิดเสียว่ามันเป็นการจัดหมวดหมู่ข้อมูล ก็เหมือนกับที่คุณจัดเอกสาร หรือ จัดรูปเล่มหนังสือนั่นแหละ เรียงลำดับ priority ของข้อมูลเริ่ม coding จากสิ่งที่สำคัญที่สุดไปหาสิ่งที่สำคัญน้อยที่สุด (เลือก tag ให้เหมาะสม) ตัด tag ที่ไม่จำเป็นออกไป ใช้เท่าที่ควรจะใช้ (ผมเริ่มอย่างนี้น่ะนะ) แล้วก็มาคิดว่าเราจะ design หน้าตาออกมาอย่างไร ข้อนี้มันจะเกี่ยวเนื่องไปถึงข้อต่อไป …

ข้อที่5: สำหรับ site ใหญ่ ๆ ที่มีทีมดูแล หรือ สร้างหลายคน (website องค์กรใหญ่ ๆ หรือ web portal ต่าง ๆ หรืออะไรก็ตามแต่)

website ขององค์กรใหญ่ ๆ หรือ website ที่มีความหนาแน่นของข้อมูลมาก ๆ หรือ บริษัทที่มีการแยกแยะหน้าที่เป็นระบบเป็นหมวดหมู่ บางที designer อาจจะยังไม่เข้าใจถึง content ที่เราต้องการจะใช้ หรือ โครงสร้างลำดับขั้นของข้อมูลอาจจะทำให้ design ที่ออกแบบออกมานั้นไม่เอื้อต่อการที่จะทำเป็น มาตรฐานเท่าไหร่ (ปัญหานี้เคยประสบกันบ้างไหมครับ) เพราะฉะนั้นทุก ๆ ครั้งก่อนจะเริ่มลงมือทำอะไรให้ทีมพัฒนานั้นมีการประชุมตกลงกันก่อน คุยกันให้แล้วเสร็จในทุก ๆ สิ่งทุก ๆ อย่าง เพราะการคิดไปเรื่อยโดยไม่มีการกำหนดขอบเขต หรือ การกำหนดแนวทางเดิน และ/หรือ การเจริญเติบโตของ site ทำไปเพียงวันวันนั้น จะเกิดการสะสมของข้อมูลที่ใช้ไม่ได้ หรือ Link ที่เสียก็ได้ รวมไปถึงการสิ้นเปลือง class หรือ tag ที่ไม่จำเป็นต้องใช้ก็ได้