12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards (3)

ข้อที่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 ที่ไม่จำเป็นต้องใช้ก็ได้

เพราะฉะนั้นควรกำหนด และ วางแผนอย่างรอบคอบกันก่อนครับ (ถ้าคุณแคร์ standard นะถ้าคุณไม่แคร์ก็เอาเลยเดินหน้าฆ่ามัน อยากทำอะไรก็ทำ เหอ ๆ)

ข้อที่6: เราไม่สามารถหลีกเลี่ยง browser ที่ครองตลาดมานานได้

Browser ชั้นนำหลาย ๆ ตัว ในหลาย ๆ ปีที่ผ่านมาต่างแข่งกันพัฒนาอย่างบ้าคลั่ง ให้ render การแสดงผลด้วย Table Layout ให้ละเอียดและสวยงามที่สุด เรื่อง Standard หรือ CSS Layout ยังไม่เป็นประเด็นหลัก ๆ ที่ทำให้พวกเหล่าผู้พัฒนาสนใจกันมากเท่าไรนัก จนกระทั่งได้มีการเปิดตัว Gecko และ KHTML ขึ้นค่าย Browser ยักษ์ ๆ จึงเริ่มเล็งเห็นความสำคัญตรงนี้ การพัฒนาการ rendering ในแบบ CSS Layout นั้นเริ่มขึ้นในปี 1998 และก็เริ่มพัฒนาเรื่อยมาจนถึงปัจจุบัน

ในการทำงานจริง ๆ แล้วเราไม่สามารถละเลยตรงนี้ได้เลย เพราะเราต้องมองถึง User ของเราที่ไม่รู้อิโหน่อิเหน่ด้วยเพราะบางคนนั้นไม่ได้มีความรู้ทางด้านเทคนิคพวกนี้เลย เพราะฉะนั้นก็ต้องดูหลาย ๆ อย่างด้วยเหมือนกันใช่ว่าจะตามใจเราอย่างเดียวมันก็ไม่ได้ ตรงนี้เลยเป็นต้นกำเนิดของการ hack CSS! เพื่อให้การแสดงผลเหมือนกันทั้งหมดในทุก ๆ browser ให้ได้มากที่สุด (แต่อย่างที่ผมบอก พยายามแก้ไขปัญหาด้วย standard หรือ hack แบบตาม standard ให้มากที่สุดเท่าที่จะทำได้ หมดทางเลือกแล้วถึง hack แบบฝ่าฝืนกฏจะดีกว่าครับ)

ข้อที่7: code และ เนื้อหา ที่เรียงกันเป็นลำดับและเป็นเหตุเป็นผล เป็นสิ่งที่ดีที่สุดที่ควรจะมีใน website ที่ออกแบบตาม Standard

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

  • เมื่อสั่ง Print ก็เป็นอีกหน้า Page หนึ่งที่ print ออกมา นั่นก็คือเขียน printing Style Sheets นั่นเอง
  • เขียน tag และ CSS ให้เข้าใจง่าย และ ง่ายต่อการปรับปรุง ปรับแก้ในภายหลัง
  • ใช้ script ให้น้อยลง
  • พยายามให้มีการกด keyboard หรือ ใช้เมาส์ เพื่อเลื่อนดูซ้ายขวาให้น้อยที่สุด
  • เมื่อมีการ re-design ทำอย่างไรให้ไม่ต้องมานั่งเรียง content ใหม่กันอีกครั้ง

จากหัวข้อเหล่านี้ ใครมีไอเดียเสริม โพสต่อได้เลยนะครับ พบกันใหม่รอบหน้าครับผม

man never knew how life goes on, only god knows why

Back to Top

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top