Responsive web design – การดีไซน์เว็บ Responsive

ในหน้าที่ที่ผมเป็นคนดูแลโปรเจค เมื่อต้องเริ่มทำโปรเจค Web responsive ปัญหาแรกที่ต้องเจอ คือ ดีไซน์เนอร์เดินมาถามว่า “ผมต้อง Design Artwork สำหรับ Web responsive ที่ขนาดเท่าไหร่ครับพี่?”   คำถามง่ายๆแต่ทำเอาผมสตั้นไป 3 วิ… เออว่ะ ดีไซน์ที่เท่าไหร่ดีวะ   สาเหตุที่ต้องมานั่งขบคิดกับคำถามง่ายๆนี้ เพราะด้วยขนาดหน้าจอที่หลากหลายและการแสดงผลในหน้าจอ Ratina(ต้องใช้ภาพขนาด 2 เท่า) และก็ไม่มีหลักการอะไรตายตัว ขึ้นอยู่กับประสบการณ์และความพอใจแต่ละคน เพื่อไม่ให้เกิดความยุ่งยากในภายหลัง ผมจึงต้องจับตัวผู้เล่น(Designer, Programer) มานั่งคุยกัน     ผู้เล่นที่สำคัญคือ 3 คนนี้ที่ต้องมาสรุปทำความเข้าใจให้ตรงกัน (บางครั้งไม่จำเป็นต้องมี Project Manager ถ้า 2 คนคุยกันรู้เรื่อง)   หัวข้อในสิ่งที่เราต้องสรุปร่วมกันมีดังนี้   Desktop first หรือ Mobile first ดี?   แม้วว่าปัจจุบันเปอร์เซนต์ของคนใช้งานผ่าน Mobile…

วิธีสร้างเว็บ ด้วยวิธีลัด ทำ Responsive Bootstrap อย่างรวดเร็ว

บทความนี้จะมาสอน วิธีสร้างเว็บ ด้วยวิธีลัดทำหน้าเว็บได้อย่างรวดเร็ว… เนื่องจากครั้งหนึ่งวันที่ผมเคยเป็น Front-end Developer วันๆนึ่งหัวมุดพิมพ์โค๊ด HTML CSS มากกว่าพันบรรทัด เริ่มจากวางโครงสร้างโค๊ดให้เป็นไปตามที่ดีไซเนอร์ทำมา… แน่นอนครับชีวิตผมวนเวียนอย่างอย่างนี้ทุกวันซ้ำไปซ้ำมา ใช่ครับ แรกๆ มันสนุกมาก กับการได้บรรดาลดีไซเนอร์แห้งๆให้ออกมาเป็นเว็บไซต์ที่สวยงาม… แต่นานๆเข้าชีวิตก็เริ่มเหี่ยวเฉา การเขียนโค๊ดบ่อยๆ ก็เริ่ม เบื่อ เหนื่อย เมื่อย ล้า ชีวิตช่างเหมือนสาวโรงงานสิ้นดี ไม่สิ้นชีวิตผมต้องดิ้นรนต่อไป ผมเริ่มมองหา Tool อะไรซักอย่างที่จะช่วยประหยัดเวลาในการสร้างเลย์เอาท์แต่ละครั้ง ผมมีความเชื่อว่าต้องมีคนขี้เกียจเหมือนผมอีกหลายคน แล้วต้องมีคนหัวใสทำเครื่องมือออกมาขายคนขี้เกียจอย่างผมนี่แหล่ะ 555 แล้ววันหนึ่งขณะนั่งสไลด์ดูหน้า Facebook เพลินๆ ก็เจอโพสเครื่องมือการสร้างเลย์เอาท์ Responsive bootstrap ที่ชื่อ Pingendo พอเข้าไปดูรายละเอียดปั๊บ… มันใช่เลย! เครื่องมือจับลากวางดูง่ายๆ, มี component ของ Bootstrap มาให้แบบครบ,  สามารถทำเป็น Responsive ได้เลย, ลองดูโค๊ดที่ Generate ออกมาก็สวยงามเลยทีเดียว และที่ถูกใจสุดคือ มันฟรี!!!  …

CSS Box sizing ใส่ border และ padding ด้านใน

box-sizing:border-box คือ ทำให้การกำหนด border หรือ padding แล้วไม่ไปเปลี่ยนความกว้างและความสูงของอีลีเม้นท์ เช่น ปกติเมื่อเรากำหนดความกว้างให้อีลีเม้น 100px และเราก็ใส่ padding:0 5px; (เพิ่ม padding ซ้ายขวา ข้างละ 5px) ความกว้างของอีลีเม้น จะเป็น 110px ประโยชน์ของมันก็เห็นชัดก็ตอนทำ responsive นี่แหล่ะครับ เช่น เรามี 2 อีลีเม้นซึ่งต้องการจะทำเป็น 2 คอลัมน์ เราก็ใส่ width เป็น 50 % แล้ว float:left ก็จะได้ 2 คอลัมน์ตามภาพ แต่คราวนี้ก็ถึงคราวที่เราจำเป็นต้องใส่ข้อมูลโดยให้มีระยะห่างจากขอบแต่ละด้าน 10px โดยการใส่ padding:10px ผลปรากฎมีระยะระหว่างคอนเท้นสวยงาม แต่มันปลิ้นลงมาสิครับ กระเพราะความกว้างมันเท่ากับ 50%+20px (ซ้ายขวาข้างละ 10px)   แล้วพระเอกอย่าง box-sizing ก็เข้ามาแก้ปัญหาโดยมันจะ padding…

