รู้จักกับ Breakpoints ใน Responsive Web Design

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

Breakpoints คืออะไร?

Breakpoints คือ การที่ Responsive Web เปลี่ยนรูปแบบการแสดงผล เมื่อ viewport มีความกว้างถึงจุดๆ หนึ่ง ยกตัวอย่างเช่น เมื่อ viewport มีความกว้าง 320px(iPhone) ให้แสดงผล 1 คอลัมน์นะ ถ้า viewport มีความกว้างเพิ่มเป็น 768px(Tablet) ให้แสดงผล 2 คอลัมน์นะ และถ้าหาก viewport มีความกว้างถึง 1024px(Desktop) ให้แสดงโฆษณานะ เป็นต้น จากตัวอย่างนี้ จะได้ว่า เว็บนี้มี 3 Breakpoints คือ 320px 768px และ 1024px

เริ่มลงมือกำหนด Breakpoints!

แน่นอนว่าเราอยากให้เว็บไซต์ของเรา ดูดีในอุปกรณ์หลักๆ ไม่ว่าจะเป็น Mobile Phone, Tablet, Desktop, Widescreen Desktop เป็นต้น ซึ่งเราสามารถใช้ Media Queries ในการจัดเตรียม stylesheets ให้กับอุปกรณ์เหล่านี้ โดยแยกตาม Breakpoints ต่างๆ ได้ดังนี้ครับ

โดยเราจะจัดเตรียม stylesheets สำหรับอุปกรณ์ที่มีหน้าจอที่เล็กที่สุดก่อน ซึ่งก็คือ Mobile Devices ต่างๆ ที่มักจะมีความกว้างอยู่ที่ 320px แล้วเราค่อยๆ เตรียม stylesheets สำหรับอุปกรณ์ที่มีขนาดใหญ่ขึ้น ไล่ไปเรื่อยๆ การเขียนแบบนี้ จะช่วยให้โค้ดของเราสั้น และไม่ซ้ำซ้อน ซึ่งจะทำให้ง่ายต่อการแก้ไขในอนาคตอีกด้วยครับ

แน่ใจแล้วหรือ ว่านี่คือ Responsive Web Design!

จริงอยู่ว่าเราอยากทำเว็บไซต์ให้ดูดีใน Devices ยอดนิยม เราก็เลยเลือกที่จะเทสให้เว็บเราดูดีใน iPhone, iPad, Galaxy Tab, Notebook, Desktop ซึ่งเราเลือกที่จะใช้ Media Queries โดยกำหนด Breakpoints ตามขนาดหน้าจอของ Devices เหล่านี้ ด้วยความหวังที่ว่า เว็บจะออกมาดูดีที่สุดหากดูด้วย Devices เหล่านั้น แต่นี่ไม่ใช่หลักการของ Responsive Web Design

สมมติเรามีภาชนะที่ต่างกันอยู่ 10 ชนิด ไม่ว่าเราเทน้ำลงไปในภาชนะใด น้ำล้วนมีรูปร่างตามภาชนะที่มันอยู่เสมอ โดยที่น้ำนั้น ไม่ได้ถูกกำหนดมาล่วงหน้าเลยว่า มันจะมีรูปร่างแบบ A ตามภาชนะนี้นะ แบบ B ตามภาชนะนี้นะ

การกำหนด Breakpoints โดยยึดตาม Devices คือหายนะ!

หลายๆ คน เลือกที่จะกำหนด Breakpoints โดยยึดตาม Devices ในปัจจุบัน ไม่ว่าจะเป็น 320, 480, 600, 768, 1024, 1280 เป็นต้น การกำหนดแบบนี้ จะทำให้เว็บคุณดูดี ใน Devices เหล่านั้น แต่จะเกิดอะไรขึ้น หาก Devices ที่ได้รับความนิยมในปัจจุบัน เลิกใช้กันในวันข้างหน้า หาก Devices ที่ออกมาใหม่ ไม่ได้ใช้ความกว้างที่ในปัจจุบันนิยมใช้กัน อย่าลืมว่า Responsive Web Design คือการมองไปในอนาคตข้างหน้า ไม่ใช่มองแค่ในปัจจุบัน!

