-
كيف يمكننا أن نجعل موقع الويب أفضل وأكثر ملاءمة لمعايير W3C ونحصل على تجربة مستخدم جيدة؟ هذه مشكلة يواجهها العديد من منتجي صفحات الويب، وهي أيضًا شيء يريد الجميع معرفته، وقد انتهى مشرف موقع Netgather إلى النتائج التالية في العمل العملي طويل الأمد، آمل أن يكون مفيدًا للجميع، يرجى انتقاده وتصحيح أي أوجه قصور.
1. فهم موضوع الموقع وتوضيح المحتوى المعروض على الموقع وغالبية مجموعات التصفح
إذا كنت ترغب في إنشاء موقع ويب مفيد للمستخدمين، فيجب عليك أولاً التفكير في محتوى موقع الويب ووظائفه. ما الذي يحتاجه المستخدمون؟ كيف يمكنهم العثور على ما يريدون بسرعة وسهولة أثناء التصميم بأكمله؟ وينبغي القيام بكل شيء حول هذا الجانب. إذا لم يتمكن المستخدمون من الحصول على ما يريدون بسرعة، أو لم يكن موقعك سهل الاستخدام، فهذا يعني أن الموقع فاشل. سيشعر المستخدمون بخيبة أمل وقد لا يقومون بتسجيل الدخول إلى موقع الويب الخاص بك مرة أخرى. مثال صغير: إذا كنت تريد إنشاء موقع ويب للأسهم، ولكن حجم خط الموقع هو 12 بكسل، فكر في الأمر، فعدد كبار السن الذين يتقاعدون في المنزل ويضاربون في الأسهم ليس عددًا صغيرًا، حتى لو كان موقعك على الويب بغض النظر عن مدى جودة المحتوى أو وضوحه، فمن المستحيل عليهم حمل عدسة مكبرة إلى الشاشة وإلقاء نظرة على موقع الويب الخاص بك، وستكون النتيجة خسارة عدد كبير من المستخدمين.
2. مطابقة الألوان بشكل معقول
بالنسبة لمصمم الويب، تكون عملية التصميم مؤلمة وممتعة في نفس الوقت. بعد معرفة نوع موقع الويب الذي تريد إنشاءه، سيتعين عليك إجراء عملية اختيار الألوان والتخطيط لتعكس الموضوع بشكل أكثر منطقية. شخصيًا، أعتقد أنه إذا لم تكن تنشئ موقعًا مخصصًا للغاية، فإن مطابقة الألوان لن تكون مهمة صعبة. أولا، تحديد اللون الرئيسي. في الواقع، خصائص الصناعة للألوان ليست مهمة جدًا، إن تصور الناس للصناعة فقط هو الذي يخلق العلاقة بين الصناعة ومطابقة الألوان في الواقع، يتعلق الأمر بإدراك الناس، لأننا اعتقدنا أن اللون الأحمر كان لونًا احتفاليًا وبالتالي غير مناسب لدار الجنازة. على سبيل المثال، اللون الأزرق أفضل بشكل عام للمواقع الإلكترونية أو التكنولوجيا، والوردي أفضل للمواقع النسائية، وما إلى ذلك. ثانيًا، الألوان المساعدة وألوان التشطيب لتأكيد اللون الرئيسي لموقع الويب، تكون الألوان المساعدة وألوان التشطيب مطلوبة أيضًا. تستخدم الألوان المساعدة في الغالب نفس مجموعة الألوان ومجموعات الألوان المجاورة. ويتم الحصول على مطابقة الألوان نفسها عن طريق تغيير شفافية اللون الرئيسي أو تشبعه أو تفتيحه أو تغميقه، وتعتمد مطابقة الألوان المجاورة على اللون الرئيسي عن طريق أخذ الألوان المجاورة على عجلة الألوان، مثل الأحمر والبرتقالي. يختلف اللون النهائي بشكل عام عن اللون الرئيسي، ويتم استخدامه بشكل عام في المحتوى أو الأزرار الأكثر أهمية لصفحة الويب. وتتمثل وظيفته في جذب انتباه المستخدم وإزالة التعب البصري لصفحة الويب بشكل معقول لتجنب الكثير من المظهر، وإلا فإنه سيؤدي إلى نتائج عكسية.
3. تخطيط جيد للويب
العناصر التي يجب استيعابها في تخطيط صفحة الويب هي الأولويات الواضحة، والتنسيق والترتيب، واحترام العادات البصرية للمستخدمين، والترتيب المعقول للمحتوى. اعرض ما يريده المستخدمون أولاً قدر الإمكان، وانتبه إلى سلوكيات المستخدم الإرشادية المحتملة. كما يقول المثل: الذاكرة الجيدة ليست جيدة مثل القلم السيئ عند تصميم واجهة موقع ويب، يجب علينا أولاً استخدام قلم رصاص لرسم تخطيط موقع الويب، ثم استخدام برنامج الرسم لإنشاءه وتعديله بعد تحقيق الهدف. التأثير المطلوب. تحدد التفاصيل النجاح أو الفشل في عروض التصميم، استخدم أقل عدد ممكن من الكتل الملونة الكبيرة، وقم بتمييز التنقل، واحصل على أقسام واضحة لتحقيق تأثير واضح وموجز وأنيق ومنسق. على سبيل المثال، يجب إضافة شريط التنقل بشكل مناسب باستخدام تأثير الماوس؛ ويجب أن تتجنب خطوط صفحة الويب الكثير من الاختلاف في اللون؛ ويجب ألا يكون المخطط التفصيلي والظل واضحًا جدًا، إذا كان موجودًا أم لا، فهو مناسب يجب أن تكون المسافات بين أقسام صفحة الويب معقولة وموحدة؛ ويجب أن تكون أنماط النص من نفس المستوى موحدة، ويجب احترام الخصائص الفيزيائية للحياة اليومية (على سبيل المثال، يصبح الضوء أكثر سطوعًا). جانب واحد وأفتح من الجانب الآخر، أو مثل شريط يلتف حول جسم ما، يجب أن تكون نقطة التحول بارزة قليلاً ولها ظل مستدير دقيق)...
بعد تأكيد إنتاج عروض صفحة الويب، سنبدأ في إنتاج صفحة html.
4. عنوان صفحة الويب والفوقية
يجب أن يعتمد عنوان صفحة الويب وبياناتها التعريفية على الأعمدة الأساسية وصفحات المحتوى. لا تستخدم نفس التنسيق للموقع بأكمله. لا تحتاج إلى إضافة كلمات رئيسية، وهو ما لا يؤثر كثيرًا على محركات البحث تكديس الكلمات الرئيسية.
5.استخدام علامات h1-h6
لا يمكن استخدام علامة h1 لصفحة الويب إلا مرة واحدة. في الصفحة الرئيسية وصفحة القناة وصفحة القائمة لموقع ويب، يمكن استخدام علامة h1 لاسم موقع الويب واسم القناة واسم قائمة الأعمدة على التوالي، ومع ذلك، في صفحة تفاصيل المقالة لموقع ويب، يجب أن تكون علامة h1 لاستخدامها في عنوان المقال. يمكن استخدام علامات h2-h6 بشكل متكرر على الصفحة، بما يتوافق مع التسلسل الهرمي لموقع الويب بدوره.
6. ملفات CSS
حاول استيراد ملفات CSS من الخارج باستخدام الروابط، واكتب ملفsetting.css الذي تستخدمه غالبًا لإعادة ضبط نمط CSS. تجنب استخدام *{}. اكتب نمطًا واحدًا في سطر واحد لتقليل حجم الملف. حاول استخدام تعريفات الفئة وتقليل تعريفات المعرفات. حاول تجنب تقنيات اختراق CSS للمتصفحات المختلفة.
7. تحسين الصور الخلفية
بالإضافة إلى المحتوى الفعلي لموقع الويب، يجب تحديد الصور المستخدمة في الإطار في ملف CSS قدر الإمكان، وفقًا للوضع الفعلي، يجب دمج صورة الخلفية قدر الإمكان لتحسين سرعة التحميل. من الأفضل عدم تجانب صورة صغيرة جدًا على مساحة أكبر.
8.div+css تخطيط لتقليل تداخل الصفحات
الغرض من استخدام تخطيط div+css هو تقليل رمز الصفحة، وجعل بنية موقع الويب هرمية، وفصل المحتوى والعرض التقديمي. إن تقليل التداخل ليس أمرًا صديقًا لمحركات البحث فحسب، بل يساعد أيضًا في تقليل حجم الصفحة ويجعل الصيانة والتعديلات اللاحقة أسهل.
9. تحسين صفحة js
يتم دمج ملفات JS التي يمكن دمجها في ملف واحد، مما يقلل من الحلقات واسعة النطاق والمراجع الهرمية المفرطة، ويحسن سرعة التحميل والتشغيل.
10. تجنب الروابط الميتة والاتصالات الفارغة
كم سيكون الأمر محبطًا بالنسبة للمستخدمين إذا نقروا على مقالة يريدون فتحها فقط "لا يمكن عرض هذه الصفحة".
11. النص والرسومات المناسبة
لا تملأ موقع الويب الخاص بك بالصور بشكل متعمد. لا تتعرف محركات البحث على الصور باستثناء السمة البديلة. يمكن أن تساعد إضافة الصور في المواقع المناسبة في جذب الزوار والتخلص من تعب قراءة النصوص الطويلة.
12. متطلبات صور صفحة الويب
قم بإضافة سمات بديلة وسمات العرض والارتفاع إلى صور صفحة الويب. لا تقم بضغط الصور عمدًا لضمان عدم تشويه عرض الصورة.
13. اختبر موقع الويب الخاص بك في متصفحات مختلفة.
من أجل السماح لمزيد من الأشخاص بتصفح موقع الويب الخاص بك بشكل طبيعي، يرجى اختبار صفحتك باستخدام متصفحات رئيسية مختلفة للتأكد من إمكانية تشغيل موقع الويب الخاص بك بشكل طبيعي.
14. تم اجتياز التحقق من W3C.
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
المساحة الشخصية للمؤلف الطماطم