แนวทางการพัฒนาเว็บแบบ Responsive Web Design

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

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

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

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

img { max-width: 100%; } 

จากตัวอย่างข้างต้น เป็นการกำหนดขนาดของรูปภาพให้มีความกว้าง 100% แทนการกำหนดขนาดของรูปภาพแบบตายตัว (width: 100px) ทำให้การแสดงผลของรูปภาพจะขึ้นอยู่กับขนาดของหน้าจออุปกรณ์หรือความกว้างของบราวเซอร์แทน

ข้อเสีย

–         บราวเซอร์ Internet Explorer ยังไม่รองรับ properties ที่ชื่อว่า max-width  แต่สามารถแก้ไขโดยการใช้ properties ที่ชื่อว่า width แทน

–          ในบราวเซอร์เวอร์ชั่นเก่าๆ ยังไม่รองรับเทคนิคการทำงานดังกล่าวเช่นกัน ซึ่งสามารถแก้ไขโดยการใช้ JavaScript ช่วยในการทำงานแทนได้

แม้วิธีข้างต้นจะเป็นการแก้ปัญหาการยืดหยุ่นของภาพได้ดีและรวดเร็ว แต่สิ่งที่ไม่ควรมองข้ามคือ ความละเอียดของภาพและเวลาในการโหลดรูปภาพ เนื่องจากในปัจจุบัน นิยมใช้งานเว็บไซต์ผ่านทาง Smartphone หรือ Tablet มากขึ้น การโหลดภาพที่มีขนาดใหญ่และความละเอียดสูงจะทำให้เสียเวลาและใช้พื้นที่โดยไม่จำเป็น
Filament Group’s Responsive Images
เป็นเทคนิค ที่ไม่เน้นการปรับขนาดของรูปภาพ แต่ใช้วิธีเลือกรูปภาพที่มีขนาดเหมาะสมกับอุปกรณ์มาแสดงแทน ซึ่งช่วยแก้ปัญหาการโหลดรูปภาพที่มีขนาดใหญ่มาแสดงผลในอุปกรณ์ที่มีขนาดเล็ก และลดการใช้พื้นที่โดยไม่จำเป็นได้

โดยการทำงานด้วยเทคนิคดังกล่าวจำเป็นที่จะต้องใช้ไฟล์บางตัว ซึ่งสามารถโหลดได้จาก Github

ซึ่งมีขั้นตอนดังนี้

1) โหลดไฟล์ที่จำเป็นตอนใช้งาน ซึ่งได้แก่  JavaScript, ไฟล์ .htaccess และไฟล์รูปภาพทั้งขนาดเล็กและขนาดใหญ่

2) ทำการกำหนดคุณสมบติของรูปภาพให้อ้างอิงไปยังไฟล์รูปภาพนั้นๆทั้งขนาดเล็กและขนาดใหญ่ โดยวิธีการอ้างอิงของรูปภาพขนาดเล็กจะต้องอ้างอิงผ่าน attribute  SRC และรูปภาพขนาดใหญ่จะอ้างอิงผ่าน attribute data-fullsrc

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

ซึ่งแท็ก data-fullsrc เป็นแท็กที่เพิ่มเข้ามาใน HTML5 เพื่อใช้ในการโหลดรูปภาพกรณีที่หน้าจอมีความกว้างเกิน 480 pixels จากตัวอย่าง กรณีที่เปิดบนอุปกรณ์ที่มีขนาดความกว้างไม่เกิน 480 จะทำการโหลดภาพ smallRes.jpg ขึ้นมาแสดง แต่ในกรณีที่หน้าจอกว้างเกิน 480 จะทำการโหลดภาพ largeRes.jpg ขึ้นมาแสดง ตัวอย่าง
Stop iPhone Simulator Image Resizing

ปัจจุบันอุปกรณ์ของค่าย Apple ไม่ว่าจะเป็น IPhone(เวอร์ชั่น 4 ขึ้นไป) หรือ IPad(เวอร์ชั่น 2 ขึ้นไป) ได้นำเทคโนโลยีที่ช่วยในการแสดงผลของหน้าจอได้ดีขึ้นซึ่งมีชื่อเรียกว่า Retina Display ทำให้การแสดงผลของ Responsive Web บนอุปกรณ์ดังกล่าวไม่ได้ขนาดที่เหมาะสมกับที่ได้ทำการออกแบบไว้ ซึ่งมีเทคนิคในการแก้ไขปัญหาดังกล่าวโดยการนำค่า pixels มาเป็นตัวช่วยในการแก้ปัญหา ซึ่งจะขอธิบายในส่วนของเรื่อง pixels ให้ผู้อ่านได้เข้าใจก่อน