หากยังมองไม่เห็นภาพว่า ถ้ามี Devices ใหม่ๆ ที่มีความกว้างไม่ตรงกับ Breakpoints ที่เราดักไว้ จะเกิดอะไรขึ้น ผมจะยกตัวอย่างแบบนี้ครับ สมมติ เว็บเราออกแบบโดยใช้ Fluid Layouts และกำหนด Breakpoints ไว้ 3 จุด ได้แก่ 320px, 768px และ 1024px ตามลำดับ ที่จุด 1024px เรากำหนดให้เปลี่ยน Sidebar ที่ซ่อนเอาไว้มาแสดง กลายเป็นเว็บ 2 คอลัมน์ โดยที่จุด 768px ยังคงแสดงผลแค่ 1 คอลัมน์อยู่ เนื่องจากไม่อยากให้ใน Tablet มี Sidebar นั่นเอง

สมมติมี Tablet เกิดใหม่ ซึ่งมีขนาดหน้าจอ 780px ซึ่งเราไม่ได้กำหนดให้เป็น Brakpoints เอาไว้ มันจะแสดงผลอย่างไร? คำตอบคือมันจะไปเข้าเคส Breakpoint ที่ 1024px ครับ ซึ่งเป็นเคสของ 2 คอลัมน์ หมายความว่า Tablet อันนี้ จะแสดงผลต่างจาก Tablet อื่นๆ ทั้งๆ ที่มีขนาดต่างกันเพียงแค่ 14px

จำไว้เสมอครับว่าเรารู้ได้แค่อดีต กับปัจจุบัน แต่อนาคตเราไม่รู้ เรากำหนด Breakpoints ตาม Devices ในปัจจุบันได้ แต่ไม่มีทางที่มันจะครอบคลุมถึง Devices ในอนาคตอย่างแน่นอน

เลิกสน Devices หันมาใส่ใจ Content

หลายคนคงสงสัย ไม่ให้กำหนด Breakpoints ตาม Devices แล้วจะกำหนดตามอะไร? คำตอบคือ Content ไงครับ บางคนอาจลืมไปแล้วว่า Responsive Web Design มีเพื่อที่จะให้ User ได้รับ Content ที่เหมาะสมที่สุดไป โดยไม่คำนึงว่า User นั้นจะดูด้วย Devices อะไรก็ตาม Responsive Web Design ไม่ได้หมายความว่า เมื่อ User ดูด้วย Devices ใดๆ แล้ว Content จะถูกปรับให้เหมาะสมกับ Devices นั้นๆ นะครับ

ปล่อยให้ Content เป็นตัวกำหนด Breakpoints

