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

ถ้า ดูจากรูปจะเห็นได้ว่า คนใช้1024*768 พิกเซลมากที่สุดครับ แต่ถ้าดูจากหลายๆเว็บ ก็จะประมาณนี้ครับ อันนี่คร่าวๆนะครับ หลังจากที่เรารู้ว่า ขนาดหน้าจอเท่าไหร่ที่ผู้้ใช้อินเตอร์เน็ตใช้มากที่สุด เราก็มาดุ เบราวเซอร์ที่ ผู้ใช้งานมากที่สุด อันดับหนึ่งก็ไม่อาจจะหลีกเลี่ยง internet exploler อันดับสองก็ firefox ครับ ที่ผมพอจะทราบนะครับ แล้วคราวนี้ พอเรารู้แล้วว่า ขนาด1024*768 พิกเซล และ ตัวเบราวเซอร์ แล้ว ขนาดหน้าเว็บ ที่เราจะออกแบบ คราว นี้เราจะรู้ได้ไงว่าหน้าเว็บเราควรมีขนาดเท่าไหร่ถึงจะเหมาะสมกับ ขนาด1024*768 หลายคนชอบถามผมมากมาย ซึ่งวิธีต่อไปนี้เป็นวีธีที่ผมใช้ประจำนะครับ ก่อนอื่นเช็คหน้าจอของคุณที่มีก่อน หน้าจอของผมตอนนี้ก้1024*768 นะครับ เริ่มแรก 1. ผมก็เปิด Internet explorer ก่อนแล้วก็ ทำให้ เต็มจอเลยครับ เหมือนเรา วิว เต็มหน้า คราวนี้ เราก็ทำการจับจอภาพแล้วเอาเข้าphotoshopเลยครับ ปิดพวก google toolbar หรือ yahoo toolbar ไปให้หมดเพื่อ เราจะหาขนาดหน้าเว็บที่แท้จริงของเบราวเซอร์ คลิ๊กขวาที่ ruler แล้วเลือกเป็น pixel แล้วใช้ selection tool วัดเอาครับใช้ ruler สร้างguild line เพื่อ การ snap อย่างง่ายดาย แล้วกด f8 เพื่อ วิว info ว่ายาว กว้างเท่าใดครับ วัดอย่าให้พลาดนะครับซูมไปเยอะๆดูขอบของหน้าเว็บดีดี นะครับ ดูให้ละเอียด เป็นแต่ละ pixel เลยนะครับ ของผมที่วัดได้ก็ประมาน 1003*582 พิกเซล ใช้ ie 6 ครับ เก่าหน่อยฮ่าๆๆ ก็ลองดูนะครับ ถ้ามีคำถามที่สงสัย ก็ถามได้ครับ หรือ ติชมได้ครับ เผื่อแชร์กัน ครับจะได้ความรู้ใหม่ๆ ผมได้ขนาดที่ แท้จริงแล้วผมก็ ทำการ sketch หรือ ออกแบบงานในหน้าจอนั้นแหละครับ เพื่อ เป็น mockupในการทำงานต่อไป สามารถดูวีดีโอตัวนี้ ได้นะครับ เป็นวีธีการออกแบบเว็บให้พอดีกับขนาดหน้า browser (เสียงเบาไปหน่อยนะครับ ปรับดังๆๆหน่อยฮะ)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s