รู้จักกับ 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 ได้อย่างเหมาะสมมากเท่าไร เว็บเราก็ยิ่งเหมือนกับน้ำที่เปลี่ยนแปลงรูปร่างตามภาชนะที่ใส่มากขึ้นเท่านั้น ถามว่าแล้วอะไรที่เรียกว่า “เหมาะสม” อันนี้ขึ้นกับความคิดสร้างสรรค์และประสบการณ์ของแต่ละคนครับ ลองฝึกกันดูนะครับ รับรองว่าเว็บคุณจะดูดีขึ้นอย่างแน่นอน
ที่มา: http://www.siamhtml.com/
Comments
Post a Comment