คืนหนึ่งในเดือนพฤศจิกายน ฉันบินเหนือบ้านเกิดของฉันที่ทูซอน รัฐแอริโซนา ฉันรู้สึกทึ่งกับผังเมืองนี้ที่เหมือนตาราง ดูเหมือนเป็นตาราง นักออกแบบวางอย่างประณีต (รูปที่ 1) ฉันเพิ่งกลับมาจากลอนดอน ตรงกันข้ามกับผังเมืองของลอนดอน (รูปที่ 2) ออกจากธรรมชาติ
รูปที่ 1: ทูซอน แอริโซนา
รูปที่ 2: ลอนดอน
ฉันคิดเกี่ยวกับบทความนี้มานานแล้ว มุมมองทางอากาศของทั้งสองเมืองทำให้ฉันนึกถึงการออกแบบเว็บไซต์ เทคโนโลยีในปัจจุบันช่วยให้เราสามารถใช้งานการออกแบบตามตารางได้อย่างอิสระหรือกระโดดออกจากตารางโดยสิ้นเชิง ผลกระทบต่อนักออกแบบเว็บไซต์ ไม่ต้องสงสัยเลยเกี่ยวกับการผลักดัน แต่ความท้าทายที่แท้จริงคือเราจะปล่อยวางความคิดที่ปิดบังเหล่านั้นและคิดนอกกรอบได้อย่างไร
ให้ความรู้สึกแบบเมือง
หากคุณเปรียบเทียบการวางผังเมืองกับการออกแบบเว็บไซต์ ความคล้ายคลึงกันระหว่างทั้งสองก็น่าสนใจ เค้าโครงตารางเหมาะอย่างยิ่งสำหรับการสร้างเว็บไซต์ที่คาดเดาได้และใช้งานง่าย กริดเหมาะสำหรับการช่วยนักออกแบบในการวางแผนและทำให้ผู้ใช้เข้าถึงได้ง่าย (รูปที่ 3)
รูปที่ 3: ไรอัน บริลล์
ข้อดีก็คือ ทูซอนเป็นเมืองที่ไปเยือนได้ง่ายอย่างแน่นอน แค่รู้ทิศทางเล็กน้อยหรือมีแผนที่ถนนก็เพียงพอแล้ว ผู้พักอาศัยบอกทางให้คนอื่นๆ ก็พอจะบอกว่า ฉันอยู่มุมตะวันตกเฉียงใต้ของสี่แยกแคมป์เบลล์อเวนิว และ ถนนปริ๊นซ์ ทุกที่ การขนส่งสาธารณะมีทางทิศใต้และทิศเหนือหรือทิศตะวันออกและทิศตะวันตก ดังนั้นจึงง่ายต่อการระบุถนน
ในทางกลับกัน เดิมทีนักออกแบบของทูซอนวางแผนที่จะขยายพื้นที่อย่างจำกัด และปัญหาก็เกิดขึ้นเมื่อเมืองขยายตัวเกินขีดจำกัดที่วางแผนไว้ ข้อจำกัดของตารางของทูซอนป้องกันไม่ให้เกิดรูปแบบที่แตกต่างกันของชุมชนหรือละแวกใกล้เคียง ผู้อยู่อาศัยในทูซอนจำนวนมากรู้สึกว่าเมืองนี้ขาดตัวเมืองที่มีชีวิตชีวาหรือย่านใกล้เคียงที่โดดเด่นมากมาย แม้ว่าพื้นที่ดังกล่าวจะปรากฏ พวกเขาก็เข้าถึงได้ง่าย ไม่ต้องกังวลที่จะมองหามัน
ลอนดอนแตกต่างออกไป มันเป็นเรื่องลึกลับ ฉันรู้ว่าชาวลอนดอนเองก็พึ่งพาไกด์นำเที่ยวเพื่อเดินทาง ระบบการคมนาคมในเมืองเต็มไปด้วยความท้าทาย และคนขับแท็กซี่เหล่านั้นจำเป็นต้องผ่านการสอบพิเศษก่อนจึงจะทำงานได้ การเติบโตตามธรรมชาติของเมืองไม่ได้ทำให้เป็นสถานที่ที่ง่ายต่อการเดินทาง
อย่างไรก็ตาม ลอนดอนเต็มไปด้วยย่านที่น่าตื่นเต้นและย่านใกล้เคียงที่มีเอกลักษณ์เฉพาะตัว ตลอดจนศูนย์กลางทางวัฒนธรรมและย่านที่แปลกตา แม้ว่าการเดินทางจะยากกว่า แต่เนื่องจากมีรสนิยมที่หลากหลาย ผู้คนจึงเต็มใจที่จะอยู่ในหมู่พวกเขามากกว่า
คำอุปมานี้ยังเหมาะสำหรับการออกแบบเว็บไซต์ที่มีแนวโน้มว่าจะเป็นธรรมชาติ ผู้คนจะนำทางไปตามตรอกซอกซอยที่คดเคี้ยวเหล่านั้นได้อย่างง่ายดายได้อย่างไร ในทางกลับกัน การออกแบบที่สวยงามสามารถทำได้โดยการแยกออกจากกล่องที่เราอาศัยอยู่ ในรูปที่ 4 คุณจะเห็นว่าการฝ่าฝืนกฎของการออกแบบกริดช่วยให้การออกแบบยังคงใช้งานได้ในขณะที่ยังคงดูแตกต่างออกไปอย่างไร
รูปที่ 4: AIGA ลอสแองเจลิส
ตำนานของรหัสกริด
ในฐานะคนที่ให้ความสำคัญกับโค้ดมากกว่าการออกแบบ ฉันสับสนที่พบว่าการออกแบบของเราติดอยู่กับโค้ดอย่างไร ฉันเชื่อว่าเค้าโครงตารางระยะยาวทำให้เราวางรากฐานที่มั่นคง (รูปที่ 5) เค้าโครง CSS ล่าสุด เป็นเรื่องง่ายที่จะรู้ว่าทำไม
รูปที่ 5: k10k
เค้าโครงตารางทำงานได้ดีกับการออกแบบตาราง โค้ดของตารางจะสร้างตารางขึ้นมาใหม่ เราเพียงเติมรูปภาพ ข้อความ และองค์ประกอบอินเทอร์เฟซลงในเซลล์เพื่อทำให้การออกแบบของเราสมบูรณ์ (รูปที่ 6) หากเราต้องการใช้การออกแบบที่ไม่มีโครงสร้างที่ซับซ้อน เราจำเป็นต้องใช้รูปภาพจำนวนมากในเอกสาร ส่งผลให้เอกสารทั้งหมดบวม
รูปที่ 6: การเปลี่ยนน้ำหนัก
เค้าโครงแบบตารางมีข้อดีบางประการ แต่เช่นเดียวกับการวางผังเมือง ข้อดีบางครั้งอาจกลายเป็นข้อเสียได้ ตารางตามตารางช่วยให้แน่ใจว่าเซลล์ทั้งหมดในตารางเป็นแบบปกติ คุณต้องการให้คอลัมน์ทั้งหมดมีความกว้างเท่ากันหรือไม่ ง่ายเกินไป นั่นคือธรรมชาติของตาราง รักษาช่องว่างระหว่างเซลล์ให้สม่ำเสมอหรือไม่ มันก็เป็นเค้กชิ้นหนึ่งด้วย อย่างไรก็ตาม จะเป็นอย่างไรหากคุณไม่ต้องการโครงสร้างที่เรียบร้อยนี้ น่าเสียดายที่คุณไม่สามารถทำได้
CSS เปลี่ยนแปลงทุกสิ่ง นั่นคือเหตุผลที่ฉันคิดว่าเรายังไม่ได้เรียนรู้การออกแบบสำหรับเว็บเลย พวกเรา โดยเฉพาะอย่างยิ่งผู้ที่หันมาใช้ CSS จากเค้าโครงตารางที่มีมาอย่างยาวนาน เพิ่งเริ่มเข้าใจว่าโมเดลภาพของ CSS มีประโยชน์เพียงใดในการขจัดอุปสรรคในการออกแบบตาราง เค้าโครง CSS สมบูรณ์แบบหรือไม่ ไม่ นอกจากประโยชน์ที่ CSS นำมาแล้ว เรายังสูญเสียบางสิ่งบางอย่างอีกด้วย การขยายคอลัมน์เป็นปัญหาใหญ่สำหรับการออกแบบ CSS เช่นเดียวกับช่องว่างระหว่างเซลล์
CSS ไม่มีอะไรมากไปกว่าขอบและกล่องซึ่งพบได้ในกริดเช่นกัน อย่างไรก็ตาม ความแตกต่างที่สำคัญระหว่างทั้งสองคือ CSS ช่วยให้เราสามารถแยกกล่องออกจากสภาพแวดล้อมโดยรอบและกำจัดทิ้งได้ตามต้องการ (รูปที่ 7)
รูปที่ 7
เราสามารถใช้คุณลักษณะตำแหน่งหรือลอยตัวสำหรับการวางตำแหน่ง และเราสามารถใช้รูปภาพขนาดเบาเป็นพื้นหลังได้ ดังนั้น เมื่อใช้ Box เราจึงสามารถใช้ทั้งเค้าโครงตารางและเค้าโครงที่ไม่ใช่ตารางได้อย่างมีประสิทธิภาพมากขึ้น คุณสามารถดูสิ่งนี้ได้ใน Blood ของ Dave Shea ดูตัวอย่างนี้ ใน Lust หนึ่งในการออกแบบมากมายที่เขาใช้ใน CSS Zen Garden (รูปที่ 8)
รูปที่ 8: CSS Zen Garden: ความต้องการทางโลหิต
รูปที่ 9 แสดงการออกแบบที่ไม่มีโครงสร้างแบบ BOX ที่ใช้ใน Blood Lust และยังแสดงวิธีใช้ CSS และ BOX เพื่อปรับใช้กริดที่ไม่มีโครงสร้างอิสระ
รูปที่ 9
เมื่อเราเข้าใจความสามารถของ BOX แล้ว เราก็จะสามารถทะลุข้อจำกัดของกริดได้อย่างง่ายดาย การออกแบบที่ไม่มีโครงสร้างสูงและฟรีจะแสดงในรูปที่ 10
รูปที่ 10: มหาวิทยาลัย Kutztown: แผนกออกแบบการสื่อสาร
BOX เหล่านี้อยู่ในตำแหน่งที่ใช้ CSS:
รูปที่ 11
ไม่เพียงแต่เป็นตัวล้างโค้ดเท่านั้น แต่ยังใช้งานง่ายกว่าและง่ายกว่าสำหรับนักออกแบบที่คุ้นเคยกับเค้าโครง CSS การออกแบบยังใช้งานง่าย ใช้งานง่าย และแหวกแนวอีกด้วย
แนวโน้ม
ความสวยงามของเทคโนโลยีการจัดวางที่ทันสมัยคือการที่เรามีตัวเลือกให้เลือกมากขึ้น การใช้ CSS เราสามารถสร้างการออกแบบที่จัดการได้ น้ำหนักเบา และสวยงาม ซึ่งสามารถใช้เป็นตารางได้หากต้องการ และเราสามารถทำลายหรือทำลายตารางได้อย่างง่ายดาย
นี่เป็นการเปิดโอกาสมากขึ้นสำหรับการออกแบบเว็บไซต์ร่วมสมัย และเราไม่ควรทำผิดพลาดแบบเดิมเพียงเพราะเราคุ้นเคยกับการออกแบบตารางมากกว่า
สำหรับพวกเราที่หมกมุ่นอยู่กับการจัดวางโต๊ะมาเป็นเวลานาน ความยากลำบากนั้นยิ่งใหญ่มาก สำหรับผู้ที่เป็นนักออกแบบเว็บไซต์มาหลายปี นี่หมายถึงการละทิ้งสิ่งที่พวกเขาเคยใช้มาโดยตลอด บางคนอาจพบว่าไม่ยาก แต่คนส่วนใหญ่จะพบว่ามันน่ากลัว เราจำเป็นต้องเรียนรู้วิธีการทำงานของโมเดล CSS และมีความกล้าที่จะบอกลากฎเดิมๆ
จากผู้มาใหม่เหล่านี้เราหวังว่าจะเห็นความก้าวหน้ามากขึ้นในการออกแบบแบบแผนซึ่งวิธีการในอดีตของเรานั้นแปลกและเข้มงวด
เว็บกำลังเติบโต วิธีการออกแบบของเรากำลังเปลี่ยนไป และเรามีนวัตกรรมและความคิดสร้างสรรค์มากขึ้นต่อหน้าเรา เราจะไม่ยึดติดอยู่กับเมืองที่วางแผนไว้ เราสามารถบรรลุการออกแบบที่เป็นเอกลักษณ์ได้ พวกเรานักออกแบบเก่าๆ รวมกับผู้มาใหม่ในปัจจุบัน จะทำให้เว็บเปลี่ยนแปลงไปในแต่ละวันที่ผ่านไป
ผู้เขียนบทความนี้:
Molly E. Holzschlag เป็นผู้ให้การสนับสนุนและผู้เผยแพร่มาตรฐานเว็บที่มีชื่อเสียง หนังสือที่ขายดีที่สุดของเธอมากกว่า 30 เล่มคือ The Zen of CSS Design (Zen Web Design) ซึ่งเธอร่วมเขียนร่วมกับ Dave Shea มอลลี่เป็นผู้เชี่ยวชาญที่ได้รับเชิญในคณะทำงาน W3C และเป็นอดีตผู้อำนวยการ Web Standards Project Group (WaSP) Molly ทำงานร่วมกับนักออกแบบ นักพัฒนา ผู้ปฏิบัติงาน และผู้มีอำนาจตัดสินใจเพื่อขับเคลื่อนเว็บที่มีประโยชน์ สวยงาม และมีความหมาย
คำลงท้าย
นี่เป็นบทความที่ตีพิมพ์ใน A LIST APART ในปี 2548 ในปี 2548 เค้าโครง CSS ไม่ธรรมดาเหมือนในปัจจุบัน และเค้าโครงตารางได้ครอบงำผู้คนจำนวนมาก ในฐานะผู้เชี่ยวชาญอาวุโสในสาขาเว็บ ผู้เขียน Molly E. Holzschlag ยังเป็นผู้ใช้งานเค้าโครงตารางมาเป็นเวลานาน เมื่อ CSS ใกล้จะถึงกำหนดและเค้าโครงที่ใช้ CSS กำลังรีเฟรช เธอมีความรู้สึกผสมปนเปเกี่ยวกับการออกแบบตารางตามตาราง ดังที่เห็นได้จากบทความ
อย่างไรก็ตาม ในปี 2009 เมื่อ CSS แพร่หลายและเค้าโครง CSS คุ้นเคย เราจำเป็นต้องคิดถึงการออกแบบกริดอีกครั้ง กริดตายหรือตารางชั่วร้าย? คำตอบนั้นไม่ใช่เรื่องง่าย ไม่ว่ามันจะเปลี่ยนไปอย่างไร เว็บในปัจจุบันก็ยังมีจุดประสงค์อันเป็นนิรันดร์ นอกเหนือจากเว็บแอปพลิเคชันแล้ว ภารกิจที่เปลี่ยนแปลงตลอดเวลาของเว็บก็คือการแสดงและส่งข้อมูล หากคุณเป็นผู้รู้หนังสือ คุณจะตกหลุมรัก กับลอนดอน แต่ถ้าคุณเป็นบุรุษไปรษณีย์ คุณจะเลือกทูซอน ดังนั้น ไม่ว่าจะเป็นการออกแบบกริดหรือการออกแบบที่เป็นธรรมชาติ ก็ไม่มีข้อดีหรือข้อเสียที่แน่นอน การออกแบบกริดมีความชัดเจนและประณีตกว่า ในขณะที่การออกแบบที่เป็นธรรมชาติมีความหรูหราและประณีตมากกว่า
และตารางก็ไม่ได้ชั่วร้ายอย่างที่หลายๆ คนพูด ควรสังเกตว่าตารางในปัจจุบันไม่ใช่ตารางในอดีตอีกต่อไป BOX สามารถรวมเข้ากับ CSS ได้และยังสามารถใช้ตารางที่แก้ไขโดยสมบูรณ์ด้วย CSS ได้ ชุดค่าผสมและการโต้ตอบแบบออร์แกนิก BOX เมื่อคุณไม่ต้องการตำแหน่งเซลล์ในตารางที่แม่นยำ ตารางจะเป็นคอนเทนเนอร์ที่สมบูรณ์แบบกว่า BOX เนื่องจากเข้ากันได้กับเบราว์เซอร์ทั้งหมดมากที่สุด มันจะไม่ยุบ และ ความยาวไม่ต่างกัน พฤติกรรมตอบสนองความคาดหวังได้ง่ายกว่า และที่สำคัญที่สุดคือเป็นวิธีที่ผู้คนจัดระเบียบได้โดยตรงที่สุด
ผู้เขียนต้นฉบับ มอลลี่ อี. โฮลซ์ชแลก
แหล่งที่มาแปลภาษาจีน: เว็บไซต์ทางการของ COMSHARP CMS นักแปล 35 กิโลเมตร