pixels คือหน่วยที่ใช้วัดค่าความละเอียดของรูปภาพหรือหน้าจออุปกรณ์  pixels แบ่งได้  3 แบบด้วยกัน คือ Physical Pixels, CSS Pixels และ Device Pixels

Physical Pixels คือ จำนวน pixels จริงๆ ตาม spec ของ Device นั้นๆ  เช่น iPhone3 เท่ากับ 320×480 ส่วน iPhone4 เท่ากับ 640×960 เป็นต้น

ส่วน CSS Pixels นั้นเป็นส่วนที่ใช้ใน CSS declarations ตัวอย่าง เรากำหนด width:320px หรือ font-size:16px ค่า pixels ในส่วนนี้จะหมายถึง CSS Pixels ซึ่งโดยปกติแล้ว CSS Pixels จะมีค่าเท่ากับ Physical Pixels ถ้าเราไม่ได้ Zoom หน้าจอ แต่ถ้าเรา Zoom เข้า ภาพจะขยายใหญ่ขึ้น นั่นเป็นเพราะว่าเว็บบราวเซอร์จะไปขยาย CSS Pixels ให้มีขนาดใหญ่ขึ้น ในทางกลับกัน ถ้าเรา Zoom ออก CSS Pixels ก็จะมีขนาดเล็กลง ส่งผลให้ภาพที่ได้มีขนาดเล็กลง ซึ่งนี่ก็เป็นหลักการเดียวกับการเปลี่ยน Resolution ของหน้าจอ PC ครับ สมมติหน้าจอเรามี Physical Pixels เป็น 1280×1024 หากเราเปลี่ยน Resolution เป็น 1024×768 สิ่งที่เปลี่ยนไปก็คือ CSS Pixels นั่นเองครับ

สุดท้ายคือ Device Pixels ในสมัยก่อน Device Pixels จะมีค่าเท่ากับ Physical Pixels เช่น iPhone3 จะมี Physical Pixels และ Device Pixels เท่ากันคือ 320×480 แต่ต่อมา iPhone4 ได้ปรับปรุงหน้าจอให้มีความละเอียดมากขึ้น หรือที่เรียกว่า Retina Display ซึ่งจะทำให้ iPhone4 มี Physical Pixels เพิ่มขึ้นเป็น 2 เท่า คือ 640×960 ซึ่งหมายความว่า เว็บที่แสดงผลได้ดีใน iPhone3 กลับมีขนาดเล็กลงใน iPhone4 ทั้งๆ ที่จริงๆ แล้ว ขนาดหน้าจอของ iPhone3 และ iPhone4 นั้นเท่ากัน ปัญหานี้สามารถแก้ง่ายๆ ด้วย Device Pixels ครับ เนื่องจาก Device Pixels นั้นเป็นเหมือน Pixels จำลอง ที่จะช่วยให้ application สามารถกำหนดขนาดขององค์ประกอบต่างๆ ได้ตรงกับความเหมาะสมในมุมมองของผู้ใช้งาน ซึ่งค่านี้ไม่ได้เพิ่มตาม Physical Pixels แต่จะเพิ่มตามขนาดของหน้าจอ(Screen size) ครับ

โดยวิธีแก้ไขปัญหาคือการอ้างอิง Meta Tag ดังต่อไปนี้ในหน้าเว็บไซต์ของเรา

<meta name="viewport" content="width=device-width; initial-scale=1.0">

