การกำหนดความกว้างหน้าเว็บไซต์แบบตายตัว (website fixed width layout)
ในการสร้างเว็บไซต์แบบดั่งเดิม คำถามหนึ่งที่เป็นคำถามคลาสิก จะกำหนดความกว้างเท่าไรดี ตอบแบบกำปั้นทุบดินคือ แล้วแต่เรา แต่ทั้งนี้แล้วแต่เราหมายถึง แล้วแต่การนำไปใช้งาน เราต้องออกแบบหน้าเว็บไซต์ให้เหมาะสมกับงานด้วยเช่นกัน แล้วจะทำอย่างไรให้เหมาะสม เราต้องค้นหาคำตอบเหล่านี้ให้ได้ก่อน
- ใครจะเข้ามาดูเว็บไซต์เราบ้าง แม้ว่าเว็บไซต์จะเป็นสื่อที่ดูได้พร้อมกันทั่วโลก ก็จริง แต่อย่าลืมว่า เราทำเว็บไซต์ให้คนทั้งโลกพอใจไม่ได้ ดังนั้น ต้องค้นหากลุ่มลูกค้าของเราให้เจอ
- คนที่เข้าดูเว็บไซต์เรา ดูผ่านอะไร เนื่องจากเดี๋ยวนี้อุปกรณ์ในการเข้าถึงเว็บไซต์ หลากหลายกว่าเมื่อก่อนมาก ทั้งโทรศัพท์ แทปเลท หรือ แม้แต่ ตู้เย็น ยังเปิดเว็บไซต์ได้
- บราวเซอร์หลักที่ใช้ เว็บบราวเซอร์แต่ละตัวนั้น มีการแสดงผลที่แตกต่างกัน มากบ้าง น้อยบ้าง รวมทั้งหน้าตาของบราวเซอร์แต่ละตัวไม่เหมือนกันด้วย ทำให้พื้นที่การแสดงผลของบราวเซอร์แต่ละตัวแตกต่างกัน เราอาจจะยึดบราวเซอร์หลักๆ ที่เราต้องการ เพื่อเอาไว้ใช้ในการคำนวนต่อไป
- เทคโนโลยีที่จะใช้ เรื่องนี้จำเป็นต้องสำรวจก่อนด้วย เพราะว่า การเลือกใช้เทคนิคที่ต่างกันนั้น ทั้งขั้นตอนการทำเว็บไซต์ รวมทั้งความสามารถของเทคโนโลยีที่ต่างกัน เช่น Flash อาจจะสามารถตรวจสอบขนาดหน้าจอได้เอง ขณะที่ HTML นั้นไม่สามารถทำได้ด้วยตัวเอง เป็นต้น รวมทั้งการเลือกเทคนิคในการเขียนเว็บไซต์ด้วยเช่นกัน
ขั้นตอนการคำนวนหน้าจอ
มาถึงการออกแบบเว็บไซต์ เราต้องมีการกำหนดขนาดของหน้าเว็บไซต์ก่อนเป็นอันดับแรก เพราะถ้าไม่อย่างนั้น เกิดเปลีย่นตอนหลัง อาจจะต้องถึงขั้น รื้อใหม่ทั้งหมด ก็เป็นได้ ผมจะไม่บอกว่า จะต้องขนาดเท่าไร แต่บทความน้ำจะอธิบายว่า เค้าคิดขนาดมาได้อย่างไร เริ่มกันเลย
- จากข้อมูลข้างต้น สรุปว่าลูกค้าที่ดูเว็บไซต์เรา ส่วนใหญ่ใช้ความละเอียดหน้าจอที่เท่าไร ( ขนาดมาตรฐานที่ยอมรับกันคือ 1024X768) เช่น เราอาจจะศึกษามาแล้วว่า กลุ่มลูกค้าเราใช้ความละเอียดที่หน้าจอ 1280 X 1024 ก็กำหนดขนาดหน้าจอนี้เป็นพื้นฐาน สำหรับเว็บไซต์เราก็ได้ แต่อย่าลืมว่า คนที่ใช้ความละเอียดหน้าจอต่ำกว่านี้ เว็บไซต์เราจะล้นจอ และเกิด สกอร์บาร์
- ทดลองปรับหน้าจอเรา ให้ความละเอียดเท่ากับขนาดหน้าจอ พื้นฐานที่เราต้องการ
- จากนั้นเปิดบราวเซอร์ที่เราต้องการ ให้เต็มจอ และลองแคปเจอร์หน้าจอมาเปิดในโปรแกรมอย่าง Photoshop เพื่อคำนวนต่อไป
- จากการเปิดดูใน Photoshop เราจะรู้ว่าพื้นที่ที่เราใช้งานจริงได้นั้น เท่าไรกันแน่ ผมใช้เส้น ไกด์ไลน์เพื่อกำหนดพื้นที่การแสดงผล โดยพื้นที่ภายในเส้นประ คือ พื้นที่การแสดงผลทั้งหมด
- ทดลองใช้คำสั่ง crop (Image -> Crop) และตรวจสอบขนาดรูปที่เหลืออยู่ (Image -> Size) แต่ทั้งนี้ อย่าลืมว่า เครื่องอื่นนั้น อาจจะไม่เท่ากับขนาดที่เราคำนวนได้ 100% ดังนั้นแล้ว ส่วนมากจะนิยม ลดขนาดลงไปอีก 10%
- นี่เป็นที่มาในการคำนวนขนาดของหน้าเว็บไซต์ แต่อย่างไรก็ตาม การออกแบบหน้าเว็บไซต์แบบคงที่ หรือ Fixed นั้น อาจจะล้าสมัยไปแล้วในปัจจุบัน โดยในปัจจุบัน มีทั้งระบบ Grid ที่ทำงานแบบ Fluid และ Elastic เข้ามาทดแทน เพื่อแก้ปัญหาความหลากหลายของอุปกรณ์ แต่หากต้องการสร้างเว็บไซต์แบบ Fixed นั้น อาจจะ อิงกับระบบ Grid ด้วย เพื่อง่ายในการปรับแปลี่ยนในอนาคต
0 ความคิดเห็น:
แสดงความคิดเห็น