คุณควรใส่ใจอะไรเมื่อสร้างเว็บไซต์ที่ยอดเยี่ยม?

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

1. เข้าใจธีมของเว็บไซต์ ชี้แจงเนื้อหาที่แสดงบนเว็บไซต์และกลุ่มเรียกดูส่วนใหญ่

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

2. การจับคู่สีที่เหมาะสม

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

3. รูปแบบเว็บที่ดี

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

หลังจากยืนยันการผลิตการเรนเดอร์หน้าเว็บแล้ว เราจะเริ่มการผลิตหน้า html

4.ชื่อเว็บเพจและเมตาดาต้า

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

5. การใช้แท็ก h1-h6

แท็กหน้าเว็บ h1 สามารถใช้ได้เพียงครั้งเดียว ในหน้าแรก หน้าช่อง และหน้ารายการของเว็บไซต์ สามารถใช้แท็ก h1 สำหรับชื่อเว็บไซต์ ชื่อช่อง และชื่อรายการคอลัมน์ ตามลำดับ อย่างไรก็ตาม ในหน้ารายละเอียดบทความของเว็บไซต์ ต้องใช้แท็ก h1 นำไปใช้ในชื่อบทความ แท็ก h2-h6 สามารถใช้ซ้ำๆ บนหน้าเว็บได้ โดยเป็นไปตามลำดับชั้นของเว็บไซต์ตามลำดับ

6.ไฟล์ CSS

ลองนำเข้าไฟล์ css จากภายนอกโดยใช้ลิงก์ และเขียน reset.css ที่คุณมักใช้เพื่อรีเซ็ตสไตล์ css หลีกเลี่ยงการใช้ *{} เขียนหนึ่งสไตล์ในหนึ่งบรรทัดเพื่อลดขนาดไฟล์ พยายามใช้คำจำกัดความของคลาสและลดคำจำกัดความของรหัส พยายามหลีกเลี่ยงเทคนิคการแฮ็ก CSS สำหรับเบราว์เซอร์ที่แตกต่างกัน

7. การเพิ่มประสิทธิภาพภาพพื้นหลัง

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

8.div+css เค้าโครงเพื่อลดการซ้อนหน้า

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

9. เพิ่มประสิทธิภาพเพจ js

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

10. หลีกเลี่ยงลิงก์เสียและการเชื่อมต่อที่ว่างเปล่า

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

11. ข้อความและกราฟิกที่เหมาะสม

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

12. ข้อกำหนดสำหรับรูปภาพหน้าเว็บ

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

13. ทดสอบเว็บไซต์ของคุณในเบราว์เซอร์ต่างๆ

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

14. ผ่านการตรวจสอบ W3C

http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri

พื้นที่ส่วนตัวของผู้เขียน มะเขือเทศ