เรซสปอนต์ซีฟ เว็บดีไซน์



ปรับปรุง : 2561-12-13 (เรียบเรียง)

เรซสปอนต์ซีฟ เว็บดีไซน์ (Responsive Web Design) คือ การออกแบบเว็บเพจ หรือเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้การแสดงผลของเว็บเพจบนอุปกรณ์ที่แตกต่างกันได้อย่างเหมาะสม โดยใช้ที่อยู่เว็บเดียวกัน (One Web Address) และโค้ดชุดเดียวกัน (One Code) ไม่ว่าจะแสดงผลบน Mobile, TabletPC, SmartTV หรือ Desktop

ภาพจาก http://www.km-web.rmutt.ac.th/?p=1889

กระบวนการจัดทำ responsive web design

อ่านจาก http://www.designil.com/responsive-web-design-4-ways.html
แนะนำว่ามี 4 วิธี ดังนี้
1. Responsive Retrofitting คือ การแปลงเว็บเก่าเป็น Responsive
2. Responsive Mobile Site คือ การสร้าง Mobile Site คู่กับเว็บเก่า แล้วแปลงเป็น Responsive ต่อไปเว็บเก่าก็จะล้มไป
3. Mobile-First Responsive Site คือ เริ่มต้นจากการสร้าง Mobile-First
4. Piecemeal คือ การแปลงเว็บเก่าให้เป็น Responsive ทีละนิด

เทคนิค 1 :: float left

อ่านจาก http://www.w3schools.com/html/html_responsive.asp แนะนำการใช้ CSS กำหนด float เป็น Left เวลา resize browser จะทำให้หดขยายตามที่กำหนดได้ ดังนั้นเมื่อเปิดในอุปกรณ์ที่แตกต่างกัน ก็จะมีการปรับขนาดให้เหมาะสมกับแต่ละอุปกรณ์โดยอัตโนมัติ

<html><head><style>
.x { float:left;width:300px;height:300px;margin:5px;border:1px solid red; }
</style></head>
<body>
<div class="x">
<font size="6">x x x x x x x x x x x x x x x x x x x x</font>
</div>
<div class="x">
<font size="6">x x x x x x x x x x x x x x x x x x x x</font>
</div>
<div class="x">
<font size="6">x x x x x x x x x x x x x x x x x x x x</font>
</div>
<div class="x">
<font size="6">x x x x x x x x x x x x x x x x x x x x</font>
</div>
<div class="x">
<font size="6">x x x x x x x x x x x x x x x x x x x x</font>
</div>
<div class="x">
<font size="6">x x x x x x x x x x x x x x x x x x x x</font>
</div>
</body></html>

+ responsive_sam1.htm

เทคนิค 2 :: Relative

อ่านจาก http://www.siamhtml.com สอนทำ responsive web design ในขั้นตอนที่ 3 ว่ากำหนดขนาดแบบ Relative เมื่อจอกว้างก็กว้างตาม จอแคบ ก็แคบตาม เพราะกำหนดแบบใช้ % จากตัวอย่างข้างล่างมี 2 ตารางแยกกัน และ cell ทางขวามีขนาด 30% เมื่อทดสอบใน firefox, chrome และ ie พบว่าช่องของ cat กับ dog มีขนาดที่ปรากฎเท่ากัน

<img src="rsptown.gif" width="100%" />
<table style="width:100%;background-color:yellow;border:3px solid black;">
<tr>
<td width="70%">ant</td>
<td width="30%" style="border:3px solid red;">cat</td>
</tr>
</table>
<table style="width:100%;background-color:yellow;border:3px solid black;">
<tr><td width="70%">
<table style="width:100%;background-color:yellow;border:3px solid black;">
<tr>
<td width="70%">rat</td>
<td width="30%" style="border:3px solid red;">bat</td>
</tr>
</table>
</td>
<td width="30%" style="border:3px solid red;">dog</td>
</tr>
</table>

+ responsive_sam2.htm

เทคนิค 3 :: CSS3 Media Queries : max-width

อ่านจาก http://ecadigital.com/knowledge/ สอนการใช้ Media Queries ควบคุมการแสดงผล ต่อขนาดความกว้างของหน้าจอ (max-width) ที่แตกต่างกัน หน้าจอที่ผมใช้กว้าง 1366px ก็จะมีพื้นสีเหลือง เมื่อลดขนาด browser เหลือ 900px สีพื้นและขนาดก็จะเปลี่ยน ลดลงอีกเหลือ 400px ก็จะมีสีพื้นเป็นสีเทา ทำงานได้กับ firefox31 และ chrome40 แต่ใน ie8 พบว่าสีพื้นเป็นสีเหลืองตลอด คาดว่ายังไม่รองรับ Media Queries