โค็ด html ด้านบน เป็นการกำหนดให้ viewport ของเราใช้ค่า Device Pixels แทน CSS Pixels และยังกำหนดให้ระดับการซูมเบื้องต้นเป็น 100% อีกด้วย อ่านเพิ่มเติม
Custom Layout Structure
ในส่วนนี้เราจะกล่าวถึงเรื่องของการจัดวางโครงสร้างของ Layout หรือการจัดลำดับความสำคัญของ element ต่างๆ ซึ่งเป็นสิ่งจำเป็นในการทำงานของเว็บแบบ Responsive โดยที่ไฟล์ css นั้นไฟล์หลัก จะมีการประกาศในส่วนของ element หลัก หรือ element ที่ใช้ร่วมกันทั้งหน้า ไว้ส่วนบนสุดของไฟล์ ตามมาด้วย ลำดับของ element ดังนี้ #wrapper–> #content–> #sidebar–> #nav และสามารถสร้างไฟล์ css สำหรับรองรับอุปกรณ์ขนาดเล็ก ให้สืบทอดคุณสมบัติมาจากไฟล์หลักอีกชั้นนึง

ตัวอย่าง การเรียง Element ที่ไม่เหมาะสม คือมีการวางตำแหน่งของ Sidebar ก่อน content และจัดเรียงแบบ float: right เพื่อให้วางอยู่ในตำแหน่งขวามือของหน้าจอ ซึ่งจะเกิดปัญหากับการใช้งานบนอุปกรณ์ Smartphone ที่มีพื้นที่เพียง คอลัมน์เดียว ส่งผลให้ตำแหน่ง Sidebar เปลียนไปจากเดิมเป็นอยู่ในตำแหน่งบนสุดก่อนเข้าถึงเนื้อหาในส่วนของ content ซึ่งทำให้ผู้ใช้ไม่สะดวกต่อการใช้งานและการเข้าถึงเนื้อหาในเว็บไซต์ ดังนั้นการวางลำดับ Element ให้ถูกต้องถือเป็นเรื่องที่สำคัญอีกอย่างหนึ่งในการออกแบบเว็บไซต์
Showing or Hiding Content
เป็นอีกหนึ่งเทคนิคในการออกแบบ Responsive Web ช่วยในการจัดการเกี่ยวกับข้อความต่างๆในแต่ละ content เพราะในการแสดงผลขนาดใหญ่ จะประกอบไปด้วย content ข้อความหลายๆส่วน เมื่อนำมาแสดงผลในหน้าจออุปกรณ์ขนาดเล็ก contentที่เยอะจนเกินไปทำให้ผู้ใช้งานไม่สะดวกในการอ่านข้อความ จึงจำเป็นที่ต้องทำการซ่อน-แสดงเฉพาะ content ที่สำคัญๆเท่านั้น

Display: none;

เป็นคุณสมบัติที่มีมาในแท็กต่างๆของ HTML ใช้ในการซ่อน-แสดงแท็กต่างๆได้ โดยนำมาประยุกต์ใช้กับ media query ดังนี้

หน้าจอหลัก

<link href="style.css " rel="stylesheet" />
    <link href="mobile.css " rel="stylesheet" media="screen and (max-width: 600px)" />
<p><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>

<div id="content">
<h2>Main Content</h2>
</div>

<div id="sidebar-left">
<h2>A Left Sidebar</h2>

</div>
<div id="sidebar-right">
<h2>A Right Sidebar</h2>
</div>

โค็ดในไฟล์ตัวหลัก style.css

#content{
          width: 54%;
          float: left;
          margin-right: 3%;
}
#sidebar-left{
          width: 20%;
          float: left;
          margin-right: 3%;
}
#sidebar-right{
          width: 20%;
          float: left;
}
.sidebar-nav{display: none;}

โค็ดในไฟล์ mobile.css

#content{
          width: 100%;
}
#sidebar-left{
          display: none;
}
#sidebar-right{
          display: none;
}
.sidebar-nav{display: inline;}

จากโค็ดด้านบน เมื่อมีการเรียกใช้งานในส่วนของหน้าจอหลัก จะมีการอ้างอิงไปยัง style.css กรณีที่หน้าจอแสดงผลเป็นคอมพิวเตอร์ จะทำการซ่อนในส่วนของ .sidebar-nav และแสดงผล sidebar-left กับ sidebar-right แต่ในกรณีที่เปิดด้วยอุปกรณ์มือถือ จะอ้างอิงไปยัง mobile.css ซึ่งการแสดงผลจะสลับกัน คือ แสดงในส่วนของ .sidebar-nav และทำการซ่อน sidebar-left กับ sidebar-right

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

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

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

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

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

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

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

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

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

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

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

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