ให้เราลืมทุกอย่างเกี่ยวกับ Devices ออกจากหัว แล้วลองหันมาดู Content ของเราครับ Breakpoints จะมีกี่จุด และมีจุดไหนบ้าง ล้วนขึ้นอยู่กับ Content ของเราทั้งสิ้น โดยขั้นตอนในการหา Breakpoints ผมสรุปเป็นข้อๆ ให้ดังนี้ครับ

  • สร้าง header, footer และ navigation แบบง่ายๆ ขึ้นมา
  • สร้าง container แบบง่ายๆ ขึ้นมา แล้วลองใส่ content หลักของเราลงไป (ลองใส่ทั้ง Text และ Images)
  • กำหนด layout ให้เป็นแบบ Fluid Layouts (กำหนดความกว้างขององค์ประกอบต่างๆ ให้เป็นแบบ %)
  • กำหนด Images ใน container ให้เป็นแบบ Fluid Images(กำหนดความกว้างของรูป ให้แปรผันตาม container)
  • หากใช้ Firefox ให้เข้า Responsive Mode(Ctrl + Shift + M) หรือใช้ Tools อื่นๆ ที่สามารถดูความกว้างของ viewport(ส่วนแสดงผลของเว็บ) ได้
  • ลองปรับขนาดของ viewport มาที่ความกว้างประมาณ 300px(ความกว้างที่น้อยที่สุด ที่ยังพออ่าน content รู้เรื่อง)
  • ค่อยๆ เพิ่มขนาดของ viewport ขึ้นทีละนิดๆ แล้วคอยสังเกต content ของเรา ที่จะค่อยๆ ขยายตามขนาดของ viewport ที่เพิ่มขึ้น
  • เมื่อใดที่เราพบว่า content เริ่มไม่เหมาะสม(อ่านยาก, ภาพแตก หรือเรามองว่ามีหนทางที่จะปรับให้ดีกว่านี้ได้) นั่นคือเราได้พบ Breakpoint แล้ว
  • หลังจากที่เราได้พบ Breakpoint แรกแล้ว ให้เราออกแบบใหม่ ว่าที่ความกว้างเท่านี้ หน้าตามันควรจะเป็นอย่างไร แล้วเพิ่ม stylesheets ให้ด้วย media queries โดยเขียนเคสตาม Breakpoint ที่เราเจอนั่นเอง
  • หลังจากนั้น ให้เราค่อยๆ เพิ่มขนาดของ viewport ต่อไป แล้วคอยดู content ของเรา หากเจอ Breakpoint อีก ก็ให้เพิ่ม stylesheets สำหรับ Breakpoint นั้นอีก ให้เราทำแบบนี้ไปเรื่อยๆ จนกว่าจะถึงขนาดที่เราพอใจครับ

Workshop – ลงมือหา Breakpoints กันดีกว่า!

แค่พูดอาจไม่เห็นภาพ ลองมาดูตัวอย่างกันดีกว่าครับ สมมติผมกำลังจะสร้างเว็บไซต์หนึ่ง โดยตั้งใจจะใช้ Responsive Web Design ผมได้ร่าง Layout อย่างคร่าวๆ ลงบนกระดาษ พอได้ Layout ที่ต้องการแล้ว ผมก็เริ่มลงมือเขียนโค้ด HTML ซึ่งประกอบไปด้วย header, footer, navigation แล้วก็ container ครับ ภายใน container จะมี title, author, image แล้วก็ content ครับ

หลังจากที่เราได้โค้ด HTML มาแล้ว ทีนี้มาถึงตา CSS แล้วครับ ผมเขียน stylesheets จัดตำแหน่งของ HTML Elements ต่างๆ ให้อยู่ในที่ๆ ผมได้ร่างไว้ สุดท้าย ผมกำหนด layouts ให้เป็นแบบ Fluid Layouts และกำหนด images ให้เป็นแบบ Fluid Images ครับ

มาถึงตอนนี้ ให้เราลองพรีวิวเว็บของเราดูครับ โดยให้เราปรับความกว้างของ viewport มาเป็น 300px ที่ผมแนะนำให้เริ่มที่ 300px เพราะว่าถ้า viewport ต่ำกว่านี้ คงอ่านอะไรลำบากแล้วละครับ หลังจากนั้น ให้เราลองดูว่าเว็บของเรา หน้าตาเหมือนอย่างที่ออกแบบไว้หรือเปล่า ถ้ายัง ให้ปรับ stylesheets ให้เว็บแสดงผลตรงตามที่ได้ออกแบบไว้ครับ

300px

นี่เป็นตัวอย่างหน้าอ่านบทความที่ผมออกแบบไว้ครับ ที่ความกว้าง 300px ผมเลือกที่จะใช้โลโก้ขนาดเล็กเนื่องจากพื้นที่มีน้อย ส่วน navigation ผมเลือกวางในแนวนอนครับ ถ้าเมนูมีไม่มาก อาจใช้แบบ Button เรียงกันไปตามแนวนอน แต่ถ้าหากเมนูมีจำนวนมากหรือค่อนข้างซับซ้อน อาจเลือกใช้แบบ Select ครับ

มาถึงตอนนี้ เว็บเราจะแสดงผลได้อย่างสวยงาม ตามที่เราได้ออกแบบไว้ที่ความกว้างประมาณ 300px แล้ว ขึ้นตอนต่อไปคือการหา Breakpoints ครับ ให้เราค่อยๆ เพิ่มขนาดของ viewport ขึ้นทีละนิดๆ แล้วคอยสังเกต content ของเรา ที่จะค่อยๆ ขยายตามขนาดของ viewport ที่เพิ่มขึ้น

หากเราพบว่า content เริ่มไม่เหมาะสม ให้เราหยุดครับ แล้วดูว่า ณ ขณะนั้น viewport มีความกว้างเท่าไร ให้จดไว้เลยครับ เราได้ค้นพบ Breakpoint แรกแล้ว

500px

หลังจากที่ผมขยายขนาดของ viewport มาจนถึงประมาณ 500px ผมพบว่า ตรง header เริ่มมีพื้นที่ว่างเหลือ ซึ่งที่ว่างตรงนี้ เราสามารถใส่อะไรที่มีประโยชน์ลงไปได้ ไม่ว่าจะเป็น ลิงค์ไปที่หน้า facebook, twitter หรือไอคอน RSS Feed เป็นต้น นี่คือ Breakpoint แรก ที่ผมพบ

ในตอนแรก ผมเลือกใช้โลโก้แบบขนาดเล็ก เนื่องจากตอนนั้น พื้นที่มีน้อยมาก ที่ Breakpoint แรกนี้ ผมจึงเลือกปรับโลโก้ของผมให้มีสโลแกนอยู่ด้วย โดยการเพิ่ม stylesheets ด้วย media queries ดังนี้

นอกนั้น ผมคิดว่ายังโอเคอยู่ จึงไม่ได้ปรับอะไรเพิ่มอีก เมื่อทุกอย่างโอเคแล้ว ให้เราหา Breakpoint ต่อไป โดยค่อยๆ ขยายขนาดของ viewport อีกครั้ง

800px

ที่ขนาดประมาณ 800px ผมมองว่า Text Block เริ่มกว้างเกินไป จนทำให้อ่านค่อนข้างลำบาก รูปก็เริ่มใหญ่ไป จนทำให้เนื้อหาตกลงมาอยู่ด้านล่าง ผมได้พบ Breakpoint ที่ 2 แล้ว

ผมใช้ media queries โดยเพิ่ม stylesheets สำหรับปรับ navigation ให้แสดงในแนวตั้ง และอยู่ทางด้านซ้่ายมือ ซึ่งจะทำให้ใช้งานได้สะดวกขึ้น และยังช่วยให้ container ที่เดิมมีขนาดกว้างเกินไป จนทำให้อ่าน content ลำบาก กลับมามีขนาดพอเหมาะอีกด้วยครับ

1000px

ที่ขนาดประมาณ 1000px ผมเริ่มเห็นพื้นที่ว่าง ที่พอจะใส่โฆษณาได้แล้วละครับ ผมเจอ Breakpoint อีกแล้วครับ นี่เป็นจุดที่ 3

ผมปรับ container ให้แคบลง เพื่อที่จะเพิ่ม sidebar เข้ามาครับ โดย sidebar นี้จะอยู่ทางด้านขวามือ ซึ่งแล้วแต่เราว่าจะใส่อะไรเข้าไป ไม่ว่าจะเป็น โฆษณา, กล่องลงชื่อเข้าใช้ระบบ, กล่องค้นหาข้อมูล, Tag Cloud ฯลฯ

หรือถ้าเราไม่อยากให้มี sidebar เราสามารถปรับ Text Block ที่กว้างเกินไปจนอ่านลำบาก ให้แสดงผลเป็น 2 คอมลัมน์ ก็ได้ครับ

หลังจากที่เราได้ปรับการแสดงผลจนพอใจแล้ว ให้เราหา Breakpoints แบบนี้ต่อไปเรื่อยๆ จนกว่าจะทำไปถึงความกว้างที่เราพอใจแล้ว (ความกว้างที่มากเกิน จนคิดว่าคงไม่มีคนใช้ หรืออาจมีแต่น้อยมาก)

Breakpoints อยู่ตรงไหน ขึ้นกับตัวคุณ

เห็นแล้วนะครับว่า Breakpoints นั้น จะมีกี่จุด และแต่ละจุดอยู่ตรงไหนบ้าง ล้วนอยู่ที่มุมมองของคนออกแบบ ยิ่งเรากำหนด Breakpoints ได้อย่างเหมาะสมมากเท่าไร เว็บเราก็ยิ่งเหมือนกับน้ำที่เปลี่ยนแปลงรูปร่างตามภาชนะที่ใส่มากขึ้นเท่านั้น ถามว่าแล้วอะไรที่เรียกว่า “เหมาะสม” อันนี้ขึ้นกับความคิดสร้างสรรค์และประสบการณ์ของแต่ละคนครับ ลองฝึกกันดูนะครับ รับรองว่าเว็บคุณจะดูดีขึ้นอย่างแน่นอน

(Visited 17,560 times, 2 visits today)

