web design

Web Design Topics

เกลียดไม่ได้ แต่รักไม่ลง!

กำลังแก้ธีมของ webzer ครับ ถ้าลองเล่น theme switcher จากแทบด้านข้างดู ก็จะมี ordinary one too-dev ให้เลือก และยังคงยึดมั่นกับความท้าทายแบบเดิมๆ ของตัวเอง คือ ทำธีมที่ใช้ไฟล์กราฟิคให้น้อยที่สุด เพื่อรีดศักยภาพของบราวเซอร์ออกมาพิสูจน์ รวมทั้งหาขีดจำกัดในการเรียนรู้ของตัวเองด้วย แม้จะยังแก้ไม่เสร็จ แต่สถานการณ์ก็เป็นไปอย่างราบรื่นในบราวเซอร์แทบทุกตัว ยกเว้นใน Internet Explorer (เจ้าเก่า) เพราะเลย์เอาต์ใหม่ที่กำลังทำ ใช้งาน Float ใน CSS เพื่อจัดตำแหน่งของแต่ละ section ในหน้าเว็บเป็นหลัก แม้จะคาดไว้อยู่แล้วว่ามันต้องเละ แต่มันเละเทะมากมายมหาศาลเกินกว่าที่คาดไว้ซะอีก (ใน IE ทุกเวอร์ชั่น)

แม้เว็บไซต์แห่งนี้จะยังมี traffic ไม่มากนัก และก็โชคดีที่ผู้ใช้ส่วนใหญ่กว่า 60% เข้ามาที่นี่ด้วย FireFox อาจเป็นเพราะเนื้อหาส่วนใหญ่ เกี่ยวกับเรื่องการทำเว็บ และคนทำเว็บก็คงรู้ว่าบราวเซอร์ตัวไหนที่ใช้งานได้ดีกว่า Internet Explorer (IE) แต่ยังไงก็ตัดใจทิ้งมันไม่ได้ เพราะ 20% ของผู้เยี่ยมชมยังคงใช้ IE และ 1 ใน 3 ของผู้ใช้ IE ก็เป็นเวอร์ชั่น 6 ซะด้วยสิ (แต่ IE7 ก็มี bug เกี่ยวกับ float มิใช่เล่น) ถ้าให้แก้ CSS ก็ต้องไล่ดู Markup ใหม่ทั้งหมด เป็นงานที่สูญเสียเวลาโดยใช่เหตุ แต่ก็ต้องทำ จำใจ...

แอบดูการรื้อดีไซน์ของ drupal.org

Watching Drupal.org Redesign


Drupal Redesign Iterartion #7 | Homepage

คงพูดได้เต็มปากว่า ในบรรดา Open Source CMS ชั้นนำของโลก เว็บไซต์ของชาว Drupal หน้าตาเชยสุดๆ แม้ drupal จะเป็น CMS ที่เปี่ยมประสิทธิภาพและวางใจได้มากๆ (ปีนี้ 2008 ได้ 2 รางวัลควบเลยทีเดียว) แต่หลายคนก็กลัวที่จะใช้ drupal เพราะหน้าตามันข่มขู่ผู้ใช้งานไม่น้อย จำได้ว่าตอนที่ผมหัดใช้และติดตั้ง drupal ครั้งแรกๆ ก็ เอ๋อรับประทานไปเลย! ไปไหนไม่ถูกจริงๆ เพราะ User Interface ที่ยากต่อการสร้างความคุ้นเคย ถึงขนาดไม่กล้าคลิ๊กสุ่มสี่สุ่มห้าเลยทีเดียว ถ้าให้เทียบกับ ui ของ Wordpress ก็คงบอกได้ว่าเป็น Godzilla กับ Kitty! (คงไม่ต้องบอกมั้ง ว่าอะไรเป็น Godzilla หรือ Kitty ?)

Ohweb.info Redesign

ช่วงนี้กำลัง redesign ให้ Ohweb.info ซึ่งไม่ใช่งานง่ายซักเท่าไหร่ เพราะเป็นเว็บไซต์ที่มีเนื้อหาพอสมควรอยู่แล้ว แม้จะเป็น Drupal ที่ผมคุ้นเคย แต่ก็มีโมดูลหลายตัวที่ต้องแก้รูปลักษณ์อินเตอร์เฟสใน CSS หลังจากวางเลย์เอาต์คร่าวๆ เป็น HTML + CSS แล้ว ผมใช้วิธีเคลียร์โค้ดเดิมทิ้งไปก่อน ให้มันเหลือแค่เนื้อหาเพียวๆ จากนั้นก็ค่อยไล่แก้ไปทีละตัว ซึ่งผมทำได้ช้ามาก ตอนที่ต้องพอร์ต HTML เป็น ธีมของ Drupal เพราะผมแยกไฟล์เทมเพลตสำหรับแต่ละโมดูลด้วย (เป็นครั้งแรกที่ผมรื้อไส้รื้อพุงของ Drupal ออกมาดู แต่ไม่ถึงกับเปลี่ยนอะไรในฟังชั่นการทำงานของมัน)

Grid Design and My Webzer

ผมกำลังทดลองผสมผสานหลักการหลายๆอย่าง เกี่ยวกับงานออกแบบเว็บไซต์ แรกเริ่มเดิมที ผมสนใจแนวการออกแบบของ Mark Boulton (คนเดียวกับที่กำลัง Redesign ให้กับ Drupal.org นั่นแหละ) ผมไม่ได้ชอบแนว Minimalism แต่เป็นเพราะพี่แกเนี้ยบมาก หลักการแน่นปึ้ก โดยเฉพาะแนว Grid Design ที่พี่แกย้ำนักย้ำหนา ว่าต้อง "วัด แล้วก็ วัด" ไม่มีมั่วแม้แต่พิกเซลเดียว สมกับที่เป็น Typographic Designer มาก่อนจริงๆ

ร้าง!

ผมทิ้ง webzer ร้างไปนาน เพราะนึกไม่ออกว่าจะทำอะไรกับมันต่อ ความจริงคือ ผมหาทางออกเรื่องการใช้ฟอนต์ไทยในเว็บยังไม่ได้ แต่ถ้าหมายถึงวิธีการแก้ปัญหาเฉพาะหน้านั้น มีหลายวิธีและทำได้ไม่ยาก เช่น เทคนิคเก่าๆ ใช้รูปภาพแทนตัวหนังสือ (FIR - Fahrner Image Replacement) , ซับซ้อนขึ้นอีกหน่อย ก็ใช้ Flash กับ Javascript (sIFR - Scalable Inman Flash Replacement) , ถ้าใน IE4 ขึ้นไป ก็ใช้ไฟล์ eot ฝังฟอนต์ในหน้าเว็บได้ (เขียนไม่ผิดหรอกครับ IE4 อ่านไฟล์ฟอนต์ได้ตั้งนานแล้ว! WEFT - Web Embedding Fonts Tool) หรือ ใช้ @font-face ของ CSS3 ( CSS3 module: Web Fonts) แต่ทุกวิธีที่ว่ามา ไม่ใช่ทางแก้ปัญหาที่ยั่งยืน และบางวิธีก็ยังไม่เหมาะกับสถานการณ์ปัจจุบัน (เช่น CSS3)

Syndicate content

Theme Switcher

Advertisement

Browse Happy

หาอะไรที่ดีกว่า Internet Explorer มาเล่นเว็บกันเถอะพวกเรา แล้วโลกของคุณจะน่าอยู่ขึ้นเป็นกอง!

Browse Happy logo

Words

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