Media Queries

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

Width ใช้ตรวจสอบความกว้างของพื้นที่แสดงผล โดยวัดจากความกว้างของพื้นที่ ที่ใช้แสดงผลเว็บไซต์ เช่น ความกว้างของ Browser โดยจะวัดรวมเอาพื้นที่ของ Scrollbar ด้วย (ถ้ามี)

Height ใช้ตรวจสอบความสูงของพื้นที่แสดงผล โดยวัดจากความสูงของพื้นที่ ที่ใช้แสดงผลเว็บไซต์ เช่น ความสูงของ Browser โดยจะวัดรวมเอาพื้นที่ของ Scrollbar ด้วย (ถ้ามี)

ตัวอย่างการเขียนตรวจสอบ width และ height

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

@media screen and (min-width: 400px) and (max-width: 700px) {…}

Device-width ใช้ตรวจสอบความกว้างของอุปกรณ์แสดงผลทั้งหมด โดยวัดจากความกว้างของจออุปกรณ์ ที่ใช้แสดงผลเว็บไซต์ เช่น ถ้าจอแสดงผลอยู่ที่ 640 x 960 ก็จะวัดเอาความกว้างคือ 640px

Device-height ใช้ตรวจสอบความสูงของชอุปกรณ์แสดงผลทั้งหมด โดยวัดจากความสูงของจออุปกรณ์ ที่ใช้แสดงผลเว็บไซต์ เช่น ถ้าจอแสดงผลอยู่ที่ 640 x 960 ก็จะวัดเอาความสูงคือ 960px

ตัวอย่างการเขียนตรวจสอบ device-width และ device-height

<link rel="stylesheet" media="screen and (device-height: 600px)" />

@media screen and (device-width: 800px) { … }

Orientation ใช้ตรวจสอบการหมุนของจอว่าอยู่ในแนวตั้ง หรือ แนวนอน โดยคำสั่งนี้จะทำงานกับ ภาพ Bitmap เท่านั้น

ตัวอย่างการเขียนตรวจสอบ orientation

@media all and (orientation: portrait) {…}

@media all and (orientation: landscape) {…}

Aspect-ratio ใช้ตรวจสอบสัดส่วน ของ ภาพ Bitmap ที่แสดงผลบนหน้าจอเท่านั้น

Device-aspect-ratio ใช้ตรวจสอบสัดส่วนการแสดงผล ของอุปกรณ์ว่า ขณะนี้จอนั้นแสดงผล ภาพ Bitmap อยู่ที่เท่าไหร่ เช่น 4:3, 16:9, 1280:720 เป็นต้น

ตัวอย่างการเขียนตรวจสอบ aspect-ratio และ device-aspect-ratio

@media screen and (device-aspect-ratio: 16/9) { … }

@media screen and (device-aspect-ratio: 32/18) { … }

@media screen and (device-aspect-ratio: 1280/720) { … }

@media screen and (device-aspect-ratio: 2560/1440) { … }

Color ใช้ตรวจสอบ การแสดงสีของอุปรณ์นั้นๆ (Bits per Pixel) หากเป็นอุปกรณ์ ที่ไม่ได้แสดงผลเป็นสี ค่าจะกลายเป็น 0

Monochrome ใช้ตรวจสอบอุปกรณ์ขาวดำ (Bits per Pixel) หากเป็นอุปกรณ์ที่แสดงผลแบบสี ค่าจะกลายเป็น 0

ตัวอย่างการเขียนตรวจสอบ color และ monochrome

@media all and (color) { … }

@media all and (min-color: 1) { … }

@media all and (monochrome) { … }

@media all and (min-monochrome: 1) { … }

<link rel="stylesheet" media="print and (color)" href="http://…" />  

<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

Resolution ใช้ตรวจสอบความระเอียดของ ภาพ Bitmap ที่แสดงบนอุปกรณ์นั้นๆ

ตัวอย่างการเขียนตรวจสอบ Resolution

@media print and (min-resolution: 300dpi) {…}

 

อ้างอิง :

Responsive Web Design: What It Is and How To Use It
พื้นฐานการทำเว็บแบบ Responsive
มาทำความรู้จัก Media Queries