Category Archives: Web Design

เรื่องราวเกี่ยวกับ Web Design

Drupal Multisite Project

ยังเขียนไม่เสร็จนะครับ

สิ่งที่ควรรู้

Module ที่ต้องติดตั้ง

wysiwyg

  1. ติดตั้งโมดูล wysiwyg
  2. ติดตั้ง ckeditor โดยการอัพโหลดโฟล์เดอร์ ckeditor ไว้ในโฟล์เดอร์ site/all/libraries/
  3. กำหนดการใช้งาน ckeditor ใน Administer > Site configuration > wysiwyg
  4. ติดตั้ง IMCE Wysiwyg API bridge
  5. เปิดการใช้งานโมดูล IMCE และ IMCE Wysiwyg API bridge
  6. เปิดการใช้งาน IMCE ใน ckeditor ซึ่งอยู่ใน wysiwyg

 

No flash in smart cover webpage by Apple

apple ได้ชื่อว่าเป็นพวกที่ไม่นิยม flash อยู่แล้ว
เมื่อคืนนี้มีการเปิดตัว ipad2 แต่บังเอิญผมไปเปิดเจอหน้านี้ www.apple.com/ipad/smart-cover

ด้วยความสงสัยว่ามันจำลองการเปิด smart cover อย่างไรถ้าไม่ใช้ flash ก็คิดเลยว่าต้องใช้ jquery แน่ๆ เมื่อ view code ดูก็ไม่เจอ jquery
แต่เจอวิธีการดังนี้ครับ

จากลองเลื่อนหน้าของ smart cover จะพบว่า smooth มาก นั่นเป็นเพราะทั้งหมดคือรูปที่เป็น sequence จาก url นี้

http://movies.apple.com/media/us/ipad/2011/spin/smart_cover_sequence_20110302/ipad_unfold-000.jpg

โดยรูปเริ่มจาก 000-093 ทั้งหมดมีรูปจำนวน 93 รูป

จากนั้นทั้งหมดถูกควบคุมด้วย javascript 3 ไฟล์คือ

http://images.apple.com/global/scripts/vr.js
http://images.apple.com/ipad/scripts/smart_cover.js
http://images.apple.com/ipad/scripts/single_click.js

คิดว่าวิธีการทำน่าจะประมาณนี้ครับ ในส่วนของ scripts ก็ต้องลองไปแอบดูกันเอาเอง :)

12 แนวทาง usablility ที่ joomla template ควรมี

12-usablility-joomla-template

ภาพจาก ijoomla.com

ผมอ่านเจอบทความน่าสนใจเกี่ยวกับ แนวทาง usablility ของ joomla template น่าสนใจ จึงเอามาเขียนใหม่ให้สามารถอ่านกันได้ง่ายๆ ครับ มี 12 ข้อดังนี้

1.เพิ่ม Utilities Menu
ปัญหาใหญ่ของหลายๆ template จะไม่มี Utilities Menu ,Utilities Menu นั้นไม่ใช่เมนูหลักของเว็บไซต์ แต่เป็นเมนูที่เว็บไซต์ควรจะมี ยกตัวอย่างเช่น “About Us”, “Contact Us”, “Archive” และอื่นๆ ตำแหน่งที่เหมาะสมของ Utilities Menu คือตำแหน่งด้านบนสุดของ template (โดยส่วนตัวแล้วผมมักจะเห็นอยู่ทางด้านมุมขวาบนเล็กๆของ template และผมก็คิดว่าตำแหน่งนั้นเป็นตำแหน่งที่เหมาะสม สำหรับ Utilities Menu) และควรอยู่ทุกๆหน้าของเว็บไซต์ และทุกๆ template ควรทำให้เป็นมาตรฐาน

2.วาง Call to Action ที่ด้านขวา
ก่อนอื่นผมขออธิบายคำว่า Call to Action ก่อนนะครับ ตามความเข้าใจส่วนตัวที่ได้จากการศึกษาการทำ landing page เพื่อขายสินค้าผ่านทางเว็บไซต์ call to action คือ สิ่งเด่นๆที่คุณอยากนำเสนอ เช่นถ้าคุณขายของ call to action ของคุณก็คือ “Buy Now”
หรือถ้าเว็บไซต์คุณทำเพื่อรับสมัครสมาชิก call to action ของคุณก็คือ “สมัครที่นี่เพื่อรับข่าวสาร” อาจทำเป็นปุ่มหรือแบบฟอร์ม ให้ผู้ชมเว็บเห็นชัดๆ ดังนั้นสิ่งที่ template ควรจะมีก็คือ module ที่อยู่ตำแหน่งทางด้านบนสุดทางขวา เพื่อที่จะสามารถใส่ call to action ได้ง่ายๆ

