ทดสอบความรู้
เกริ่นก่อน
ปกติคุณเคยเซ็ทหน้าจอเป็น 800 x 600 pixels ใช่มั้ยครับ ทีนี้คุณลองปรับขนาดความละเอียดหน้าจอเป็น
1024 x 768 pixels ดูบ้าง เป็นไงครับ...ความกว้างของหน้าจอคุณเพิ่มขนาดขึ้นถูกมั้ย
ในขณะที่ทุกสิ่งทุกอย่างบนหน้าจอ
ก็เล็กลงไปด้วย ก็เพราะว่าขนาด Pixels บนจอมีขนาดเล็กมาก นี่เป็นการเซ็ทแบบที่เรียกว่า
"เพิ่มเพื่อลด" อย่าเพิ่งมึนตึ้บ
คุณลองตีความหมายดูสิ.. คุณเพิ่มความละเอียด หน้าจอ เพื่อลดทุกสิ่งทุกอย่างที่คุณเห็น
เล็กลงไง
Screen
Resolution หรือ ความละเอียดหน้าจอ หมายถึงจำนวนเม็ด pixels แต่ละเม็ดที่อยู่บนพื้นที่ว่างบนจอ
เช่น เวลา
เซ็ทหน้าจอ เป็น 800 x 600 pixels, ตัวเลข 800 ก็หมายถึง จำนวนเม็ด pixels
ที่จอมอนิเตอร์สามารถแสดงผลออกมา
ตามแนวนอน ในขณะที่ตัวเลข 600 คือจำนวนเม็ด pixels ที่เรียงตัวกันในแนวตั้ง
ขนาดจอมอนิเตอร์กับความละเอียดหน้าจอ
จะมีความสัมพันธ์กันแบบ มึงไปไหน กูไปด้วย... เมื่อคุณเพิ่มความละเอียด
หน้าจอที่คุณเห็น จะมีขนาดเล็กลง คือ คุณจะมองภาพในจอได้กว้างขึ้น และจากข้อมูลที่มี
พบว่า..จอมอนิเตอร์ขนาด
15 นิ้ว เวลาเราเซ็ทความละเอียดเป็น 1024 x 768 pixels ตัวหนังสือจะอ่านไม่ค่อยออก
คือเล็กจัด แต่ถ้าเราไปเซ็ทค่า
1024 กับจอมอนิเตอร์ขนาด 17 - 21 นิ้วแล้วล่ะก็ มันดูดีมาก เลยนะ ขอบอก...สาเหตุก็เพราะว่า
จอ 15 นิ้ว เวลาเรา
เซ็ทความละเอียดที่ 800 x 600 pixels จะมีความละเอียดสูงกว่า จอ 21 นิ้ว
ที่ความละเอียดเดียวกันนี้ ซึ่งก็หมายถึงว่า
ถ้าเราดูไฟล์ภาพ Gif ขนาด 200 x 300 pixels บนจอ 15 นิ้ว ภาพจะมองดูเล็กกว่า
จอ 21 นิ้ว และภาพดังกล่าว ก็จะดูง่าย
แต่ถ้าเป็นตัวหนังสืออย่างพวกแถบปุ่ม บนเว็บไซท์ จะอ่านยาก แม้แต่คนที่มีสายตาดีมาอ่านก็ตาม
ออกแบบเพื่อคนชม
จริงแล้วมันอยู่ที่ไอเดียของคุณในการออกแบบ คุณต้องวางโครงสร้างให้สมบูรณ์
โดยเฉพาะเรื่อง Browser นี่แหละ
จำไว้ว่าคนเข้าชมเว็บจะเซ็ท หน้าจอต่างกันออกไป คุณต้องคิดเลยว่า ใครคือเป้าหมายของคุณ
และคุณจะทำยังไงให้
ทุกคนสามารถรับรู้ถึงงานออกแบบเว็บของคุณตรงกัน
ซึ่งมาตราฐานก็ยังไม่มีเท่าไหร่นัก
สำหรับเรื่องนี้ เราจึงรวบรวมข้อมูลเพื่อนักออกแบบเว็บไซท์ ว่าคนส่วนมากเซ็ทหน้า
จอเท่าไหร่กัน เพื่อ คุณจะสามารถวางแผนการออกแบบหน้าเว็บได้ถูก ไม่มั่วนิ่มอีกต่อไป
พร้อมเทคนิคเล็กๆน้อยๆมาฝาก
ศึกษาจาก Log files ว่าคนที่เข้าชมเว็บไซท์ส่วนมาก ใช้บราวเซอร์ขนาดเท่าไหร่ เวอร์ชั่นอะไร
พยายามออกแบบเพื่อคนส่วนมาก ศึกษาเทคโนโลยีใหม่ๆเสมอ
ทดสอบเว็บไซท์
กับบราวเซอร์ต่างๆกัน รวมทั้งค่าความละเอียดหน้าจอต่างๆกัน เพื่อสังเกตุข้อแตกต่าง
ว่าเว็บกูมันย้วย
มั้ย เวลาเปิดที่ความละเอียดสูงๆ ซึ่งเรื่องย้วยนี้ ผมเจอหลายเว็บในเมืองไทย
เพราะจอมอนิเตอร์ของผมเซ็ทความละเอียด
ค่อนข้างสูง เพื่องานออกแบบ เลยทำให้เห็นความทุเรศในหลายๆเว็บ
เช็คจากแหล่งอ้างอิงต่างๆว่า
ขนาดความละเอียดหน้าจอเท่าไหร่ที่คนนิยมกัน เช่น ปัจจุบัน ความละเอียด
800 x 600
pixels ยังเป็นที่นิยมกับคนส่วนมาก ในขณะที่ขนาดความละเอียดที่ 1024 x
768 pixels ตามจี้รูทวารมาแบบไม่ลดละ
ถ้าไม่เชื่อดูข้อมูลในตารางได้
Display
Size WebSideStory
Browser News
640x480 5.71% 4%
800x600 52.47% 53%
1024x768 + higher 35.6% 41%
ตารางการสำรวจความละเอียดของหน้าจอที่คนส่วนใหญ่นิยมใช้ ปี 2001
** กรุณาหลีกเลี่ยงใช้คำประเภท
"เพื่อการเข้าชมเว็บไซท์ที่สมบูรณ์ กรุณาเซ็ทหน้าจอของท่านเป็น.....pixels"
เพราะมันไม่ใช่เทคนิคที่ดีเลย เหมาะสำหรับพวกอ่อนหัด เพิ่งทำเว็บมากกว่า
เราขอแนะนำให้คุณทดลองเทสหน้าเว็บ
ที่ขนาดความละเอียดต่างๆกันดูดีกว่า เสียเวลานิดนึง แต่มืออาชีพกว่าเยอะ
เราสอนให้คุณเป็นมืออาชีพ ไม่ใช่เด็กเล่น
ขายของตามหน้าบ้านนะเว้ย..ย
ทีเด็ดตบท้าย
คราวนี้ ผมมีเคล็ดลับมาตีแผ่ ดีไซเนอร์ส่วนมากจะใช้จอมอนิเตอร์ขนาดใหญ่และเซ็ทความละเอียดของหน้าจอสูงๆ
เท่าที่จะทำได้ เพราะพวกมืออาชีพ เค้าจะไม่มาประกาศเว็บไซท์ ก่อนที่จะเทสมันกับทุกบราวเซอร์
และความละเอียดหน้า
จอต่างๆกัน เพื่อจะได้ไม่เกิดข้อผิดพลาดตามมาภายหลัง
เราลองมาดูวิธีกันอีกนิด เผื่อคุณจะเอาไปใช้ได้
ใช้ JavaScript
ที่มีการตรวจสอบความละเอียดหน้าจอ และสามารถพาผู้ชมไปยังเพจที่มีความละเอียดที่เหมาะสม
กับผู้ชมคนนั้นๆ แต่วิธีนี้ นักออกแบบบางคนเลือกใช้ เพราะว่าค่อนข้างเสียเวลา
เพราะต้องทำเพจเพิ่มหลายหน้าขึ้นมา
เพื่อรองรับความต้องการต่างๆกัน
เซ็ท
Table ด้วยขนาดที่กำหนดตายตัวไปเลย หลายเว็บไซท์จะใช้วิธีนี้ รวมทั้ง chattinomax
ด้วย กำหนดลงไปเลยว่า
จะมีขนาดกว้างเท่าไหร่ เช่น กำหนดตารางกว้างประมาณ 760 pixels สำหรับคนที่รับชมที่ขนาด
800 x 600 pixels
แต่ทีนี้จำไว้ว่า บางคนเค้าก็ไม่ได้ดูที่ขนาด 800 pixels บางคนเซ็ทความละเอียดสูงกว่า
จะทำให้เกิดพื้นที่ว่างๆรอบๆตาราง
ถ้าคุณจัดตารางไว้ตรงกลาง บางทีคุณอาจจะเพิ่มภาพอะไรที่น่าดึงดูดเข้าไปบริเวณรอบๆ
ดังกล่าว โดยทำเป็น Background
กำหนดตารางเป็นเปอร์เซ็นท์
วิธีนี้เวลาเปิดชมเพจไม่ว่าเซ็ทความละเอียดเป็นเท่าไหร่ ตารางจะยืดขยายหรือหดตามไป
ด้วย คือขนาดจะพอดีกับ Browser ตลอดเวลา ซึ่งเหมาะมากสำหรับคนที่มีหน้าจอขนาดเล็ก
แต่ระวังเรื่องการจัดเพจ ไม่ควร
อัดเบียดเสียดกันมากเกินไป เพราะคนที่ชมเว็บด้วยจอ 21 นิ้ว คิดภาพดูเด่ะ
หน้าจอมันจะยืดยิ่งกว่าขี้มูกอีกนะเว้ย..ย
แล้วเว็บคุณก็ยืดแบบทวินแคมไปเลยล่ะทีนี้ เพราะฉะนั้นปรับแต่งให้ดีๆก่อนครับ
ทดสอบแล้วทดสอบอีก
วิธีง่ายๆ แค่เปลี่ยนค่าความละเอียดหน้าจอของคอมพิวเตอร์คุณเองที่ขนาดต่างๆกันดู
ไปที่ Start >
Settings > Control Panel เลือก Display คลิกแถบ Setting แล้วลองปรับตรง
Resolution ดู โดยไม่ต้อง Restart
เครื่อง ซึ่งวิธีนี้เป็นวิธีง่ายๆ แต่ถ้าต้องการทดสอบแบบโคตร เซียนปลิดวิญญาณแล้วล่ะก็
ต้องทดสอบหลายๆระบบวินโดวส์
กันเลย รวมทั้งบราวเซอร์ต่างเวอร์ชั่นและยี่ห้อดูด้วย
แม้ว่าหลายๆคนจะสามารถแบ่งคนชมแยกเป็นประเภทๆได้
แต่ยังมีบางอย่างที่ต้องคำนึงถึงอีก เช่น บางคนใช้คอมพิวเตอร์
รุ่นเดอะ แบบปู่เรียกพี่ หรือจอเล็กจัด หรือ บางคนใช้โมเด็มที่มีความไวแค่เต่า...คุณต้องออกแบบให้เหมาะสม
เผื่อคนเหล่า
นี้บ้างก็ดี ถ้าคุณสามารถออกแบบเว็บไซท์ให้คนชมพอใจได้ แน่นอนว่าคนเข้าชมเว็บย่อมเพิ่มมากขึ้น
และมากขึ้นไปเรื่อยๆ
เค้าก็จะกลับมาดูเว็บคุณใหม่อีก ไม่หนีไปไหนแน่ จงพัฒนาเว็บไซท์ของคุณให้เหมาะกับทุกสภาพแวดล้อมของคนชม....
.......... สู้เค้าเถิด ไอ้มดแดง เยร์.