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

(ปล. ปกติตามนโยบายของคิวบิกครีเอทีฟคงจะไม่สามารถมาโพสท์เรื่องงานในที่สาธารณะแบบนี้ได้ แต่ขออนุญาต CEO เป็นกรณีพิเศษแล้วเฉพาะกรณีนี้เท่านั้น ไม่ถือเป็นบรรทัดฐานในกรณีอื่นๆ แต่อย่างใด)

ก่อนอื่นเลย แนวคิดเริ่มต้นที่จะทำเว็บอันนี้ ตั้งใจไว้ว่าจะเป็นการซ้อมมือเพื่อเตรียมปรับสไตล์ของเว็บคิวบิกฯ ให้ตามสมัยนิยมมากขึ้น โดยถ้าให้สรุปหลักๆ ก็จะมีแนวคิดดีไซน์แบบ Flat Design, Big Picture, Parallax และ Scrolling-sensitive Content เข้าไว้ด้วยกัน

Flat Design

อันนี้ไม่มีอะไรมาก ตามสมัยนิยมที่นำเทรนด์โดย Microsoft ก็พยายามจะลดการไล่สีลงในหลายๆ จุดที่เป็นไปได้ แต่ด้วยความที่คิวบิกฯ ยังคงต้องการดีไซน์ที่ดูหวือหวามีมิติอยู่ การจะเปลี่ยนให้แบน 100% คงจะไม่เวิร์ค เพราะฉะนั้นในหลายๆ จุดก็จะยังมีการไล่สีอยู่ (เช่นพื้นหลัง หรือแบบอักษรหัวเรื่อง)

Big Picture

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

จริงๆ แนวคิด Big Picture ของคิวบิกครีเอทีฟเริ่มต้นอันแรกกับธีมเว็บไซต์ของ Paduppa Studio (เป็นธีมสำเร็จรูป ผู้เขียนไม่ได้ออกแบบเอง) หลังจากนั้นก็เริ่มมาใส่ในดีไซน์ของเว็บคิวบิกฯ ยุคที่ 5 (เริ่มประมาณปลายปี 2012 พร้อมๆ กับการเริ่มทำ Responsive Design กับการรองรับ Retina Display) ตัวอย่างที่เห็นชัดคือหน้าเกี่ยวกับคิวบิกครีเอทีฟ ซึ่งการใช้รูปใหญ่ๆ ยังเป็นดีไซน์ที่ง่ายกับการทำเว็บ Responsive และรองรับ Retina Display

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

Parallax

สุดท้าย คือเรื่องของการใช้อนิเมชันแบบ Parallax ตามสมัยนิยม ซึ่งเว็บแรกที่สะดุดตาคือเว็บของ Flickr และในช่วงปีที่ผ่านมาจะเห็นได้ว่ามีการใช้ดีไซน์ในลักษณะนี้เต็มไปหมด (เช่นเว็บ Apple ในช่วง Q4 2013)

สำหรับเว็บของ Cubic Staff Program อันนี้ จะมี Scrolling Parallax ที่รูปใหญ่ๆ ที่แทรกระหว่างเนื้อหาเป็นพักๆ ซึ่งจริงๆ แล้วเดี๋ยวนี้พวก Parallax ก็มีไลบรารีสำเร็จรูปที่ใช้ได้เต็มไปหมด แต่เนื่องจากโดยส่วนตัวเป็นพวกขอบเขียนโปรแกรมแบบฮาร์ดโค้ด และดูหนังโป๊แบบฮาร์ดคอร์ เลยเขียนเองแม่งแม่ของคุณเสียเลย

วิธีการก็คือว่า เราจะแบ่งทั้งเพจนี้เป็นช่วงต่างๆ โดยแต่ละช่วงจะปรับขนาดตามหน้าต่างที่ดู แต่ไม่น้อยกว่า 800px ต่อช่วง และจะมีทั้งแบบเต็มจอ หรือครึ่งจอ โดยเราจะนับระยะสำหรับครึ่งจอเป็น 1 หน่วย และเต็มจอเป็น 2 หน่วย

หลังจากนั้นในบรรดา <div> ของแต่ละช่วงทั้งหมด เราจะกำหนด attribute พิเศษไว้ ตั้งชื่อว่า px-length โดยถ้า <div> ไหนเราอยากให้แสดงเต็มจอ ก็ตั้งเป็น px-length=”2″ ส่วนอันไหนเราอยากให้เป็นครึ่งจอก็ตั้งเป็น px-length=”1″ ซึ่งตอนโหลดหน้าครั้งแรก หรือเมื่อมีการปรับขนาดหน้าจอ Javascript ก็จะใช้ค่านี้เพื่อกำหนดความสูงของ <div> แต่ละตัวใหม่

