CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 1)

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

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

สี่เหลี่ยมของขนมรังผึ้ง กับ ขนมครกที่เป็นทรงกลม มันทำให้ผมนึกถึงการ Design Website ในสมัยก่อนเก่า ซึ่งเราจะต้องมานั่งคิดว่าเราจะตัดออกมาอย่างไรให้มันเป็นช่องสี่เหลี่ยม ที่เรียงรายออกมาได้อย่างเป็นระบบระเบียบ เพื่อที่จะจัดมันไว้ในตารางโดยไม่มีการผิดเพี๊ยนไปจากตอนที่เรานั่ง Design ใน Photoshop เนี่ย มันเป็นสิ่งที่ต้องทำจนเราจำจนขึ้นใจไปแล้วว่า เอ้อ … จะทำอย่างไรหนาให้มันออกมาเป็นเช่นนั้น ไม่งั้นมันคงจะตัด slice ออกมากันยากน่าดู (นั่งคิดมาก ๆ จ้องจอมาก ๆ มันอาจจะแปลงร่างเป็นหุ่นให้เราตกใจเล่นก็ได้นะ) แต่ผมเคยคิดนะว่าเมื่อไหร่มันจะทำได้มากกว่านี้นะ เหมือนกับตอนที่เราทำ Flash หรือ ตอนที่กำลัง Design มันออกมานั้น ที่เราอยากจะวางอะไรลงไปก็ได้ แต่พอวางอะไรที่มันเหนือหรือล้ำจินตนาการมาก ๆ ก็ต้องมานั่งลำบากปวดกบาลตอนมานั่ง slice อีก จะทำอย่างไรน้าถึงจะก้าวข้ามขีดจำกัดเหล่านี้ (ซึ่งตอนนั้นผมยังอ่อนต่อประสบการณ์ยิ่งนัก เพราะยังไม่มีใครผลิตแก๊ซโซฮอล) จะทำอย่างไรให้มันวางตรงไหนก็ได้แต่ออกมาแล้วเป็นความสวยงามเหมือนกับขนมครก มันทำให้ผมครุ่นคิดเป็นพัก ๆ แล้วมันก็จางหายไป ตามวันเวลาผมก็ Design Webpage ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น

ใช่ว่าผมจะมาชวนให้ใครคิดนอกกรอบ หรือ เดินออกไปนอกระบอบระบบ แต่ว่าบางครั้งอารมณ์ศิลปินมันก็ต้องการอะไร ที่มันมาตอบสนองได้อย่างครบถ้วนจริงไหมครับ ข้อดีข้อเสียมันก็อาจจะมีแตกต่างกันไปถ้ามองดี ๆ การออกแบบมาแบบให้มันเป็นระบบระเบียบง่ายต่อการ slice ภายในโลกของ grid สีเหลี่ยมนั้น มันดีตรงที่ว่ามันเป็น Layout ที่เป็นระเบียบเรียบร้อย มันง่ายต่อการจัดวางข้อมูลและการวางการไหลของ content ต่าง ๆ ใน webpage นั้น ๆ ให้ user มองหาและเข้าถึง content ได้ง่าย เพราะมันจะแบ่ง Layout จัดวางกันเป็นส่วน ๆ ถ้าคิดไม่ออกให้ลองนึกภาพ Website ที่ทำด้วย Table สมัยก่อน ๆ หรือ ปัจจุบันที่ทำกันอยู่ทั่วไปก็ยังวนเวียนกันอยู่ใน grid อยู่ (รวมถึงการ design แล้วทำออกมาด้วย CSS/XHTML) ดูการวาง Layout จะวนเวียนกันอยู่ที่ Layout มาตรฐาน (โดย intensivstation.com) ซึ่งลองคิดดูสิครับ ว่ามันไม่หลีกหรือหลุดไปจากวังวนนั้น ถ้าเราลองคิดให้มันออกมานอกกรอบ grid เหล่านั้นล่ะ จะเป็นอย่างไรจะทำได้ไหม ถ้าเป็นทุกวันนี้ผมคิดว่า เอ่อ… ไม่ใช่คำว่า “คิดว่า” แล้วสิ ต้องบอกว่า “ได้แน่นอน” เพราะเรามีหลอดไฟซิลวาเนีย เลยไม่ต้องกังวลอะไร ไม่ใช่ครับ เพราะมี CSS ที่พัฒนามาเพื่อตอบสนองความต้องการของ Designer อย่างพวกเราในที่นี้แล้วในตอนนี้ ลองคิดดูว่าทรงกลม ๆ ของขนมครกเอามาเรียงต่อกันให้สวยงาม กับช่องสีเหลี่ยมเรียงรายเป็นตาข่าย อะไรมันจะน่าสนใจกว่า อะไรมันจะท้าทายกว่า เมื่อการนำเสนอในวังวนเหล่านี้อาจทำให้ user เริ่มเบื่อหน่ายแล้วก็ได้