<html><head><style>
body {background-color:yellow;font-size:72px;}
.t{font-size:12px;}
@media screen and (max-width: 960px) {
body {background-color:pink;font-size:36px;} 
.t{font-size:20px;}
}
@media screen and (min-width: 549px) and (max-width: 960px) {
body {background-color:#dddddd;font-size:20px;} 
.t{font-size:36px;}
}
</style>
</head><body>
TEST
<table class="t"><tr><td>THAIALL</tr></table>
</body></html>

+ responsive_sam3.htm

เทคนิค 4 :: list-style กับ visibility เป็น hidden

อ่านจาก https://msdn.microsoft.com/en-us/magazine/hh653584.aspx แนะนำการใช้ list-style ที่เปลี่ยนไปเมื่อเปลี่ยนขนาดจอภาพ และตารางสามารถถูกซ่อนได้ ทำให้เนื้อหาบางอย่างถูกเลือกที่จะแสดงหรือไม่แสดงก็ได้ ตามการเปลี่ยนแปลงของขนาดจอภาพ ซึ่งจะเปลี่ยนต้องควบตามเงื่อนไข 2 ข้อของ media queries คือไม่เกิน 600 และเป็นแนวตั้ง ใช้งานได้ทั้งใน firefox และ chrome เมื่อทดสอบกับ ie8 แล้วพบว่าไม่ยอมรับ media queries

<html><head><style>
body { margin:0px; }
#nav { float:left;background-color:yellow;width:200px; }
#msg { float:left;width:100px; } 
@media screen and (max-width:600px) and (orientation: portrait) { 
#nav { float:left; }
#nav li { list-style:none; float:left; margin:5 10 15 .5em; border:3px solid #000000; } 
#msg { visibility: hidden; display:none; } 
}
</style></head><body>
<table id="msg"><tr><td>hello thaiall<td></tr></table>
<table id="nav">
<tr><td>
<ol><li>steve jobs</li><li>bill gates</li></ol>
<td></tr>
</table>
</body></html>

+ responsive_sam4.htm

ตัวอย่างจากเว็บไซต์ที่เป็น responsive web design

ปัจจุบันมีเว็บไซต์มากมาย ที่เริ่มปรับโครงสร้างเว็บไซต์เป็น responsive website ซึ่งมีนโยบายในการปรับที่ไม่เหมือนกัน จากการทดสอบ resize browser เพื่อดูการตอบสนองของแต่ละเว็บไซต์ ก็พบว่า 3 เว็บไซต์ที่ได้ทดสอบมีการกำหนดขนาดในการเป็น responsive website ที่ไม่เหมือนกัน
1. youtube.com รองรับทั้งจอบน desktop และมี m.youtube.com ที่ตรวจสอบอัตโนมัติ
ตัวอย่างแต่ละขนาด 1585px :: 1267px :: 1000px :: 720px :: 496px
2. facebook.com ยอมให้เปิด m.facebook.com บน desktop
ตัวอย่างแต่ละขนาด 1290px :: 1130px :: 1024px
3. thairath.co.th หรือ m.thairath.co.th ก็ไม่เห็นความแตกต่างบน destop เพราะรองรับอัตโนมัติ
ตัวอย่างแต่ละขนาด 1220px :: 1000px :: 780px :: 420px

multi screen เป็นอีกเหตุผลของการพัฒนา responsive web design

ปัจจุบัน แต่ละมนุษย์ออฟฟิศจำนวนไม่น้อย ที่แต่ละคนทำกันคนละหลายงานพร้อมกัน หรือที่เรียกว่า multi-tasking อาจต้องใช้อุปกรณ์แสดงผล หรือจอภาพหลายจอ (multi screen) ไปพร้อมกัน ในอดีตคงนึกไม่ออกว่าจะใช้หลายจอภาพไปทำไม แต่ละอุปกรณ์ย่อมมีวัตถุประสงค์ มีแอพพลิเคชั่น มีเงื่อนไข และการเชื่อมต่อเครือข่ายที่แตกต่างกันไป
ตัวอย่างเช่น .. อาจารย์กำลังใช้บริการ translate เพื่อแปลภาษาบน Desktop แล้ว อ่านอีบุ๊คแบบ PDF จาก Tablet แต่ take note ด้วยปากกาบน smart phone เพื่อบันทึก และนำ short note กลับมาใช้งานอีก หรือแชร์ไปให้ลูกศิษย์ในชั้นเรียนได้ร่วมกันเรียนรู้ต่อไป สมัยนี้ทั้งนักเรียน และอาจารย์ที่ทันสมัย .. มักทำงานกันแบบ multi-tasking
NationTV Five Screen Caravan : TV, Computer, Mobile, Tablet, Digital signage

Inspection in Browser

ปัจจุบัน กระแส responsive web design มาแรง เน้นออกแบบให้เรียบง่าย และออกแบบครั้งเดียวใช้ได้กับทุกอุปกรณ์ ปกติออกแบบแล้วต้องทดสอบกับอุปกรณ์ต่าง ๆ แต่ถ้าไม่ต้องการทดสอบกับของจริง โปรแกรมบราวเซอร์ก็ได้จำลองหน้าต่างมาให้ทดสอบเลือกอุปกรณ์ได้โดยง่าย ว่าที่เราออกแบบโฮมเพจไว้นั้น เมื่อใช้กับอุปกรณ์ใด จะพบหน้าตาแบบใด
การเข้าสู่โหมดจำลอง (Simulator ของแต่ละ Browser กดปุ่มไม่เหมือนกัน)
Google Browser กดปุ่ม Ctrl-Shift-I
Firefox Browser กดปุ่ม Ctrl-Shift-M
Smartphone Online Simulator Service
+ mobiletest.me
+ responsivepx.com
+ quirktools.com
+ responsivetest.net
+ ipadpeek.com

โปรแกรม Firefox
มีบริการเปลี่ยน Resolution ให้เท่ากับโทรศัพท์รุ่นต่าง ๆ เป็นการช่วยให้นักพัฒนามองเห็นโฮมเพจที่พัฒนาขึ้น ตามขนาดของอุปกรณ์ต่าง ๆ ด้วยการกด ปุ่ม Ctrl-Shift-M มีปุ่มสั่ง rotate และ capture screen เฉพาะส่วนที่อยู่ในพื้นที่แสดงผล
+ Firefox Download

โปรแกรม Chrome
มีบริการเปลี่ยน Resolution ให้เท่ากับโทรศัพท์รุ่นต่าง ๆ เป็นการช่วยให้นักพัฒนามองเห็นโฮมเพจที่พัฒนาขึ้น ตามขนาดของอุปกรณ์ต่าง ๆ ด้วยการกด ปุ่ม Ctrl-Shift-I แล้วตามด้วย Ctrl-Shift-M แล้วยังมีชื่ออุปกรณ์มาให้เลือกว่าต้องการ view ผ่านสมาร์ทโฟนของ iphone หรือ samsung
+ Chrome download

Resolution แบบต่าง ๆ มีให้พิจารณา 60 แบบ

ในอดีต สมัยหนุ่ม นั่งดูความละเอียดของจอภาพ (Resolution) ก็มีอยู่ไม่กี่แบบ ที่จำได้ก็มี 1024*768 กับ 800*600 และ 640*480 ส่วนจอ 1280*1024 สมัยนั้นไกลฝันมาก ได้แต่มอง ๆ หลัง ๆ มาเค้าใช้จอกันหลายแบบ หัวหน้ายังชวนใช้ตระกูลไออยู่พักหนึ่ง ต่อมาหัวหน้าและผองเพื่อน ก็เปลี่ยนเป็นตระกูลซัมกันหมดแล้ว
วันนี้ 5 มิ.ย.59 หาข้อมูลความละเอียดว่าชาวโลกเค้าไปถึงไหน ก็เข้าไปดูระบบรายงานพบว่า ชาวบ้านชาวช่องเข้าใช้จอแบบไหน เวลาออกแบบเว็บเพจทั้งความกว้าง และความสูง ก็จะได้เข้ากับเค้าได้ สถิติเดือนพฤษภาคม 2559 ของ gotoknow.org ใน truehits.net ที่เก็บไว้นั้น น่าจะแสดงเพียง 60 แบบ เห็นข้อมูลแล้วก็ต้องพิจารณาตัวเลข ผู้ออกแบบเว็บเพจจะออกแบบให้จอภาพเหมาะกับทั้ง 60 แบบ นั่นก็เกินไป
ที่สนใจมี 3 แบบ คือ
กว้าง 360*640 (Galaxy S5)
กว้าง 320*568 (iphone5)
กว้าง 375*667(iphone6)
ส่วนที่เกิน 375 หรือ 411*731(Nexus 5X) หรืออย่าง ipad ที่กว้าง 768*1024 ผมจัดไปอยู่ในกลุ่ม desktop หมดครับ

ตัวอย่างการกำหนด viewport

Mobile - Otimization = Good (100/100)
Desktop - Optimization = Good (100/100)

+ viewport_inout.htm

<html><head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style type="text/css"> 
.inViewport{width:320px;}  
.outsideViewport{width:768px;} 
@media only screen and (max-width:768px) 
{td{border-style:solid;}.outsideViewport{width:760px;}} 
@media only screen and (min-width:321px) and (max-width:375px) 
{td{background-color:yellow;}} 
@media only screen and (max-width:320px) 
{td{background-color:red;}} 
</style></head><body>
<table class="inViewport"><tr><td>
ต.ย. กำหนด media ให้กับ viewport 3 ขนาด
1. ถ้า media ขนาดไม่เกิน 320 ให้ตารางมีพื้นสีเขียว (iphone5)
2. ถ้า media ขนาดไม่เกิน 321 - 375 ให้ตารางมีพื้นสีเขียว (iphone6)
3. ถ้า media ขนาดไม่เกิน 768 ให้แสดงเส้นขอบตาราง (ipad)
ต.ย.นี้ทำเพื่อทดสอบ Mobile view ของ PageSpeed Insights
หากใช้จริงต้องไม่กำหนด 760 ให้ต่ำไปกว่านี้ เพราะใช้จอไม่เต็มที่
หากอยากผ่าน mobile ต้องกำหนด 400 แต่ใช้จริงต้องไปดู Desktop view แทน
</td></tr></table>
<table class="outsideViewport">
<tr><td>
ต.ย. สำหรับเข้าตรวจ PageSpeed Insights
ส่วน User Experience ได้ 81/100 คะแนน (แก้โดยเปลี่ยน 760 เป็น 400)
ส่วน Speed ได้ 100/100 คะแนน
โดยมี ข้อความแจ้งปัญหา 
คือ The page content is 768 CSS pixels wide, 
but the viewport is only 411 CSS pixels wide.
</td></tr></table>
<table><tr><td>
<p>ย่อหน้าแรก
<br/>ข้อมูลในตารางนี้ ไม่ถูกควบคุมโดย class หรือ @media 
ถ้าขนาดไม่เกิน 768px เพราะกำหนดไว้ว่า max ที่จะควบคุมคือ 768px
ตารางอื่นมี class คลุมอยู่ ทำให้เริ่มต้นจะมีขนาดคงที่ชัดเจน
แต่ถ้าขนาดจอปัจจุบันไม่น้อยกว่า 768px ก็จะได้รับการควบคุมตามเงื่อนไข 
ข้อมูลจะขยายจนเต็มจอภาพ ที่เห็นชัด 
คือ หากไม่มากกว่า 768px ตารางนี้จะมีกรอบสีดำ 
เมื่อลดขนาดลงไปเรื่อย ๆ ก็จะเห็นการเปลี่ยนสีพื้น
ที่ขึ้นกับขนาดของจอภาพ แต่ละขนาด
</p>
<p style="background-color:#dddddd;">ย่อหน้าที่สอง
<br/>ข้อมูลในตารางนี้ ไม่ถูกควบคุมโดย class หรือ @media 
ถ้าขนาดไม่เกิน 768px เพราะกำหนดไว้ว่า max ที่จะควบคุมคือ 768px
ตารางอื่นมี class คลุมอยู่ ทำให้เริ่มต้นจะมีขนาดคงที่ชัดเจน
แต่ถ้าขนาดจอปัจจุบันไม่น้อยกว่า 768px ก็จะได้รับการควบคุมตามเงื่อนไข 
ข้อมูลจะขยายจนเต็มจอภาพ ที่เห็นชัด 
คือ หากไม่มากกว่า 768px ตารางนี้จะมีกรอบสีดำ 
เมื่อลดขนาดลงไปเรื่อย ๆ ก็จะเห็นการเปลี่ยนสีพื้น
ที่ขึ้นกับขนาดของจอภาพ แต่ละขนาด
</p>
</td></tr></table>
</body></html>

"Imagination is more important than knowledge" - Albert Einstein

Home
Thaiabc.com
Thainame.net
Lampang.net
Nation university

PHP
MySQL
Visual basic.NET
TabletPC
Linux

Online quiz
Download
Search engine
Web ranking
Add website

Blog : Education
Blog : ACLA
Blog : Lampang
Facebook.com
Twitter.com

About us
My dream
Site map
Sponsor

http://goo.gl/72BPC