สอน HTML5 Responsive เบื้องต้นด้วย Bootstrap3 ตอน Grid system

Bootstrap3 ที่ออกมาใหม่นี่เป็นเวอชั่นใหม่ที่เพิ่มความยืดหยุ่นให้กับการทำ responsive device ต่างๆมากขึ้น แต่ก็จะมีความซับซ้อนในเรื่องการใช้มากขึ้น แต่ถ้าเราทำความเข้าใจแล้วก็จะมีประโยชน์สำหรับหรับเรามากเช่นกัน ที่ต้องพูดเรื่อง Grid system ก่อนเป็นอันดับแรก เพราะมันจะเกี่ยวข้องกับ Layout Responsive ของเราที่ต้องใช้มากที่สุด ในที่นี้เราจะเรียกมันว่าคอลัมน์ ซึ่งใน Bootstrap2 ใช้คลาสชื่อ span1, span2,…, span12 แต่ใน Bootstrap3 จะ col-lg-1, col-lg-2, col-lg-3 หรือ col-md1, col-md2, col-md3 หรือ col-sm1, col-sm2, col-sm3…  ฮ่าๆ ไม่ทันไรเริ่มเห็นความซับซ้อนแล้วใช่ไหมครับ เรามาทำความเข้าใจกันทีละอย่างดีกว่า เริ่มจาก Bootstrap3 จะกำหนดจุดแปลงร่าง (Break point) ออกเป็น 4 ขนาดความกว้าง โดยที่แต่ละขนาดถือว่ามีคอลัมน์อยู่ภายใน 12 คอลัมน์ Extra small devices Phones (<768px) ใช้ prefix .col-xs- Small devicesTablets (≥768px) ใช้ prefix .col-sm- Medium devicesDesktops…

Emmet html plugin เขียนโครงสร้าง HTML CSS อย่างรวดเร็ว

ใช้ tool นี้แล้วทำให้การทำงาน Front end  รวดเร็วขึ้นเยอะเลย Expand Abbreviation เขียนโครงสร้าง HTML อย่างรวดเร็ว ตัวอย่าง เช่น ใน HTML เราต้องการ div คลาส row-fluid และมี div ลูกอีก 2 ตัวคลาส span6 และแต่ละdiv มี h2 และ p เราจะเขียนคำสั่งดังนี้ div.row-fluid>div.span6*2>h2+p เสร็จแล้วไปที่ทำสั่ง command > emmett > Expand Abbreviation (หรือตั้ง keyboard shotcut)  มันจะรันแล้วได้โครงสร้างตามที่เราต้องการ <div class=”row-fluid”> <div class=”span6″> <h2></h2> <p></p> </div> <div class=”span6″> <h2></h2> <p></p> </div> </div>…

การทำ Responsive HTML5 jQuery Banner แทน Flash banner

ขอเสนอ เทคนิคและวิธีการทำ Responsive jQuery Banner… คงใกล้ถึงเวลาหมดยุคแบนเนอร์ ที่ทำจาก Flash animation เข้าไปทุกที เตรียมตัวที่เปลี่ยนจาก Flash มาเป็น HTML5/CSS3 หรือ jQuery กันได้แล้ว และต้องทำให้แบนเนอร์ที่ animate จาก jQuery ให้สารมารถใช้กับเว็บ Responsive ของเราได้ด้วย ตัวอย่าง Responsive Banner (ทดสอบโดยการลองยืดหดหน้าจอ) สร้างแบนเนอร์แต่ละขนาด สร้างแบนเนอร์อนิเมตแยกเป็นไฟล์ HTML แต่ละไซด์ขนาดแบนเนอร์ เช่น banner-for-desktop.html, banner-for-mobile.html,… จะกี่ขนาดก็ตามแต่ต้องการ ตัวอย่าง banner1.html, banner2.html (ที่เห็นมันนิ่งๆเพราะมันไม่ได้เรียกไฟล์ jQuery ตอนที่ท่านๆทำก็ดึงไฟล์ jQuery มาก่อนพอเสร็จแล้วค่อยเอาออกครับ) ตัวอย่างโค๊ด jQuery animate $(‘#ani1′).animate({                        top: 300 }, 500, function() { // Animation complete. $(‘#ani1′).animate({                        top:…