3.มีกล่อง ค้นหา(Search) อยู่ทางด้านขวาบน
คุณเชื่อหรือไม่ว่า 30% ของผู้เข้าชมเว็บไซต์ มองหากล่องค้นหาก่อน พวกเขาไม่เปิดทีละบทความเพื่อหาข้อมูลที่สนใจ แต่เขาจะใช้การค้นหา วางกล่องค้นหาทางด้านขวาบนจะช่วยให้ผู้เข้าชมเว็บไซต์หามันเจอได้ง่าย ทุก template ควรจะมี module ที่มีไว้สำหรับใส่กล่องค้นหา

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

5.เพิ่ม Footer Menu
footer menu คือ menu ที่จำเป็นต้องมีและเป็นส่วนสำคัญ ตัวอย่างของ footer menu เช่น Privacy Policy” และ “Terms & Conditions”

6.รูป Logo ขนาดใหญ่
โลโก้ที่ขนาดเล็กจนเกินไปทำให้จดจำยาก ควรทำให้ใหญ่พอประมาณ และมีส่วนของคำอธิบายประมาณ 2-3 ประโยค ถึงแม้ว่าในส่วนนี้ผู้นำ template ไปใช้จะสามารถแก้ไขได้เองด้วย CSS แต่บางคนก็ไม่รู้ ดังนั้นควรทำให้ผู้ใช้สามารถใช้งานได้ง่ายจะดีกว่า
ขนาดทั้งหมดของโลโก้ที่แนะนำคือ 300 x 100 px

7.มีส่วนของ Banners
ในทุกๆวันนี้เว็บส่วนใหญ่จะมี banners หรือบางเว็บก็เป็นโฆษณาของ google ควรมีพื้นที่สำหรับใส่ banners ขนาดของ banners บนหน้าเว็บที่แนะนำคือ 468×60 px

8.ทำ link ให้ดูเป็น link
ควรทำ link ให้ดูแตกต่างจากหัวเรื่องและข้อความธรรมดา เพื่อให้ผู้เยี่ยมชมสามารถมองเห็นง่าย

9.ขนาดของตัวอักษร
บาง template มีตัวหนังสือที่เล็กเกินไป ทำให้อ่านยาก ควรใช้ขนาดของตัวอักษรที่ใหญ่พอควรและมีสีที่อ่านง่าย (ไม่ควรใช้สีเทาสว่าง)
ขนาดของตัวอักษรที่แนะนำคือ 12px

10.มี Navigation ที่เห็นง่ายๆ
ใน Joomla! จะมี navigation “Next >>” และ “<< Back” อยู่ด้างล่างของหน้า page แต่บาง templates ทำให้มันเล็กจนมองไม่ค่อยเห็น ควรทำให้ผู้เยี่ยมชมเว็บไซต์มองเห็นได้ง่ายและสามารถกดคลิกได้

11.เลือกด้านได้เอง
การวางตำแหน่งของหน้าเว็บไซต์ ไม่ว่าจะทางขวาหรือทางซ้าย ควรจะให้ผู้นำ template ไปใช้ สามารถเลือกด้านได้เองโดยสามารถเลือกได้ว่าจะวางทางด้านขวาหรือซ้ายก็ได้

12.ขวาหรือซ้ายสามารถปรับความกว้างได้เอง
Template ควรมีความยืดหยุ่นในการปรับความกว้างของตำแหน่งทางด้านขวาหรือด้านซ้ายได้เองอย่างอิสระ

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

บทความนี้ได้ทำการแปลและเขียนเพิ่มเติมจากเว็บไซต์  http://magazine.joomla.org

BBC inspire me

เกิดไอเดีย หลังจากอ่านบทความนี้ A new global visual language for the BBC’s digital services
แล้วมาสะดุดวงล้อสีสองวงนี้ คิดว่าจะนำไปลองนำไปออกแบบเว็บไซต์ดู น่าจะได้แนว minimal สะอาดๆนะ Continue reading