หอเกียรติยศแฮ็กการออกแบบเว็บ

เรานักออกแบบเว็บไซต์เป็นกลุ่มที่มีเล่ห์เหลี่ยมเสมอมา หากมีรูปลักษณ์หรือฟังก์ชันเฉพาะที่เราจำเป็นต้องบรรลุ เราสามารถรวมโซลูชันเข้าด้วยกันได้ เป็นกรณีนี้แม้ว่าจะไม่มีมาตรฐานหรือเครื่องมือเฉพาะที่จะแนะนำเรา นี่คือที่มาของแนวคิดของการแฮ็กการออกแบบเว็บ

การแฮ็กเป็นวิธีที่สร้างสรรค์ ซึ่งมักใช้วิธีการอ้อมเพื่อทำให้เว็บไซต์ดูหรือทำงานในลักษณะใดรูปแบบหนึ่ง บางครั้งก็มีความหมายเชิงลบ ตัวอย่างเช่น เลย์เอาต์แบบตาราง HTML ถูกเยาะเย้ยอย่างถูกต้องเนื่องจากไม่สามารถเข้าถึงโปรแกรมอ่านหน้าจอได้ แต่ไม่ใช่ว่าการแฮ็กทั้งหมดจะแย่

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

ด้วยเหตุนี้ เรามาดูแฮ็กการออกแบบเว็บที่มีประโยชน์และแพร่หลายมากที่สุดจากหลายปีที่ผ่านมา โดยได้รับแรงบันดาลใจจากการสนทนาใน Twitter กับนักออกแบบคนอื่นๆ ในขณะที่พวกเขาไม่จำเป็นต้องถือเทียนตามมาตรฐานที่เรามีในปัจจุบัน แต่พวกเขาเป็นห้องโถงของเกษตรกรในสมัยของพวกเขาเอง

เลย์เอาต์: ตาราง HTML และ CSS Floats

การคัดเลือกครั้งแรกของเราจะเข้าสู่หอเกียรติยศเสมือนจริงนี้ด้วยกัน แม้ว่าการใช้งานสูงสุดตามลำดับจะห่างกันหลายปี แต่โดยพื้นฐานแล้วพวกมันถูกใช้เพื่อทำสิ่งเดียวกันให้สำเร็จ: เลย์เอาต์แบบหลายคอลัมน์

ตาราง HTML

ก่อนที่ CSS จะมาถึงที่เกิดเหตุ หน้าเว็บในช่วงแรกๆ เป็นเรื่องของคอลัมน์เดียว ไม่มีช่องว่างภายในหรือระยะขอบ และไม่มีวิธีมาตรฐานในการวางเนื้อหาในคอลัมน์แนวนอน นั่นคือจนกระทั่งวิญญาณกล้าได้กล้าเสียตัดสินใจใช้โต๊ะเพื่อจุดประสงค์นี้

แน่นอน ตาราง HTML มีไว้เพื่อเก็บข้อมูลแบบตาราง ไม่ใช่การจัดวางหน้า แต่จริง ๆ แล้วมันเป็นวิธีที่มีประสิทธิภาพในการทำงานให้เสร็จจนกว่า CSS จะเข้ามา

CSS Floats

ตารางมีข้อเสียหลายประการ – รวมถึงปัญหาการช่วยสำหรับการเข้าถึงดังกล่าว พวกเขายังแสดงผลช้าในเบราว์เซอร์ ดังนั้นเมื่อมีการแนะนำ CSS floats มันถูกมองว่าเป็นตัวเปลี่ยนเกมสำหรับนักออกแบบเว็บไซต์

Floats ไม่ใช่มาร์กอัป HTML ดังนั้นจึงเข้าถึงได้ง่ายขึ้นและสามารถเพิ่มประสิทธิภาพได้ ทันใดนั้น เลย์เอาต์แบบหลายคอลัมน์ก็เป็นไปได้ผ่าน CSS และสามารถปรับให้เข้ากับสิ่งต่างๆ เช่น ขนาดหน้าจอได้ดีขึ้น

อย่างไรก็ตาม ขบวนพาเหรดไม่ได้พาเราไปที่ดินแดนที่สัญญาไว้ หากคุณต้องการให้คอลัมน์มีความสูงเท่ากัน จำเป็นต้องมีแฮ็ค clearfix เพิ่มเติม

แต่ละรายการเหล่านี้ยังคงมีประโยชน์มากในปัจจุบันเมื่อใช้ตามวัตถุประสงค์เดิม แต่สำหรับเลย์เอาต์ วันของพวกเขาก็จบลงด้วยดี

ระยะห่างขององค์ประกอบ: ช่องว่างที่ไม่แตกหัก (   ) และ Spacer.gif

นักออกแบบเว็บไซต์ที่เน้นรายละเอียดมักจะมองหาวิธีที่จะจัดองค์ประกอบให้เหลือขนาดพิกเซลที่แน่นอน อีกครั้ง มันไม่ง่ายนักในสมัยก่อน ดังนั้น ช่องว่างที่ไม่แตก ( ) และ spacer.gif จึงถูกใช้เพื่อควบคุมการเว้นวรรคมากขึ้น

