ข้อผิดพลาดที่คุณน่าจะทำไปแล้วในฐานะนักออกแบบเว็บไซต์

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

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

การใช้แฟลช

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

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

การใช้รูปภาพขนาดใหญ่จริงๆ

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

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

• GruntJS-ImageMin
• ImageOptim

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

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

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

W3C ทำงานโดยใช้ “ <picture> ” เป็นองค์ประกอบ HTML5 ซึ่งจะทำให้สามารถเรียกรูปภาพที่มีขนาดต่างกันได้ตามความกว้างของหน้าจอการรับชม เมื่อสิ่งนี้เกิดขึ้น ประสบการณ์จะดีขึ้นมากสำหรับผู้ดู แต่คุณควรหลีกเลี่ยงรูปภาพที่ใหญ่ขึ้นจนกว่าคุณจะนำไปปฏิบัติ

ใช้ความกว้างและความสูงคงที่

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

ตั้งสมมติฐานเกี่ยวกับ Design Fits

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

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

การใช้เอฟเฟกต์และแอนิเมชั่นมากเกินไป

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

มีปัญหาใหญ่สองประการที่เกี่ยวข้องกับการใช้แอนิเมชั่นและเอฟเฟกต์มากเกินไป:

• เวลาในการโหลดหน้าเพิ่มขึ้น
• เอฟเฟกต์และแอนิเมชั่นจะเป็นปัญหาสำหรับคอมพิวเตอร์รุ่นเก่า

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

ลิงค์จัดแต่งทรงผมไม่ถูกต้อง

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

ไม่ใช้ DRY ใน CSS

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

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

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

ย่อยสลายอย่างสง่างาม

เราสามารถกำหนด Graceful Degradation ได้ว่าเป็นแนวทางปฏิบัติในการสร้างฟังก์ชันการทำงานของเว็บที่สามารถนำเสนอระดับประสบการณ์ผู้ใช้เฉพาะในเบราว์เซอร์ที่ทันสมัย ​​ในขณะที่ลดระดับประสบการณ์ผู้ใช้ให้ต่ำลงในเบราว์เซอร์รุ่นเก่า ฟังดูซับซ้อนเล็กน้อย แต่สำหรับตัวอย่าง เราสามารถพูดคุยเกี่ยวกับการสนับสนุน Internet Explorer 8 และ 7 คุณจะต้องแปลกใจเมื่อรู้ว่าผู้ใช้ส่วนใหญ่ไม่อัปเดตเบราว์เซอร์เป็นระยะเวลานาน ด้วยเหตุนี้ คุณต้องเพิ่มการลดลงอย่างสง่างามเพื่อให้การสนับสนุนที่เหมาะสมสำหรับเบราว์เซอร์ทั้งสองเวอร์ชัน

เว็บไซต์สมัยใหม่พัฒนาได้ง่าย แต่ในเวลาต่อมา คุณอาจสังเกตเห็นว่าในเบราว์เซอร์รุ่นเก่า หน้าต่างๆ จะดูแย่เนื่องจากการขึ้นต่อกันบางอย่าง

การเพิ่มประสิทธิภาพแบบก้าวหน้า

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

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

ปัญหาการนำทาง – ไม่เป็นมิตรกับผู้ใช้

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

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

ขาดสมาธิกับเนื้อหา

“Form Follows Function” เป็นหลักการทางสถาปัตยกรรมทั่วไปที่ปรากฏในศตวรรษที่ 20 ในระหว่างขั้นตอนการออกแบบอุตสาหกรรมสถาปัตยกรรมสมัยใหม่ นี่เป็นหลักการที่คุณต้องจำไว้ตลอดเวลาในการออกแบบเว็บ

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

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

บทสรุป

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

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

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