ต่อมาในส่วนของ Parallax เนื่องจากเราต้องให้เอฟเฟคแสดงผลเมื่อผู้ใช้เลื่อนหน้าจอมาถึงแล้วเท่านั้น เราจะรู้ว่าผู้ใช้เลื่อนมาถึงแล้ว เราจำเป็นต้องรู้ว่า <div> ดังกล่าวอยู่ที่ตำแหน่งเท่าไหร่ของทั้งเพจ แต่เนื่องจากเรารู้ว่า <div> ทั้งหมดแต่ละอันมีค่า px-length เท่าไหร่บ้าง รวมกับขนาดความสูงหน้าจอ เราจึงสามารถคำนวณตำแหน่งของตัวเองได้ไปในคราวเดียวกัน แล้วก็เก็บค่านี้ไว้ที่ px-start และ px-stop เป็นระยะที่เราต้องการให้เริ่มมีเอฟเฟค Parallax และหยุดทำเมื่อใด

ต่อมาการทำให้ภาพเลื่อนอยู่ในกรอบ ก็เริ่มจากการมี <div> ครอบด้านนอกที่ตั้งสไตล์ overflow: hidden; ไว้ ส่วน <div> ข้างในก็แสดงภาพ โดยใช้สไตล์ transform: translateY(y); ในการเลื่อน เพื่อให้ได้ประสิทธิภาพที่ดีกว่า

เพื่อให้เอฟเฟคเนียนยิ่งขึ้น ต้องเพิ่มโค้ดที่หลอกให้เบราวเซอร์เปิดการใช้งาน Hardware Acceleration โดยเติม transform: translate3d(0, 0, 0); เข้าไปอีกที

ส่วนป้ายชื่อที่มีการเลื่อนที่แตกต่างกัน ก็ใช้วิธีเดียวกันกับภาพพื้นหลัง แต่ตั้งให้ป้ายชื่อแต่ละชิ้นมีอัตราส่วนในการเคลื่อนที่ตามการเลื่อนจอที่แตกต่างกัน โดยตั้งเป็น attribute ที่มีชื่อว่า px-ratio เป็นค่าไว้สำหรับให้ Javascript นำไปใช้คำนวณ

Scrolling-sensitive Content

สุดท้ายอันนี้คือการทำให้เนื้อหามีอนิเมชันที่สอดคล้องกับการเลื่อนจอของผู้ใช้ (เช่นป้ายชื่อเลื่อนเข้ามาเมื่อผู้ใช้เลื่อนหน้าจอมาถึงจุดนั้น) ซึ่งก็ใช้วิธีเดียวกันกับด้านบนในการหาตำแหน่งค่า px-start และ px-stop แล้วจึงใช้ CSS Transition / CSS Animation เพื่อทำอนิเมชันต่างๆ

Fallback

สำหรับในกรณีที่ผู้ใช้ไม่มี Javascript หรือเบราวเซอร์ไม่รองรับ CSS3 เราก็ให้แสดงภาพแต่แรกไปเลยดื้อๆ โดยใช้วิธีง่ายๆ คือให้แสดงอนิเมชันเฉพาะเบราวเซอร์ที่เป็น WebKit แล้วค่า CSS ทุกอย่างที่เกี่ยวกับการทำเอฟเฟคให้ขึ้นต้นด้วย -webkit- ให้หมด แม้ว่าจะเป็นค่าที่ CSS เก่าๆ มีก็ตาม (เช่นใช้ -webkit-opacity แทน opacity เฉยๆ)

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

จะมีปัญหาอีกเล็กน้อยที่ควรจะแก้แต่ขี้เกียจแก้ คือขนาดตัวอักษรที่จะเล็กมากในอุปกรณ์พกพา เด็กๆ ไม่ควรเอาเป็นเยี่ยงอย่างนะจ๊ะ

ซึ่งแนวทางการดีไซน์นี้คงจะมีให้เห็นในเว็บไซต์ของคิวบิกครีเอทีฟในช่วงปีสองปีนี้แน่ๆ เป็นอย่างน้อย (และประสิทธิภาพควรจะดีขึ้นเรื่อยๆ ตามประสบการณ์) นอกจากนี้เว็บใหญ่ถัดไป (Cubic Creative Camp 10) ก็มีการดีไซน์ใหม่ที่จะเริ่มใช้ด้วย แต่ยังขออุบไว้ก่อนให้รอลุ้นกันเล่นๆ

และเนื่องจากว่าเว็บนี้จะต้องมีการใช้ Javascript เยอะมาก โพสท์นี้จึงมีหัวเรื่องว่า Javascript ส่วน Circumcision ไม่มีความเกี่ยวข้องแต่อย่างใด

เย่!