พื้นที่ไม่ทำลาย (   )

ต้องการชนองค์ประกอบในแนวนอน แต่ไม่มีการจัดกึ่งกลางหรือจัดชิดขวาใช่หรือไม่ การเพิ่มช่องว่างที่ไม่แตกหักเล็กน้อยจะช่วยได้

อย่างไรก็ตาม มันไม่ใช่วิทยาศาสตร์ที่แน่นอนเช่นนั้น ขนาดที่แท้จริงของแต่ละช่องว่างขึ้นอยู่กับตระกูลแบบอักษรและขนาดแบบอักษร และถึงแม้จะพิจารณาถึงความแตกต่างเหล่านั้น แฮ็กนี้ยังอาจดูแตกต่างออกไปขึ้นอยู่กับเบราว์เซอร์และระบบปฏิบัติการที่ผู้เยี่ยมชมใช้

Spacer.gif

แฮ็คการเว้นวรรคที่แม่นยำยิ่งขึ้นนี้มาจากการสร้างอิมเมจ .GIF แบบโปร่งใส (มักตั้งชื่อว่า spacer.gif ) และวางลงในเพจ แง่มุมที่เรียบร้อยก็คือ เนื่องจากเป็นภาพที่โปร่งใส นักออกแบบสามารถกำหนดความสูงและความกว้างเป็นจำนวนพิกเซลใดๆ ได้โดยไม่มีผลกระทบด้านลบต่อรูปลักษณ์หรือประสิทธิภาพ

CSS ทำให้การแฮ็กทั้งสองนี้ล้าสมัย แต่คุณไม่รู้หรือว่าตัวแก้ไข WordPress Gutenberg มีบล็อก Spacer ที่ทำในสิ่งเดียวกัน ก็แสดงว่ายังมีความจำเป็นอยู่

วิชาการพิมพ์: ข้อความตามรูปภาพ

ความต้องการอันนี้ค่อนข้างง่าย เว็บยุคแรก ๆ นั้น จำกัด เฉพาะฟอนต์ที่ติดตั้งบนระบบของผู้ใช้ แน่นอนว่านักออกแบบไม่มีทางรู้แบบอักษรทั้งหมดที่ผู้ใช้เข้าถึงได้ นอกจากพื้นฐานอย่าง Times New Roman, Georgia, Arial และ Helvetica

ด้วยเหตุนี้จึงทำให้เกิดการตัดสินใจที่น่ากลัวในการสร้างภาพที่เต็มไปด้วยข้อความใน Photoshop แม้ว่าสิ่งนี้จะอนุญาตให้ใช้แบบอักษรแทบทุกชนิด แต่ก็มีค่าใช้จ่ายในการเข้าถึง นอกจากนี้ การใช้รูปภาพแทนแท็กหัวเรื่อง HTML ยังขจัดความหมายของหน้า ซึ่งอาจทำให้ SEO เสียหาย

ส่วนหัวและการนำทางที่ติดหนึบ: เฟรม

เฟรม HTML อาจมาก่อนเวลา เนื่องจากงานหลายอย่างที่เราเคยใช้ทำผ่าน CSS และ JavaScript

แนวคิดค่อนข้างง่าย แต่ละ "เฟรม" ภายในเลย์เอาต์เป็นหน้าของตัวเองจริงๆ นี่เป็นวิธีง่ายๆ ในการแยกส่วนหัว ส่วนท้าย หรือการนำทางออกจากเนื้อหาที่เหลือของไซต์ ตัวอย่างเช่น การเปลี่ยนแปลงการนำทาง หมายถึงการเปลี่ยนแปลงเพียงครั้งเดียวในไฟล์เดียว คล้ายกับสิ่งที่ฝั่งเซิร์ฟเวอร์ทำ มีเพียงข้อดีด้านการออกแบบอื่นๆ ที่รวมอยู่ด้วย

หัวหน้าในหมู่พวกเขาคือความสามารถในการสร้างส่วนหัวและการนำทางที่ "เหนียว" ขณะที่ผู้ใช้เลื่อนดูเนื้อหา พวกเขายังสามารถไปยังส่วนต่างๆ ของไซต์ได้อย่างง่ายดาย

เทคนิคนี้มีจุดประสงค์ แต่ก็ห่างไกลจากอุดมคติ มันไม่สามารถปรับเปลี่ยนได้มากในแง่ของขนาดหน้าจอที่แตกต่างกัน และไม่เหมาะสำหรับ SEO เช่นกัน นอกจากนี้ยังมีข้อกังวลด้านความปลอดภัยบางประการเกี่ยวกับการโหลดเฟรมจาก URL ที่ชั่วร้าย

การปรับภาพให้เหมาะสม: ภาพหั่นบาง ๆ

