วิธีปฏิบัติที่ดีที่สุดสำหรับการเพิ่มความก้าวหน้าในการออกแบบเว็บ

งานฝีมือการสร้างเว็บไซต์มีความซับซ้อนอย่างเหลือเชื่อกับชิ้นส่วนที่เปลี่ยนแปลงอย่างรวดเร็ว เป้าหมายของชุมชนการออกแบบเว็บคือ ลดความซับซ้อน, และ ลดโอกาสเกิดข้อผิดพลาด ในแต่ละขั้นตอนของกระบวนการสร้าง.

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

เป็นเรื่องง่ายที่จะเข้าใจการเพิ่มประสิทธิภาพที่ก้าวหน้า แต่ไม่ง่ายที่จะนำไปใช้กับงานออกแบบของคุณโดยตรง ฉันต้องการที่จะครอบคลุมบางส่วน แนวทางปฏิบัติที่ดีที่สุดสำหรับการเพิ่มประสิทธิภาพแบบก้าวหน้าในโครงการจริง ไปยัง ช่วยให้นักออกแบบคิดอย่างยั่งยืนมากขึ้นเกี่ยวกับขั้นตอนการทำงานของพวกเขา.

1. ทำความเข้าใจกับการเพิ่มประสิทธิภาพแบบก้าวหน้า

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

นี่คือสิ่งที่ตรงกันข้ามกับความเสื่อมโทรมที่สง่างามซึ่งรวมถึงคุณลักษณะทั้งหมดตามค่าเริ่มต้นแล้วลดระดับลงเมื่อมีบางสิ่งไม่ทำงาน.

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

นี้ รายการนอกเหนือ บทความระบุว่าการเพิ่มประสิทธิภาพที่ก้าวหน้าคือ เนื้อหาแรก กับ เพิ่มสไตล์และส่วนประกอบแบบไดนามิกในภายหลัง. เนื้อหาใน semantic HTML ควรส่งก่อนสิ่งอื่นใด.

CSS และ JavaScript ขั้นสูงที่เราใช้ในปัจจุบันได้รับการสนับสนุนอย่างกว้างขวาง แต่ถ้าเราต้องการที่จะปฏิบัติตามหลักการของการเพิ่มประสิทธิภาพแบบก้าวหน้าพวกเขาควรได้รับการพิจารณาฟุ่มเฟือย.

ต่อไปนี้เป็นบทสรุปทั่วไปของคุณสมบัติหลักของการเพิ่มประสิทธิภาพแบบก้าวหน้าที่คุณควรคำนึงถึง:

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

ข้อ จำกัด ทางเทคโนโลยีในการพัฒนาส่วนหน้านั้นพิจารณาจากความเข้ากันได้ของเบราว์เซอร์เป็นหลัก การเพิ่มประสิทธิภาพแบบก้าวหน้าทำให้คุณกลับไปสู่พื้นฐานการคิดเกี่ยวกับวิธีการ หน้าเว็บที่ง่ายที่สุดกระดูกเปลือย อาจดูเหมือน จากตรงนั้นคุณสามารถ วางแผนสำหรับคุณสมบัติขั้นสูงเพิ่มเติม, เช่นคุณสมบัติ CSS3.

แต่สิ่งที่เกี่ยวกับเบราว์เซอร์ที่ไม่รองรับ CSS3 ที่ทันสมัย? นี่คือสถานที่ที่เว็บไซต์ที่ฉันสามารถใช้เข้ามาเล่นได้ คุณควรตัดสินใจว่าคุณสมบัติใดบ้างที่ควรนำไปใช้และตัดสินตาม ในกลุ่มเป้าหมายของเว็บไซต์ของคุณ.

2. การดำรงชีวิตในสไตล์ชีต

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

แทนที่จะมองหาวิธีสำรองเพื่อรักษาคุณสมบัติใหม่เหล่านี้ให้คำนึงถึงตัวคุณเป็นอันดับแรก โครงสร้างเค้าโครงที่เหมาะสม.

เขียน HTML ความหมายและ CSS มาร์กอัปที่ทำงานในเบราว์เซอร์ที่ใช้งานมากที่สุด (การสนับสนุนสำหรับเบราว์เซอร์โบราณเช่นการสนับสนุน IE5 ไม่จำเป็น).

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

นักพัฒนาบางคนต้องการที่จะมีคอลัมน์เนื้อหา (.ของเหลว) ปรากฏก่อนใน HTML นี่คือจุดที่การเพิ่มประสิทธิภาพแบบก้าวหน้าเข้ามามีส่วนร่วมและโซลูชัน CSS สำรองจะทำงานได้.

เป้าหมายหลักสองประการของ HTML ของคุณมีดังนี้:

อย่างเต็มที่ ความหมายและถูกต้อง รหัส
ประสบการณ์ที่สอดคล้องกัน สำหรับทุกคน

วิธีที่ตรงไปตรงมาที่สุดในการบรรลุเป้าหมายเหล่านี้คือ เริ่มต้นจากอะไร และ ออกกำลังกาย, เนื่องจากผู้ให้การสนับสนุนการเพิ่มประสิทธิภาพที่ก้าวหน้าที่สุดจะแนะนำ.

หากรหัสของคุณดูดีโดยที่ CSS ทั้งปิดใช้งานและเปิดใช้งานอยู่จะเป็นทางออกที่เหมาะสมสำหรับทุกคน.

นอกจากนี้ยังมีมูลค่าการพิจารณา ณ จุดที่คุณทิ้งการสนับสนุนบางอย่าง. Microsoft ได้ละทิ้งการสนับสนุนที่สำคัญสำหรับ IE6 ดังนั้นผู้ใช้ที่เรียกใช้เบราว์เซอร์นั้นอาจไม่คุ้มค่ากับเวลาของคุณ.

แต่ยังคงมีคำถามใหญ่คำถามหนึ่ง: หากเบราว์เซอร์ไม่สนับสนุน CSS ที่ทันสมัยของฉันฉันควรทำอย่างไร?

คุณเพียงแค่ เขียนโค้ดที่ใช้งานได้ ไม่มี มัน, และพิจารณา CSS ที่ทันสมัยว่าเป็นการปรับปรุงแบบก้าวหน้า นี่คือความงามของวิธีการเพิ่มประสิทธิภาพที่ก้าวหน้า.

คุณไม่จำเป็นต้องมีทางเลือกเพราะคุณ โดยทั่วไปสมมติว่าไม่มีสิ่งใดสนับสนุนโดยค่าเริ่มต้น.

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

คุณต้องพิจารณา เนื้อหาไหลอย่างไรโดยไม่มี CSS. ตัวอย่างเช่นเมื่อฉันปิดการใช้งาน CSS ในเว็บไซต์ของการส่งเนื้อหายังคงไหลลงมาที่หน้าเว็บ.

ใช่มันน่าเกลียดและใช่มันรู้สึกเหมือนเราสูญเสียความก้าวหน้าไปยี่สิบปี ... แต่มันได้ผล.

3. การจัดการ JavaScript

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

สิ่งนี้จะต้องใช้การวิจัยออนไลน์จำนวนมากเพื่อค้นหาวิธีแก้ไขที่ถูกต้อง Aaron Gustafson เขียนโพสต์บล็อกยอดเยี่ยมพร้อมวิธีแก้ไขปัญหาต่าง ๆ เช่นการแทนที่ Ajax ด้วยการรีเฟรชเมตาสำหรับเนื้อหาภายใน iframe.

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

นี่เป็นอีกตัวอย่างหนึ่ง สมมติว่าคุณมีลิงก์ที่โหลดเนื้อหาแบบไดนามิก href value ว่างเปล่าเพราะทุกอย่างโหลดผ่าน JavaScript ด้วยเมธอด PreventDefault ().

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

การปรับปรุงอย่างต่อเนื่องเป็นอะไรที่มากกว่า JavaScript แต่ด้วยการพัฒนาเว็บไซต์ที่ก้าวหน้าขึ้นทุกปีไม่ต้องสงสัยเลยว่า JavaScript มีบทบาทสำคัญ.

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