พื้นฐานการทำเว็บแบบ Responsive

Responsive design คือการทำเว็บให้โค๊ดเพียงชุดเดียว  สามารถใช้ได้กับจอหลายๆ ขนาด  เช่นจอคอมพิวเตอร์  จอแท็บเล็ต  หรือจอโน๊ตบุค  ซึ่งการทำเว็บแบบ responsive นั้น  มักจะใช้สำหรับแก้ปัญหาการทำเว็บเวอร์ชันมือถือ  ที่มักจะมีฟีเจอร์เป็นรองเว็บหลักอยู่เสมอๆ  เนื่องจากเว็บ responsive นั้น  ฟีเจอร์ต่างๆ บนเว็บจะยังอยู่ “ค่อนข้างครบ” แต่จะถูกจัดเรียงใหม่ให้เหมาะสมกับขนาดจอนั่นเอง  ต่างจากการทำเว็บเวอร์ชันมือถือแยก  ที่ฟีเจอร์ต่างๆ มักจะตามมาไม่ครบนั่นเองครับ

Media Query หัวใจสำคัญของ Responsive

สิ่งแรกที่ผู้อ่านควรจะรู้จัก  นั่นคือ media query ใน CSS  เพราะมันถือเป็นหัวใจสำคัญของ responsive เลยทีเดียว  ซึ่งเจ้า media query นี้  จะช่วยให้เราตรวจสอบเกี่ยวกับการแสดงผลของอุปกรณ์ที่เปิดเว็บเราอยู่ได้ครับ  เช่นตรวจสอบความกว้าง  ความสูง  ตรวจสอบการเอียงเครื่อง (แนวตั้งหรือแนวนอน) ตรวจสอบอัตราส่วนจอภาพ   ตรวจสอบจำนวนสี  หรือใช้ตรวจสอบมุมมองสำหรับพิมพ์ก็ได้เช่นกัน

แต่อย่างเพิ่งสยองไปครับ media query เต็มๆ คงจะเขียนให้อ่านกันในโอกาสหน้า  คราวนี้จะพาไปดูพื้นฐานกันก่อน  กับการตรวจสอบ width, height, และ orientation (หลายครั้งที่เราก็ใช้กันอยู่แค่นี้แหละครับ)

พื้นฐาน Media Query ความกว้างหน้าจอ

หน้าตาของ media query จะเป็นอย่างนี้ครับ

@media screen and (เงื่อนไข 1) and (เขื่อนไข 2) and (เงื่อนไข n) {
	/* โค๊ด CSS ปกติ */
}

อย่างเช่น  เราต้องการเขียน CSS สำหรับจอความกว้างที่ที่หว่าง 640px ถึง 800px เราก็สามารถเขียนโค๊ดได้อย่างนี้

@media screen and (min-width:640px) and (max-width:800px) {
	body {
		background:#cacaca;
	}
}

สิ่งที่จะเกิดขึ้นคือ  เมื่อความกว้างของพื้นที่แสดงผล  อยู่ในระหว่าง 64opx ถึง 800px พื้นหลังก็จะเปลี่ยนเป็นสีเทานั่นเองครับ  ดังตัวอย่างข้างล่างนี้ (ภาพซ้ายจะเป็นจอที่ความกว้าง 1024px ส่วนภาพขวาจะเป็นจอที่กว้าง 800px)

พื้นฐาน Media Query การเอียงหน้าจอ

ส่วนต่อไปที่เราจะมาดูกันคือเรื่องของการเอียงหน้าจอครับ  จะเป็นการตรวจสอบว่าเป็นจอแนวตั้งหรือแนวนอน  ซึ่งจะตรวจสอบโดยใช้เงื่อนไข orientation ในเงื่อนไข  ดังตัวอย่างนี้

@media screen and (orientation:portrait) {
	/* โค๊ด css ปกติ */
}

โดยเงื่อนไข orientation จะสามารถระบุค่าได้ 2 อย่างคือ portrait สำหรับจอแนวตั้ง  และ landscape สำหรับจอแนวนอน  เรามาสองดูตัวอย่างกันดีกว่าครับ

@media screen and (orientation:portrait) {
	h1 {margin-top:50px;}
	#menu {
		position:fixed;
		top:0px;
		left:0px;
		right:0px;
		height:40px;
		background:#1BA8E0;
	}
}

@media screen and (orientation:landscape) {
	#menu {
		position:fixed;
		top:0px;
		bottom:0px;
		right:0px;
		width:40px;
		background:#1BA8E0;
	}
}

ในตัวอย่างคือจะสร้างแถบเมนูสีฟ้าขึ้นมา  โดยเมื่อจอเป็นแนวตั้ง  แถบเมนูนี้จะอยู่ด้านบน  และเมื่อจอเป็นแนวนอน  แถบเมนูนี้จะอยู่ด้านขวามือ  ดังตัวอย่างนี้ครับ