ในสมัยก่อนบรอดแบนด์ที่แพร่หลาย การเพิ่มประสิทธิภาพภาพเป็นสิ่งสำคัญ แม้แต่รูปภาพขนาด 50kb ก็อาจทำให้หน้าเพจลดลงด้วยการเชื่อมต่อที่ช้า

ซอฟต์แวร์ยักษ์ใหญ่อย่าง Adobe ได้นำเสนอโซลูชั่นที่น่าสนใจ ด้วยซอฟต์แวร์ ImageReady นักออกแบบสามารถแบ่งภาพเดียวออกเป็นชิ้นเล็ก ๆ จำนวนเท่าใดก็ได้ จากนั้นแต่ละสไลซ์จะถูกปรับให้เหมาะสม ในทางทฤษฎีแล้วทำให้ดาวน์โหลดได้อย่างรวดเร็ว

แต่นั่นไม่ใช่ทั้งหมด ซอฟต์แวร์สามารถส่งออกสไลซ์ไปยังตาราง HTML ได้ จากที่นั่น คุณสามารถคัดลอกและวาง HTML นั้นลงในเพจของคุณได้

ปัญหาของเทคนิคนี้มีสองเท่า ประการแรก การจัดวางตารางอาจใช้เวลาเพิ่มขึ้นในการแสดงผล ซึ่งอาจทำให้การเพิ่มประสิทธิภาพที่คุณทำสำเร็จไม่ได้ ประการที่สอง การรักษาไว้อาจเป็นความเจ็บปวดอย่างแท้จริง ตัวอย่างเช่น การเพิ่มรายการการนำทางลงในกราฟิกส่วนหัวขนาดใหญ่ อาจต้องเริ่มใหม่ด้วยชุดสไลซ์ใหม่ทั้งหมด ดังนั้นจึงจำเป็นต้องเปลี่ยนเทมเพลต

แม้ว่าการเพิ่มประสิทธิภาพภาพยังคงมีความสำคัญ แต่บรอดแบนด์ยังช่วยให้เรามีความคล่องตัวมากขึ้นอีกเล็กน้อยสำหรับไฟล์ขนาดใหญ่ ถึงกระนั้น Photoshop เวอร์ชันใหม่ยังคงเสนอการแบ่งส่วนภาพและการส่งออก HTML

กำลังวาง Internet Explorer: <!--[if IE]>

จนถึงทุกวันนี้ ก็ยังไม่ใช่เรื่องแปลกที่จะได้ยินนักออกแบบเว็บไซต์ (รวมถึงฉันด้วย) สาปแช่งการมีอยู่ของ Internet Explorer ที่ไม่เชื่อฟัง มรดกของมันยังคงอยู่ ส่วนหนึ่งเป็นเพราะผู้ใช้บางคนไม่ยอมเลิกรา

ด้วยเหตุนี้ ดูเหมือนว่าเรากำลังแฮ็กข้อมูลลักษณะนิสัยและข้อจำกัดต่างๆ ที่เป็นกรรมสิทธิ์ของ IE ไปตลอดกาล เป็นเวลาหลายปี ซึ่งรวมถึงการใช้ความคิดเห็นแบบมีเงื่อนไขเพื่อตรวจหาผู้ใช้ IE และให้บริการรูปแบบอื่น

ค่อนข้างหลากหลายเพราะคุณสามารถใช้สไตล์กับ IE ทุกเวอร์ชัน <!--[if IE]> หรือกำหนดเป้าหมายไปยังเวอร์ชันที่เก่ากว่า <!--[if lt IE 11]> คุณอาจใช้ในทางกลับกัน โดยมองหาเวอร์ชันที่มากกว่าหรือเท่ากับรุ่นเฉพาะ <!--[if gte IE 10]>

Microsoft ต้องมีความเห็นอกเห็นใจสำหรับนักออกแบบเว็บไซต์ เนื่องจากความคิดเห็นแบบมีเงื่อนไขเหล่านี้สามารถทำงานใน IE ได้ โชคดีที่เบราว์เซอร์ Edge ใหม่ของพวกเขาไม่ต้องการเรื่องไร้สาระเช่นนี้

เคล็ดลับการออกแบบเว็บที่ต้องจำ

การแฮ็กในหอเกียรติยศไม่ใช่สิ่งเดียวที่นักออกแบบเว็บไซต์ใช้ มีวิธีแก้ปัญหามากมายนับไม่ถ้วนที่ช่วยให้เราทำสิ่งที่ดูเหมือนเป็นไปไม่ได้ แต่สิ่งที่ทำให้รายการนี้แตกต่างคือการใช้งานจำนวนมาก และในบางกรณีก็ได้รับการสนับสนุนจากบริษัทใหญ่ๆ

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

ยิ่งไปกว่านั้น พวกเขายังช่วยปูทางให้เว็บเป็นอยู่ทุกวันนี้ รายการส่วนใหญ่ในรายการนี้ถูกแทนที่ด้วยมาตรฐาน HTML และ CSS ซึ่งเป็นประโยชน์ต่อทุกคน