ถึงเวลาเปลี่ยนแปลง แล้วหรือยัง
สำหรับทั้งเจ้าของเว็บไซต์เอง และ ผู้ให้บริการเขียนเว็บไซต์เองก็คงจะมีคำถามในใจว่า “แล้วทำไมฉันจึงต้องเปลี่ยนเว็บไซต์เดิมของฉัน ให้เป็น responsive layout” หรือ “responsive website นั้นจำเป็นแค่ไหน คุ้มค่ากับที่จะลงทุนไปหรือเปล่า” หลังจากที่ผู้เขียนได้เขียนเกริ่นแนะนำ responsive website ไปบ้างแล้วในบทความก่อน (Responsive Website เรื่องจิ๊บจ๊อย) ซึ่งนั่นก็ดูเหมือนจะเป็นทฤษฏีที่บอกว่า responsive website คืออะไร ทำงานยังไง
แล้วทำไมจะต้องเปลี่ยนเว็บไซต์เดิมๆ ที่มีอยู่แล้ว หรือ ทำไมต้องเสียเงินมากมายกับอีแค่ว่าต้องทำเว็บให้เป็น responsive กันวะ?
ยกตัวอย่างง่ายๆ เลย สำหรับใครที่ใช้มือถือบ่อยกว่าคอมพิวเตอร์ในการเข้าอินเตอร์เน็ต เพื่อดูโน่นนั่นนี่ ซึ่งคนทำงานหน้าคอม หรือเป็นโปรแกรมเมอร์อยู่แล้วก็คงไม่ได้ใส่ใจอะไรมาก อยากจะเข้าดูอะไรก็เปิดผ่าน web browser บนคอมดู ทุกอย่างก็ปรกติ แต่ในมุมกลับกัน หากลูกค้าที่เข้าเว็บไซต์ส่วนใหญ่ของคุณเป็นผู้ที่ใช้งานมือถือเข้าเว็บไซต์มากกว่าคอมพิวเตอร์ (ผมขอยกตัวอย่างแฟนผม ใช้มือถือทำทุกอย่างตลอด คอมไม่ค่อยได้เปิด) หรือแม้กระทั่งบางครั้งเราอยู่นอกบ้าน มีความจำเป็นจะต้องเปิด browser บนมือถือเพื่อเข้าเว็บไปหาข้อมูลบางอย่าง อย่างเร่งด่วน เช่น ร้านอร่อยแถวนั้น รีวิวร้านนี้ บทความเกี่ยวกับแคลเลอรี่ หรือ สเปคคอมพิวเตอร์ ฯลฯ
สำหรับผมนะ โครตน่าเบื่อเลยที่จะต้องมานั่งกวาดนิ้วซูมเข้าซูมออกเพื่ออ่าน content ตัวเล็กกะปิ๋วนึง ไหนจะโหลดช้าอีก (บางคนเน็ตมือถือมีจำกัดด้วย) ลูกค้าบางคนเบื่อแล้วเลือกที่จะหนีจากเว็บไซต์ของคุณไปดื้อด้วยความเห็นง่ายๆ ว่า “ไม่อยากรอโหลด” หรือ “อ่านยาก ปวดตา” หรือจะเหตุผลอะไรจิปาถะมากมายก่ายกอง แล้วทำไมล่ะครับ..
ทำเว็บไซต์ตัวเองให้เป็น responsive website ไปด้วยมันก็ไม่ได้เสียหายอะไรสักหน่อย
หากบทความที่แล้วเป็นบทความเรื่องทฤษฏี ผมขอเขียนบทความนี้เป็นในแง่เชิงปฏิบัติขึ้นสักเล็กน้อย เพื่อให้เห็นภาพว่า responsive website มันดียังไง เขียนยังไง ใช้อะไรเขียนได้บ้าง ซึ่งบางทีก็อาจจะขาดตกบกพร่องอะไรไปสักหน่อย หรือบางช่วงอาจจะเขียน code เป็นเชิง technical มากเกินไป ก็ต้องขอโทษด้วย
ความแตกต่าง Fixed-width website กับ Responsive website
ภาพเคลื่อนไหวรูปแรกนี้แสดงให้เห็นถึง fixed-width website หรือเว็บไซต์ที่กำหนดขนาดของ content ตายตัว ข้อดีคือเขียนได้ง่าย รวดเร็ว เวลาเปิดบน web browser ผ่านคอมพิวเตอร์ก็แสดงผลได้ไม่มีปัญหาอะไร แต่เมื่อไปเปิดกับขนาดหน้าจอ หรือ web browser ที่มีความกว้างน้อยกว่าขนาดที่เขียนไว้ จะทำให้ content ไม่ยืดหยุ่นตามขนาดหน้าจอ
หรือเวลาเปิดด้วยอุปกรณ์อื่นๆ อย่างมือถือ หรือ แท็บเล็ตหน้าจอเล็กๆ ต่างต้องมากวาดนิ้วซูมเข้า-ออก เหมือนปัญหาที่กล่าวไว้ข้างต้น ซึ่งแตกต่างจาก responsive website ดังภาพด้านล่าง
ซึ่งเราสามารถควบคุมการแสดงผลของ element ต่างๆ บนหน้าเว็บไซต์ได้อย่างอิสระ ไม่ว่าจะเป็นขนาดจอเล็ก หรือ ใหญ่แค่ไหน ผ่าน media queries ที่เขียนขึ้นด้วย CSS ดังที่บอกในบทความที่แล้วว่า การเขียน responsive website นั้น ผู้ที่เขียน CSS ได้เป็นอย่างดี หรือ ชำนาญ อาจจะได้เปรียบกว่าผู้ที่กำลังเรียนรู้พื้นฐานใหม่ในช่วงแรกๆ ด้วยเหตุผลนี้เอง responsive website จึงทำให้การแสดงผลผ่านอุปกรณ์หน้าจอขนาดเล็กอย่าง มือถือ หรือ แท็บเล็ตได้อย่างมีประสิทธิภาพ ชัดเจน และ สะดวกกับผู้ใช้งานเว็บไซต์ เพราะไม่ว่าจะย่อ เล็ก หรือ ขยายใหญ่เท่าไหร่ หากเราเขียนให้ครอบคลุมแต่ละขนาดไว้แล้ว ก็ไม่ต้องห่วงเรื่องการแสดงผลของ content ในเว็บ
การเขียน Media queries, เกณฑ์ mobile first
บทความที่แล้วเราพูดถึงเรื่องการขึ้น layout ไปพอสมควร ข้อดีของการขึ้นเว็บไซต์แบบ mobile first นั้นก็เพราะว่าเราสามารถ focus บาง element ให้แสดงผลในขนาดพื้นที่หน้าจอได้อย่างถูกต้อง หน้าจอขนาดเล็กย่อมซับซ้อน และ ยากกว่าในการยัด element บางตัวลงไป เหตุนี้เองผู้คนส่วนมากจึงเลือกขึ้นเว็บไซต์แบบ mobile first
หลายๆ คนที่ทำงานด้านเว็บไซต์, mobile app เป็นประจำอยู่แล้วอาจจะคุ้นหูกับเลขขนาดหน้าจอของอุปกรณ์ต่างๆ เช่น 320×480, 320×568 ซึ่งเป็นขนาดหน้าจอของ Iphone 3,4 และ 5 768×1024, 1024×768 ต่างเป็นของ iPad ทั้งแนวตั้ง และ แนวนอน เลยหยิบขนาดความกว้างของหน้าจออุปกรณ์ที่เป็นที่นิยมเหล่านั้นมาตั้งเป็น break point ซึ่งความเป็นจริงแล้ว.. ไม่ควร
การยึดขนาดของอุปกรณ์ในการสร้าง break point นั้นอาจจะสะดวก ใช้ได้ชั่วคราว แต่เราจะรู้ได้ยังไงว่าในอนาคต ขนาดหน้าจอเหล่านั้นจะถูกปรับเปลี่ยนให้มากขึ้น-กว้างขึ้นเป็นเท่าไหร่ ดูอย่างเช่น iPhone 6, iPhone6 Plus ที่เพิ่งออกมาได้ไม่นาน ต่างมีขนาดหน้าจอที่กว้างขึ้นใหญ่ขึ้น ความละเอียดต่างถูกเปลี่ยนแปลงไป ทำให้ break point ที่เรายึดกำหนดตายตัวแต่แรกนั้นเปลี่ยนไปด้วยเช่นกัน
ยกตัวอย่าง..
ผมกำหนดจุด break point ไว้ที่ 480px เพื่อจะใช้สำหรับ iphone 4 แนวนอนเป็นต้นไป เวลาผ่านไป 1-2 ปี Apple พัฒนา iPhone ขึ้นมาใหม่ที่มีขนาดหน้าจอกว้าง และ ละเอียดกว่า 480px สำหรับแนวนอน เราก็ต้องมานั่งแก้เว็บไซต์ให้แสดงผลให้ถูกต้องกันอีกรอบ และถ้าสมมุติว่าในอนาคตลูกค้าส่วนใหญ่ที่ใช้งานเว็บไซต์ไม่ได้ใช้ iPhone แต่อาจจะเปลี่ยนไปใช้อุปกรณ์ที่ดีกว่า ใหม่กว่า ขนาดหน้าจอการแสดงผลมากกว่า งี้เราก็ต้องเปลี่ยนไปเรื่อยๆ ซึ่งเสียเวลา และ ไม่ควรจะเกิดขึ้น
วิธีที่ดีที่สุดคือ การเริ่มจากขนาดหน้าจอที่เราคิดว่าจะเริ่ม focus ที่เล็กที่สุด (เช่น 320px) แล้วยืด browser มาเรื่อยๆ เพื่อหาจุดที่เว็บไซต์ของเราแสดงผลไม่ถูกต้อง หรือเริ่มไม่เหมาะสม ก็ใช้จุดดังกล่าวเป็น break point ใหม่ อย่างนี้ไปเรื่อยๆ (เช่น 320px 556px 728px..) จะเห็นว่าเราไม่ได้สนใจขนาดหน้าจอของอุปกรณ์ที่มีอยู่ในตลาดเลย แต่จะแสดงผลได้ดีกับทุกขนาดหน้าจอ นั่นก็แปลว่า
ทุกเว็บไซต์ไม่จำเป็นต้องมีขนาด break point แต่ละจุดที่เท่ากัน, เหมือนกัน ทั้งนี้เองขึ้นอยู่กับ layout, element ต่างๆ ของแต่ละเว็บไซต์ อีกทั้งความพึงพอใจของผู้พัฒนาด้วย
หมายเหตุ:
- iPhone 6: 375 × 667 px
- iPhone 6 Plus: 414 × 738 px
เรียนรู้จากเว็บไซต์อื่นๆ
หากคุณยังไม่มีไอเดียสำหรับเว็บไซต์ของตัวเองเลย หรือ ยังคิดไม่ออกเลยด้วยซ้ำว่าฉันจะทำยังไงให้เว็บไซต์ของฉันเป็น responsive ได้ จะเอาส่วนไหนไว้ตรงไหน จัด layout พื้นฐานอย่างคนอื่นเขาทำกันยังไงก็ไม่รู้ ใจเย็นๆครับ มีหลายเว็บไซต์ที่รวบรวมแบบ responsive website มาให้ดูเป็นตัวอย่าง ซึ่งบางทีเราอาจจะเริ่มจากการดูเว็บไซต์ของคนอื่นไปเรื่อยๆ ก่อนก็ได้ อย่างเว็บไซต์ mediaqueri.es ที่รวมเอารูปภาพเว็บไซต์ของแต่ละเว็บที่เขียนขึ้นเป็นแบบ responsive layout มาให้ดูหลายต่อหลายแบบ
หรือจะลองโหลด template ฟรีๆ มาลองนั่งไล่ code ดูก็ถือเป็นการเรียนรู้ที่ดีเหมือนกัน อย่างเว็บไซต์ http://w3layouts.com/
เห็นมั้ยครับ responsive website ถือเป็นสิ่งที่ได้รับความนิยมมากในปัจจุบัน แล้วจะกังวลอะไรที่จะเปลี่ยนเว็บไซต์ที่คุณมีอยู่นั้นไปใช้ตามแบบที่เว็บไซต์ส่วนมากเขาทำกัน
Box model สิ่งที่ควรรู้เป็นอย่างสุดท้ายก่อนลงมือทำ
Box model นี่ถือเป็นเรื่องดึกดำบรรพ์เก่าแก่ของนักเขียน CSS เลยก็ว่าได้ หลายต่อหลายคนมักเข้าใจผิดใช้สลับไปสลับมาระหว่าง margin กับ padding บางครั้งก็ไม่รู้ว่าจะใช้อะไรดี ซึ่งการเขียน responsive นี้ หากเราเข้าใจ box model แล้วเรียกใช้งานได้อย่างถูกต้องแล้ว จะช่วยเรื่องของการแสดงผลได้ค่อนข้างเยอะเลยทีเดียว
คิดแบบง่ายๆ เลยนะครับ เรานั่งเล่นคอมอยู่ในบ้าน, มีต้นกระเพราอยู่ที่นอกบ้าน ระยะห่างระหว่างเรากับผนังบ้านคือ padding ส่วนระยะของ ต้นกระเพรากับตัวบ้านคือ margin ถ้าเราอยากจะเพิ่มระยะห่างจากโต๊ะคอมกับผนังบ้าน ให้ใช้ padding(เหมือนระยะห่างภายในบ้าน) อยากจะให้ต้นกระเพราอยู่ห่างจากตัวบ้านขึ้นอีกหน่อย ให้เพิ่ม margin(ระยะห่างจากตัวบ้าน) โดยบ้านคือ border มีข้อควรระวังเล็กๆ สำหรับเรื่องของ padding เมื่อใดก็ตามที่เราเพิ่ม padding (โต๊ะคอมกับผนังบ้าน) นั้นแปลว่า บ้านจะต้องมีขนาดใหญ่ขึ้น-เนื้อที่บ้านมากขึ้น โดยโต๊ะคอมของเรายังอยู่ที่เดิม เหมือนกับประมาณว่าขยายจากตัวศูนย์กลางเป็นหลัก(ซึ่ง content หรือ โต๊ะคอมของเราคือศูนย์กลาง)
ในทางกลับกันหากต้องการให้เนื้อที่บ้านมีเท่าเดิม เราก็ต้องทำให้โต๊ะคอมมีขนาดเล็กลงเพื่อแลกกับระยะห่างจากผนังบ้านที่มากขึ้น แบบนี้จะใช้ padding เหมือนกัน แต่จะเพิ่มคำสั่งไปอีกบรรทัดนึงคือ
box-sizing: border-box
ที่ต้องเขียนถึงเรื่อง box model นั้นก็เพราะว่าส่วนใหญ่แล้ว responsive website มักเริ่มจากแนวคิด box layout หรือ ทุกสิ่งทุกอย่างเป็นเหมือนกล่องสี่เหลี่ยม ซึ่งดูตัวอย่างได้จาก web framework อย่าง Bootstrap, foundation หรือแม้กระทั่ง wireframe ในบทความที่แล้ว นี่เองจึงเป็นเหตุผลว่าทำไมเราต้องใส่ใจเรื่อง box model ครับ
Get Started
คุณอาจจะเบื่อกับสิ่งที่ผมพยายามร่ายร่ำมายืดยาวกับเรื่องของทฤษฎี ขั้นตอนต่อไปนี้จะเป็นเรื่องของการปฏิบัติแล้ว ซึ่งผมจะใช้ macOSX, Sublime text และ command line ผ่าน terminal อีกนิดหน่อยเพื่อติดตั้ง package บางตัวที่ย่นระยะเวลาช่วยเขียน แต่ก่อนอื่นเราต้องมีแบบเว็บไซต์ที่อยากจะลอง re-design ดูกันก่อน และ เว็บไซต์นั้นต้องยังไม่เป็น responsive ด้วย
ไม่รู้จะเลือกเว็บไหนดี ส่วนใหญ่ที่ผมเข้าบ่อยก็ดันเป็น responsive ไปซะเกือบหมด ผมเลือกนี่ละกัน apple ดูเรียบร้อย และ ง่ายดี เหมาะกับนำมาทำเป็นตัวอย่าง
แล้วก็ลองวาด wireframe คร่าวๆ ก่อนครับ ไม่ต้องละเอียดมาก เอาให้เข้าใจแต่ละ element ก่อนว่าอะไรคืออะไร อะไรอยู่ตรงไหน พอได้แล้วทั้ง 3 แบบ (mobile, tablet, desktop) แล้วก็ไปเริ่มเตรียมไฟล์ที่จะใช้งานเพื่อเขียนจริงๆ ได้เลย
ผมได้ทำ screencast ช่วงเวลาที่เขียนตั้งแต่เริ่มแรกไว้(เตรียมไฟล์ สร้าง folder) ไปจนถึงการเก็บรายละเอียดที่วิดีโอตัวสุดท้าย โดยจะแบ่งแต่ละตอนออกเป็นช่วงสั้นๆ ไม่เกิน 10 นาที มีทั้งหมด 9 ตอน รวมๆ แล้วประมาณ 1 ชั่วโมงเศษ เนื้อหาอาจจะค่อนข้างเร็วไปบ้างเล็กน้อย และ อาจจะใช้เครื่องมือที่บางท่านยังไม่รู้จัก แต่หลักๆ แล้วให้ focus ที่ HTML กับ CSS เป็นหลักก็อาจจะเข้าใจได้ไม่ยาก
ไฟล์ที่ใช้ทำนั้น 1 หน้า เป็น responsive layout แบบง่ายๆ ไม่มีอะไรซับซ้อน สามารถกดชมได้ด้านล่างนี้ครับ (หากเห็นไม่ชัด สามารถขยายความละเอียดที่ 1080p ได้)
Environment
[youtube]https://www.youtube.com/watch?v=TjCSz0ns_zM[/youtube]
ตอนแรกจะเป็นการสร้าง environment เสียเป็นส่วนใหญ่ ได้แก่การสร้างแฟ้ม project, การเรียกใช้ bower เข้ามาเพื่อติดตั้ง package อื่นๆ อย่างเช่น jQuery, FontAwesome ได้ง่าย และ สุดท้ายก็เป็น bourbon(SASS mixins) ถ้าผู้อ่านท่านใดต้องการใช้ bourbon หรือ SASS เช่นเดียวกันกับในไฟล์วิดีโอ ท่านต้องติดตั้ง Ruby กับ SASS ก่อนนะครับ
แต่ถ้าไม่ใช้ SASS กับ bower ก็เขียน CSS แบบธรรมดาเดิมๆ ได้เลยครับ ส่วน package อื่นๆ ก็ไล่เปิดเว็บไซต์ของผู้พัฒนาดาวน์โหลดมาโยนเข้าไปใน project ได้เหมือนกัน ผู้อ่านไม่จำเป็นต้องใช้เครื่องมือเหมือนผมก็ได้ครับ ใช้ Text editor ที่คุณถนัด สิ่งที่ผมติดตั้งก็เพื่อเขียนได้เร็วขึ้นเท่านั้นเองครับ
Basic HTML
[youtube]https://www.youtube.com/watch?v=5xcNhvTB4Qo[/youtube]
วิดีโอตัวที่สองนี้จะเกี่ยวกับการขึ้น HTML ล้วนๆ ตามที่เราได้วาง wireframe ไปตั้งแต่ตอนแรก ซึ่งยังไม่ต้องสนใจรายละเอียดอื่นๆ เช่นความสวยงาม ขนาตัวหนังสือ หรือ layout อะไรมากนัก เขียน HTML พื้นฐานให้ครบกับที่เราตั้งใจจะให้มีบนเว็บไซต์ไว้ก่อนเลย
Navbar
[youtube]https://www.youtube.com/watch?v=V6ksJr5b-FQ[/youtube]
เราจะเริ่มเขียน CSS/SASS สำหรับส่วน Header หรือ Navbar กันก่อน ซึ่งผมจะใช้ SASS import ฟังก์ชั่นในการเรียกไฟล์แต่ละส่วนเข้ามา หรือใครที่ถนัดเขียนทุกอย่างในไฟล์เดียวแบบ CSS ก็ทำได้เหมือนกันครับ เพียงแต่ผมแยกเอาไว้เพราะมันอ่านง่ายดี เวลาผมเห็น code เยอะๆ แล้วตาลาย เลยแยกไว้เรียกเอาดีกว่า
เราจะเริ่มจากเกณฑ์ mobile first ครับ ย่อขนาด browser มาที่ขนาดหน้าจอที่เล็กที่สุด ที่คุณต้องการจะเริ่มเขียน(เช่น ของผมเริ่มที่ 320px)
Content
[youtube]https://www.youtube.com/watch?v=PHd-fGJDNiU[/youtube]
หลังจากเขียน CSS/SASS ให้กับส่วนหัวไปแล้ว เราก็ลงมาทำสำหรับส่วนของเนื้อหาหลักกันบ้าง โดยผมแบ่งไฟล์ออกเป็นอีกส่วนแล้ว import เข้ามาเหมือนเดิม เผื่อเวลา maintain น่าจะทำได้ง่ายด้วย แต่ผู้อ่านท่านใดที่ถนัดเขียนไฟล์เดียวเลยก็สามารถทำได้ตามสะดวกไปก่อนครับ
Footer
[youtube]https://www.youtube.com/watch?v=zn-LshRvNLA[/youtube]
ส่วนสุดท้ายคือส่วนที่อยู่ด้านล่างสุดของเว็บไซต์เรา ในส่วนนี้ก็ไม่ค่อยมีอะไรมากนัก เพียงแค่จัดการ text ให้แสดงผลได้พอดีกับสัดส่วนของหน้าจอก็เป็นอันเรียบร้อย จากวิดีโอที่ผ่านมาจะเห็นว่าผมสร้างไฟล์ utilities ไว้เก็บ class อื่นๆ ที่อาจจะเรียกใช้บ่อย หรือเป็น class ช่วยเหลือในการจัดหน้าอย่าง clearfix และ hero
Break point จุดแรก
[youtube]https://www.youtube.com/watch?v=klh0NZ1qNP4[/youtube]
เราจะเริ่มเขียน media queries กันแล้วนะครับ โดยจุดเรียกที่ผมเลือกเป็น break point นั้นอยู่ที่ 500px โดยคิดว่าเนื้อหาส่วนของ navbar นั้นเริ่มใช้พื้นที่สิ้นเปลืองไปบ้างแล้ว อยากจะจัดให้เป็นแถวละ 2 คอลัมน์ ส่วนอื่นๆ นั้นยังดูโอเคอยู่ เลยไม่ได้เปลี่ยนแปลงอะไรมากนัก
768px
[youtube]https://www.youtube.com/watch?v=5Cm3HyiZsHY[/youtube]
Break point จุดที่สองอยู่ที่ขนาดความกว้างมากกว่า 768px หรือเทียบเท่าขึ้นมา โดยจุดนี้ผมเห็นว่ายังหากินได้อีกสักพักใหญ่ๆ เปลี่ยนจาก navbar ที่ต้องกด hambuger(ไอคอนเมนู 3แถว) มาเป็นแสดงแบบปรกติ
992px
[youtube]https://www.youtube.com/watch?v=QySI5Lo8x1M[/youtube]
ดูเหมือนที่ความกว้างหน้าจอขนาดที่ 992px จะทำให้เราสามารถเปลี่ยน layout ให้ใช้พื้นที่ได้อย่างคุ้มค่ามากขึ้น ผมพยายามเปลี่ยนเอา text ไปไว้ด้านซ้าย และ เอารูปมือถือมาไว้ด้านขวา ซึ่งก็ออกมาไม่ชิดจนเกินไปนัก นอกนั้นยังเปลี่ยนส่วนของ footer ให้แสดงผลเหมือนกับเว็บไซต์หลักที่เราอ้างอิงมาด้วยเช่นกัน
เก็บงาน
[youtube]https://www.youtube.com/watch?v=mcigdpKCPUM[/youtube]
จริงๆ แล้วหากคุณพอใจใน layout พื้นฐานทั้งหมดที่แสดงผลก็โอเคไม่จำเป็นต้องเพิ่ม break point ขึ้นมาอีกจุดก็ได้ แต่ส่วนตัวผมยังเห็นว่ามีลูกค้าที่ใช้งานเว็บไซต์ส่วนใหญ่ ไม่ได้ให้ความสำคัญอะไรกับการเปิด/ย่อ browser เหมือนที่นักพัฒนาเว็บไซต์ทำกัน เลยสร้าง break point ขึ้นมาอีกจุดนึงเพื่อเก็บรายละเอียดสำหรับคนที่ใช้งานเว็บไซต์โดยเฉพาะ อาจจะบีบตัวหนังสือให้เล็กลง ปรับส่วนของ navbar ให้ดูกระชับมากขึ้น
แล้วก็ใช้ Lato font จาก Google web font เข้ามาปรับตัวหนังสือให้ดูละม้ายคล้ายคลึงกับเว็บไซต์หลักขึ้นมาอีกหน่อย ซึ่งในกรณีนี้เองคุณอาจจะเพิ่ม package FontAwesome เข้ามาช่วยเรื่องของการแสดงผลด้วยบ้างเล็กน้อย เพียงเท่านี้เราก็จะได้เว็บไซต์ที่เป็นแบบ Responsive layout ไว้ใช้งานกันแล้วครับ แรกๆ อาจจะต้องฝึกจาก layout ง่ายๆ ก่อน หรือจะลอง re-design เว็บไซต์ที่เราอาจจะเข้าบ่อยๆ ลองผิดลองถูกเขียน CSS ไปเรื่อยๆ ในตอนหลังๆ ก็จะชำนาญ และ จดจำไวยกรณ์ได้เอง สุดท้ายก็ใช้เวลาเขียน responsive ไม่ถึงชั่วโมงก็อาจจะเป็นได้
สำหรับคนที่อยากจะดูเป็น playlist สามารถกดดูได้ด้านล่างนี้ครับ
มีให้โหลดตัวอย่างจากเว็บไหมครับ
ขอโทษที่ตอบกลับช้าครับ ลิงค์โหลดไฟล์ครับ:
ขอบคุณสำหรับความรู้น่ะครับ กำลังศึกษาเรื่องนี้อยู่พอดี