ทั้งสองอย่างนี้ก็เป็นพื้นฐาน media query ที่ควรจะรู้ก่อนที่จะไปทำ responsive (เพราะอย่างที่บอกคือโค๊ดของ responsive นั่น  มีแค่เช็คเงื่อนไข  และเขียนโค๊ดลงไปให้ถูก  แค่นั้นเองครับ)  ต่อไปเรามาดูเรื่องแนวคิดการทำเว็บแบบ responsive กันดีกว่า

สิ่งที่ควรคิดก่อนออกแบบเว็บให้เป็น Responsive

แน่นอนว่า responsive design นั้น  ไม่ได้มีแค่การเขียน CSS Media Query อย่างเดียว  แนวคิดการออกแบบหน้าตาเว็บไซต์ให้สามารถใช้งานได้บนทุกอุปกรณ์นั้นเป็นอีกข้อที่มีความเป็นเป็นอย่างยิ่ง

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

1. ออกแบบโดยคำนึงถึงอุปกรณ์พกพาเป็นที่ตั้ง

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

อีกอย่างที่ต้องคำนึงถึงคือ  ฟีเจอร์ที่คนเข้าชมสามารถใช้งานได้คอมพิวเตอร์  เขาก็ต้องการใช้มันบนโทรศัพท์เช่นกัน  ดังนั้นเมื่อปรับปรุงให้ใช้บนคอมพิวเตอร์ได้แล้ว  อย่าลืมคำนึงถึงจุดนี้ด้วย  ฟีเจอร์ที่เพิ่มเข้ามาบนเว็บสำหรับคอมพิวเตอร์  บนมือถือก็ควรใช้งานได้ด้วยเช่นกัน

2. ลำดับความสำคัญของ element ต่างๆ ให้ถูกต้อง

หลายๆ ครั้งที่เราเขียนโค๊ด  โดยไม่คำนึงถึงลำดับความสำคัญของ element ต่างๆ  ตัวอย่างที่มักจะเจอกันบ่อยๆ คือ sidebar ที่บางคนเอาโค๊ดของ sidebar มาไว้ก่อน content และจัดการ float:right เพื่อให้มันไปอยู่ขวามือแทน

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

3. บนอุปกรณ์พกพา  ต้องใช้พื้นที่แสดงผลให้คุ้มค่า

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

4. ลดการใช้งานไฟล์ขนาดใหญ่

การใช้งานเว็บบนอุปกรณ์พกพา (โดยเฉพาะโทรศัพท์มือถือ) นั้นล้วนเชื่อมต่อจาก EDGE หรือ 3G กันเป็นส่วนใหญ่  ซึ่งนอกจากความเร็วที่ค่อนข้างต่ำเมื่อเทียบกับ ADSL ตามบ้านแล้ว  ยังติดปัญหา Fair Usage Policy (หรือที่เรียกว่า FUP) กันอีกด้วย  ทำให้ผู้ใช้หลายคนค่อนข้างเหงื่อตก  เมื่อต้องเปิดเว็บที่มีขนาดเป็นสิบเม็กกะไบต์

ดังนั้นแล้ว  การ optimize ไฟล์เพื่อให้มีขนาดเล็กลง  ถือเป็นสิ่งที่ควรทำเป็นอย่างยิ่งเมื่อทำเว็บให้รองรับมือถือ  ควรงดการใช้งานภาพพื้นหลังที่เป็นไฟล์ใหญ่ๆ (เช่นรูปภาพขนาด 300KB) หันไปใช้สีพื้นๆ หรือ tiled pattern แทน  และแน่นอนว่า JavaScript ใหญ่ๆ ที่ไม่จำเป็น  ก็ไม่ควรที่จะเรียกมาใช้งานด้วยเช่นกัน  เพราะมันจะทำให้เปลือง bandwidth ไปเปล่าๆ

ทิ้งท้าย

จริงๆ แล้ว Responsive ยังมีอะไรที่เยอะกว่านี้มาก  แต่โดยหลักแล้วคือควรคิดให้เว็บทำงานบนมือถือได้อย่างดีเป็นหลักก่อนนั่นเองครับ

สำหรับโพสต์นี้คงขอจบไว้เท่านี้ก่อน  สำหรับเทคนิคต่างๆ  เช่นการใช้งาน media query เอาไว้จะโพสต์ให้อ่านในคราวต่อๆไปนะครับ  สวัสดีครับ

Posted by jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

4 Replies to “พื้นฐานการทำเว็บแบบ Responsive”

  1. ทดสอบ email notification

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *