Responsive_Design

การออกแบบเว็บแบบ Responsive ควรคำนึงถึงอะไรกันบ้าง

วันนี้เราจะลองมาดูเรื่องสำคัญๆที่บางทีอาจจะไม่ได้ใส่ใจว่าเป็นสิ่งจำเป็นกันหน่อยนะครับ นั้นคือการออกแบบเว็บไซต์ให้เปิดได้ในทุกๆอุปกรณ์หรือที่เราเรียกว่า Responsive เราต้องดูหรือคำนึงถึงอะไรกันบ้าง

Responsive_Design

Responsive_Design

เนื่องจากเว็บในสมัยนี้ใครๆเค้าก็ทำเป็น Responsive กันซะทั้งหมดแล้ว และมีเครื่องไม้เครื่องมือออกมาเพียบเต็มไปหมดเลย แล้วนอกจากเรื่องของการออกแบบให้สวยงาม ตรงไหนโชว์ ตรงไหนซ่อน ตรงไหนปรับ เราต้องดูอะไรละ ที่จะเอามาเป็นตัววัดว่า ตรงนี้ควรทำ ตรงนี้ไม่ควรทำ งั้นผมจะมาลองตั้งเป็นหัวข้อแยก 2 ประเภทก่อนคือ

1. สิ่งที่ควรเหมือนกันในทุกๆรูปแบบ
2.สิ่งที่ควรแตกต่างกันในทุกๆรูปแบบ

มาดูที่เรื่องแรกกันก่อนนะครับ สิ่งที่เราควรจะให้มันแสดงผลออกมาเหมือนกันหมดเลยในทุกๆรูปแบบของการแสดงผล ผมขอ List  เป็นรายการประมาณนี้นะครับ

1.Font Type
2.Colour
3.Form

font

font

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

 

color

color

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

 

form

form

Form รับส่งข้อมูล คือไม่ใช่บอกว่าให้มีขนาดหรือตำแหน่งทุกอย่างหมือนเดิม แบบเป๊ะๆหรอกครับ อันนี้คืออยากให้เหมือนเดิมในลักษณะของรูปแบบของ Form เช่นปุ่มกด คุณอาจจะทำขอบโค้ง ก็โค้งมันซะให้หมด ตรงนี้มันต้องใส่ใจไปถึงเรื่องของ Cross Browser ด้วยเพราะว่าการแสดงผลของ Engine อาจจะแตกต่างกัน แต่ตำแหน่งหรือลำดับก็ไม่ควรเปลีย่นครับ ชื่อ แล้ว นามสกุล แล้วอีเมล์ เปลี่ยนจอก็เหมือนเดิมเป็นดีที่สุด

ทีนี้มาดูอะไรบ้างที่ไม่ควรเหมือนเดิมกันดีกว่าครับ

1.Layout
2.Font size
3.line height

responsive-design-layout

responsive-design-layout

Layout มันไม่ควรเหมือนเดิมเป็นอย่างยิ่ง เพราะความเป็น Responsive นี่แหละที่ทำให้มันควรจะเปลี่ยน เริ่มจากบางส่วนของหน้าเพจ คุณอาจจะออกแบบเอาไว้เป็นลักษณะ 4 ช่อง แสดงรูปภาพ แสดงข้อความรายละเอียดสินค้าด้านล่าง มีขอบสีขาว พอคุณเปลี่ยนอุปกรณ์หน้าจอเล็กลงคุณจะยัดทุกอย่าง 4 ช่องลงไปมันก็จะอึดอัด ดังนั้นคุณก็อาจจะปรับเป็น 1 ช่องเต็มขนาดของจอ เหมือนที่สมัยนี้เค้านิยมกัน Form สำหรับรับส่งข้อมูล เคยทำเป็น 2 Column พอเปลี่ยนหน้าจอคุณก็ทำซะให้เหลือแค่ 1 column ซะแบบนี้

font-size

font-size

Font size เป็นเรื่องสำคัญมากๆ เพราะคุณอาจจะอิง Base จากจอของ Desktop แต่ความเป็นจริงขนาดของ Font ควรที่จะปรับให้เหมาะสมเช่น เนื้อหาของคุณโล่งมาก เมื่อมาอยู่ในจอขนาดเล็กคุณก็ปรับขนาดตัวอักษรให้ใหญ่ซะ เพื่อการอ่านง่าย หรือพอลดจอลงมาแล้วแน่นไปหมด คุณกฌปรับให้ใหญ่ขึ้นเพื่อที่จะอ่านสะดวก ขนาดของหัวเรื่อง H1 ก็ไม่ควรใหญ่โตจนเกินงาม หรือแม้แต่ Link เองก็ไม่จำเป็นจะต้องเล็กเท่าเดิม เพราะคุณอาจจะซ่อน Element บางตัวไปทำให้มีเนื้อที่ว่างมากพอ Link ก็สามารถปรับขนาดเพื่อง่ายต่อการกดได้

สุดท้ายเรื่องของ Line Height ไม่ใช่แค่เฉพาะในส่วนของ P แต่ควรจะทั้งหมด ในแต่ละ Element คุณควรปรับระดับความสูลที่สม่ำเสมอกันหมดจากบนลงล่าง เพื่อให้การเลื่อนนิ้วปาดลงจอเลื่อนขึ้น ก็สามารถอ่านได้อย่างสบาย

ผมมองว่าพวกนี้น่าจะเป็นสิ่งสำคัญของการออกแบบเว็บให้ Responsive นะครับ