24 Responses to “รู้จักกับ Breakpoints ใน Responsive Web Design”

  1. veeramo says:

    มีประโยชน์มากๆ ขอบคุณมาก ๆ ครับ

  2. meeja says:

    เหมาะกับทำเว็บตัวเองครับ ถ้าทำให้ลูกค้า คุณต้อง defend ให้ได้ว่า ถ้าเล็กกว่านี้การแสดงผลเป็นแบบนี้นะ ซึ่งลูกค้าที่เคารพส่วนใหญ่ จะชอบในแบบที่ตนเองต้องการ ถ้าหากมีการปรับต้องคุยกันให้ได้

    • Siam HTML says:

      แอดมินว่าลูกค้าส่วนใหญ่ ไม่เข้าใจ RWD อย่างแท้จริงครับ เราในฐานะผู้เชี่ยวชาญต้องชี้แจงเค้าว่าแบบนี้มันมีข้อดีข้อเสียยังไง แอดมินเจอประจำนะครับลูกค้าแบบคุณ meeja ว่า เค้ามักจะชอบบอกอยากให้ใน Mobile เป็นแบบนี้ บน Tablet เป็นแบบนี้ Desktop เป็นแบบนี้ แต่จริงๆ แล้ว การแสดงผลเหล่านี้ ควรเกิดจากการ Brainstorm ของทีม แทนที่จะเป็นฝ่าย BU หรือตัวลูกค้าเอง สิ่งที่ทีมควรฟังจากลูกค้า น่าจะเป็นเรื่องของ Look & Feel แอดมินอยากให้พวกเราช่วยกันผลักดันแนวคิดนี้กันเยอะๆ เพราะเว็บไซต์ใหญ่ๆ ของโลก ล้วนกำหนด Breakpoints แบบนี้ครับ

  3. TP says:

    บทความมีประโยชน์มากๆ ครับ

  4. nah says:

    media ต้องเรียงจาก มาก มาน้อย ไม่ใช่ น้อยมามาก นะครับ

    • Siam HTML says:

      ช่วยขยายความแนวคิดของคุณ nah ทีครับ

      • nah says:

        เวลาเรา ใส่ @media ต้องให้ ขนาดของจอ min-width ค่ามากอยู่บนสุด ไม่งั้น มันจะ แยกไม่ได้ กรณี device width ค่าน้อย จะโดนค่ามากกว่าดักไว้หมด ครับ

        @media (min-width: 1200px) { … }
        @media (min-width: 768px) and (max-width: 979px) { … }
        @media (max-width: 767px) { … }
        @media (max-width: 480px) { … }

        • Siam HTML says:

          ที่เป็นเช่นนี้เพราะคุณ nah เขียน media queries ผสมกันครับ ควรเลือกเขียนแบบใดแบบหนึ่ง min-width หมด หรือ max-width หมดไปเลยครับ ซึ่งวิธีใช้ min-width หมด จะมีข้อดีกว่าครับ

  5. ฌองมัวแซล เลอ มายองเนส says:

    เข้าใจเพิ่มขึ้นเลยครับ

  6. ขอบคุณสำหรับบทความดีๆ ครับ

  7. mygirl1712 says:

    ขอบคุณครับ ได้ความรู้เพิ่มขึ้นอีกเยอะเลยกับการเข้ามาที่นี่ ^^

  8. Arm Framus Camarillo says:

    ขอบคุณมากครับ ขอให้เขียนบทความดีๆ อย่างงี้อีกเยอะๆ นะครับ เป็นกำลังใจให้ครับ

  9. Thanaphat Aiumvijarn says:

    ขอสอบถามหน่อยครับ ผมลองทำตามแล้วมันไม่ได้อย่างที่คิดไว้น่ะครับ

    เริ่มแรกสมมุติว่า ขนาดหน้าจอ 320px ผมกำหนดให้ div1 ขนาด 100% และ div2 ขนาด 100% เวลาแสดงผลออกมา div1 และ div2 จะเรียงบรรทัดลงมา และมีขนาดกว้าง พอดีกับหน้าจอขนาด 320px

    ต่อมาสมมุติว่าผมพบ Breakpoints ที่หน้าจอ 768px และกำหนดให้ div1 และ div2 มีขนาดลดลง เหลือ 50% และเพิ่ม div3 ขึ้นมาให้มีขนาด 25%

    พอทดสอบดูกลับพบว่า ที่หน้าจอ 320px กลับแสดงผลทุกอย่างที่กำหนดไว้ที่ หน้าจอ 768px รวมถึงมี div3 โผล่มาด้วย

    ไม่รู้ว่าผมทำอะไรผิดหรือเปล่า แต่ผมต้องการให้ div3 แสดงตอนที่หน้าจอ 768px เท่านั้น

    ขอตัวอย่างการใส่ CSS ด้วยจะขอบคุณมากๆครับ ตอนนี้ งง 10 ด้านเลย ขอบคุณครับ

    • Siam HTML says:

      ผมทำตัวอย่างมาให้ดูแล้วนะครับ ติดอะไรตรงไหนมาคุยกันได้ครับ
      http://codepen.io/anon/pen/iJkEh/

      • Thanaphat Aiumvijarn says:

        ขอบคุณมากครับจะลองทำดูครับผม ^^”

      • Thanaphat Aiumvijarn says:

        div[class^="div"]

        มันหมายถึงอะไรหรอครับ

        • Siam HTML says:

          คำถามแรกก่อนนะครับ
          div[class^="div"] หมายถึง div element ที่มีชื่อ attribute ขึ้นต้นด้วย “div” ครับ (^ แปลว่าขึ้นต้น)

        • Siam HTML says:

          ส่วนคำถามที่สอง
          สามารถทำได้หลายวิธีมากครับ เช่น
          1. หากต้องการให้รูปขยายเต็ม container ไปเลย ให้เรากำหนด max-width:100%;height:auto; ครับ
          2. หากต้องการให้รูปมีขนาดตามที่กำหนด ให้เรากำหนด width กับ height ไว้ตาม breakpoints ต่างๆ ครับ
          3. หากต้องการเปลี่ยนรูปไปเลย ที่ breakpoints ต่างๆ (Art Direction) จำเป็นต้องใช้ picture element หรือ srcset attribute มาช่วยครับ หรือจะใช้ interchange ของ foundation ก็ได้ครับ

  10. Wan San says:

    ดีมากๆๆ ขอบคุณมากค่า

  11. เยี้ยมครับ

  12. ขอบคุณมากครับอย่างนี้ต้องเริ่มแล้วครับ

Leave a Reply