ผมจะเรียกการ Design ในแบบเดิมว่า Grid Design แบบชาวบ้านเค้าเรียกกันนะครับ Grid Design นั้นจะเหมาะกับ table มากหรือเรียกกันติดปากว่า Layout แบบ Table น่ะแหละครับ ตั้งแต่มี CSS และ XHTML เข้ามานั้นโลกของ Designer ก็เริ่มปั่นป่วนกันแล้วล่ะ เท่าที่รู้ ๆ กันอยู่ว่า Layout ที่ออกแบบมาให้เป็น Layout แบบ Table จ๋าแล้วเอามาดัดแปลงเป็น CSS/XHTML นั้นอาจจะทำให้ปวดหัวกันหน่อยล่ะ แต่มีเวปอยู่เวปหนี่งที่ทำได้อย่างน่าทึ่งคือ kaliber10000 ถ้าใครเป็นแฟนเวปนี้ในยุคแรก ๆ จะจำได้ว่าโอ้ว !!! ทำมาได้ไง และ ที่สำคัญมันเป็นตารางล้วน ๆ แต่ตอนนี้มันกลายเป็น CSS/XHTML ไปแล้ว ถ้าใครที่เป็นแฟน ๆ เวปนี้ผมว่าต้องมีความคิดเดียวกันว่ามันจะเปลี่ยนได้ไหมเนี่ย เปลี่ยนได้ครับอย่างน่าทึ่งด้วย!!! Table Layout นั้นเป็น Layout ที่ดีที่สุดสำหรับ Grid Design เพราะอะไร เพราะโครงสร้างของตัวมันนั้นเป็น Grid ที่เรียงรายกันอย่างเป็นระบบระเบียบ หน้าที่ของเราก็แค่หารูปภาพ หรือ อะไรก็แล้วแต่ มาอุดลงไปตามรู Grid เหล่านั้นให้มันเต็ม ถ้าเราทำอะไรที่มัน over มากเราก็ต้องทำ table ขึ้นมาซ้อนกันหลาย ๆ ชั้นแล้วยังต้องใช้ภาพอีกหลาย ๆ ชิ้น ซึ่งนั่นไม่ใช่เรื่องที่ดีแน่ ถึงแม้ว่าหลาย ๆ ปีที่ผ่านมาเทคนิคต่าง ๆ ที่จะเอามาแก้ไขจัดการเกี่ยวกับข้อจำกัดของ Table นั้นจะมีประสิทธิภาพมากขึ้นแต่ถึงกระนั้นมันก็ยังทำให้เราปวดหัวได้เสมออยู่ ไม่ว่าการเกิดการเคลื่อนไม่เป็นไปตามที่กำหนด หรือ จะจัดการกับช่องว่างใน column ให้มันเสมอกัน ปวดร้าวหัวสมอง และ จิตใจเสียเปล่า ๆ

ยังไงต่อไป ติดตามได้ ตอนที่ 2 เร็วๆ นี้