أفضل ممارسات تصميم الويب لمشروع موقع الويب الخاص بك التالي

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

ما الذي يسبب التناقض الكبير بين ما يتقاضاه بعض مطوري وورد بريس مقارنة بالآخرين ؟ تتطلب الإجابة عن هذا السؤال النظر في السبب وراء رغبتك في إنشاء موقع ويب في المقام الأول.

يركز بعض المطورين على المنتج النهائي الحرفي: مزيج من الكود ينتج عنه تصميم موقع ويب ممتع بدرجة كافية.

لكن المطورين ذوي الخبرة التسويقية يهتمون بأكثر من مجرد بناء شيء يبدو لطيفًا. إنهم يعملون كمستشارين للعملاء الذين يتطلعون إلى تحقيق أهداف محددة من خلال مواقعهم على الويب.

أفضل ممارسات تصميم الويب

يرتبط تصميم الويب ارتباطًا وثيقًا بأهداف عملك

مع وضع ذلك في الاعتبار ، فإن تعيين شخص ما لإنشاء موقع ويب لا يبدو مهتمًا به / لا يطرح أسئلة حول أهدافك النهائية يعد علامة حمراء . من المهم توضيح حقيقة أنه حتى أجمل تصميم ويب قد لا يكون مثاليًا عندما يتعلق الأمر بجذب الزوار للتحويل إلى عملاء.

ومع ذلك ، فإن 94٪ من الأشخاص يحكمون على مصداقيتك بناءً على تصميم موقع الويب الخاص بك.

لذا ، بدلاً من ذلك ، تحتاج إلى التركيز على استخدام التصميم الخاص بك لتقديم تجربة مستخدم مثالية. يجب أن تجعل من السهل على الزائرين العثور على المعلومات التي سعوا إليها من خلال زيارة موقع الويب الخاص بك في المقام الأول أثناء توجيههم نحو أنشطة تحويل الهدف .

تركز أفضل ممارسات تصميم الويب هذه على التقاطع بين إنشاء موقع ويب جميل وآخر يخدم عملك.

هل تفضل مشاهدة نسخة الفيديو ؟

ما الذي يحدد أفضل ممارسات تصميم الويب؟

من المؤكد أن كل فرد وأمهاتهم لديهم آراء حول ما يشكل موقعًا مصممًا جيدًا.

تصميم الويب لا يقتصر فقط على الجماليات. إنه عالم أكثر تعقيدًا حيث يجب أن ترتبط كل من UX وإمكانية الوصول وأهداف العمل. تحقق من أفضل ممارسات تصميم الويب هذه! ✍️🔝

انقر للتغريد

لكن دعونا نكبح جماح آراء الجميع بالإذعان للخبراء.

وفقًا لـ Orbit Media ، يمكنك تجميع أفضل ممارسات تصميم الويب في هذه الفئات الأساسية الثلاث من المعايير:

معايير العلامة التجارية: قد تكون أكثر دراية بالإشارة إلى نفس مفهوم “العلامة التجارية” أو “أدلة الأنماط” أو “لوحات المزاج”. تتضمن هذه المعايير أي شيء له علاقة بكيفية ظهور موقع الويب وتتضمن استخدام الألوان والطباعة والعناصر الخاصة بنشاط تجاري معين.

معايير الترميز: يجب بناء مواقع الويب وفقًا لمعايير البرمجة المتفق عليها من قبل W3C ، المجتمع الدولي الذي يعمل معًا لتطوير معايير الويب.

معايير الوصول : الوصول إلى المعلومات هو حق أساسي من حقوق الإنسان ، وقد أقرته اتفاقية الأمم المتحدة لحقوق الأشخاص ذوي الإعاقة. بالإضافة إلى ذلك ، فإن إتاحة الوصول إلى موقعك له آثار إيجابية – ليس فقط على المبيعات ولكن أيضًا على تحسين محركات البحث . يشارك W3C قائمة أساسية بالمعايير التي تحتاج إلى اتباعها لتصميم موقع ويب يمكن الوصول إليه . سنشرح بالتفصيل أفضل ممارسات تصميم الويب ذات الصلة لاحقًا في هذه المقالة.

لنلقِ نظرة على كيفية تطوير ممارسات تصميم الويب بناءً على كل معيار من هذه المعايير:

معايير العلامة التجارية

يمكن لمواقع الويب التي تفتقر إلى علامة تجارية متسقة أن تكون مرهقة للتفاعل معها والتسبب في حدوث ارتباك. على هذا النحو ، لا ينبغي أن يكون مفاجئًا أن حوالي 38 ٪ من الزوار قالوا إنهم سيتوقفون عن التعامل مع موقع الويب إذا كان المحتوى أو التصميم غير جذاب.

مع الأخذ في الاعتبار أن المظهر ليس كل شيء ، فإليك بعض مبادئ التصميم الأساسية التي يجب مراعاتها لإنشاء موقع ويب يرغب الأشخاص في استخدامه:

الرصيد

التوازن هو مبدأ التصميم الذي يصف كيفية توزيع العناصر المرئية بشكل فعال. بشكل عام ، يبدو التصميم المتوازن نظيفًا وطبيعيًا وله تناسق جيد (على الرغم من أن هذا ليس بالضرورة شرطًا للتوازن ).

يمكنك دمج التوازن في تصميم الويب من حيث تخطيط الصفحة.

يُعد توسيط النص أو العناصر الأخرى عبر الصفحة طريقة سهلة للقيام بذلك. بشكل عام ، يتم إنشاء صفحات الويب على نظام الشبكة ، مما يخلق شكلاً من أشكال التوازن. يمكنك استخدام خاصية CSS float لتحديد موضع العناصر وتحقيق التوازن بينها عبر الصفحة.

يمكن تحقيق التوازن بثلاث طرق:

1. تصميم متماثل

تصميم ويب متماثل

مثال على التصميم المتماثل

ترتيب العناصر بطريقة متساوية عبر صفحة الويب. على سبيل المثال ، إذا كان لديك عنصر ثقيل على اليسار ، يجب أن يكون لديك عنصر ثقيل على اليمين. كما ذكرنا سابقًا ، يعد التمركز أسهل طريقة لتحقيق التناظر ، ولكنه قد يكون أحيانًا مسطحًا أو مملًا.

لتجنب جعل الصفحة تبدو رتيبة ، يمكنك إنشاء توازن باستخدام عناصر مختلفة ، مثل الموازنة بين صورة كبيرة وكتلة نصية. يوجد أيضًا نوع من التوازن المتماثل يسمى التوازن الشعاعي ، حيث تشع الأجسام من نقطة مركزية.

2. تصميم غير متماثل

تصميم غير متماثل

مثال على التصميم غير المتماثل

أكثر صعوبة في القيام بعمل جيد ، يتضمن التصميم غير المتماثل التوزيع غير المتكافئ للعناصر على الصفحة. على سبيل المثال ، قد يكون لديك عنصر كبير في المركز ، والذي يتم موازنته بعنصر أصغر بعيدًا.

يمكنك استخدام عناصر أخرى من التصميم ، مثل اللون أو الملمس ، لموازنة التصميم غير المتماثل.

3. عدم التوازن

تصميم غير متوازن

مثال على تصميم غير متوازن

توحي هذه الأنواع من التصميمات بالحركة والعمل ، مما قد يجعل الناس غير مرتاحين. إذا كان موقع الويب الخاص بك ينوي جعل الناس يفكرون ، فإن التصميم غير المتوازن يناسبك.

تكوين

يشير مصطلح التكوين إلى وضع عناصر التصميم وتنظيمها.

تكوين

تكوين

تُستخدم قاعدة الأثلاث بشكل شائع لإنشاء تكوين متوازن ، خاصة مع الصور.

تباعد

يجب تباعد العناصر بالتساوي حتى يتمكن المستخدمون من التمييز بين الأقسام أو الكتل.

أهمية التباعد في تصميم الويب

دور التباعد في تصميم المواقع

يجب عليك أيضًا إدخال مسافة سلبية أو المسافة بين موضوع الصورة وحوله. يمكن أن تقلل المساحة السلبية من الضوضاء البصرية ، وتزيد من إمكانية القراءة ، وتحقق التوازن.

يمكنك إدخال مساحة سلبية عن طريق إضافة هوامش وتركيب حول عناصر التصميم الخاصة بك.

النقطة المحورية

لفت الانتباه إلى عنصر واحد

لفت الانتباه إلى عنصر واحد

قم بإنشاء منطقة تركيز حيث تريد جذب الانتباه. يجب أن يكون الجزء الأكثر أهمية في صفحتك ، ومن الناحية المثالية ، يجب أن تركز كل صفحة على نقطة محورية رئيسية واحدة فقط .

اللون

يعد اللون عنصرًا مهمًا في التصميم عندما يتعلق الأمر بالعلامة التجارية. من الناحية المثالية ، أنت تدخل في عملية تصميم الويب بفهم مخطط ألوان موقع الويب الذي تريد ربطه بعلامتك التجارية.

بالنسبة لتصميم الويب على وجه التحديد ، من المفيد أن تبدأ بلوحة مزاجية لعلامتك التجارية.

مثال على لوحة ألوان Kinsta

مثال على لوحة ألوان Kinsta

اختر لونًا أساسيًا وثانويًا (يمكن أن يكمل اللون الثانوي اللون الأساسي أو يتناقض معه ) ، ولونًا أفتح وأغمق لكل منهما. قلل من استخدامك للألوان حتى لا تصبح لهجات مختلفة قبيحة للعين.

يوفر Adobe Color أداة مجانية ممتازة لاختبار مجموعات متنوعة من الألوان لإنشاء لوحة عمل لعناصر موقع الويب.

أيضًا ، عند اتخاذ قرار بشأن اللون ، من المهم مراعاة الأشخاص المصابين بعمى الألوان ، والتي تضم ما يصل إلى 4.5٪ من سكان العالم .

مثال على كيف سيبدو التصميم العادي للمستخدمين المكفوفين بالألوان

مثال على كيف سيبدو التصميم العادي للمستخدمين المكفوفين بالألوان

هناك ثلاثة أنواع من عمى الألوان (العمى الكلي للألوان ، والرؤية ثنائية اللون ، ورؤية الألوان الضعيفة) لذا تأكد من أن التصميم الخاص بك لا يزال قابلاً للاستخدام في الاعتبار لأولئك الذين قد لا يكونون قادرين على التمييز بين الألوان.

التباين

أثناء اختيار اللون ، من المهم أن تكون مدركًا لنسب اللون والتباين .

يشير تباين الألوان إلى اختلاف الضوء بين المقدمة والخلفية. يسمح استخدام الألوان المتباينة بدرجة كافية بتمييز رؤية موقع الويب بسهولة. بشكل عام ، استخدم خيارات ألوان عالية التباين – مثل نص أسود على خلفية بيضاء – لجعل موقعك قابلاً للقراءة.

يمكن أن يكون التباين السيئ مشكلة

يمكن أن يكون التباين السيئ مشكلة

نسبة التباين هي القيمة العددية المخصصة للاختلاف في التباين بين عناصر الصفحة.

توصي إرشادات إمكانية الوصول إلى المحتوى العالمي (WCAG) 2.0 بنسبة تباين تبلغ 4.5: 1 للنص العادي. يشارك WebAIM عددًا قليلاً من المجموعات المحددة مسبقًا التي تناسب نسبة التباين المثالية لمساعدتك على تصور أفضل ممارسات تصميم الويب هذه.

للمساعدة في التنقل باستخدام هذه النسبة ، تأكد من أنه عند تصميم موقع الويب الخاص بك ، فإنك تتخيل جميع الجماهير (بما في ذلك أولئك الذين يعانون من مشكلات في إمكانية الوصول). من الأسهل القيام بذلك مقابل التخطيط لمعالجة هذه المشكلات بعد وقوعها.

النظر في جميع جوانب الناس الموقع سوف يكون التفاعل معها، بما في ذلك الرؤوس والتذييلات ، القوائم – وكلها تحتاج إلى أن تكون مرئية بسهولة لتكون صالحة للاستعمال.

تتضمن بعض الأدوات التي يمكنك استخدامها للتحقق من نسب تباين الألوان ما يلي:

مدقق تباين الألوان بواسطة Level Access.

نسبة التباين .

أداة مدقق تباين الألوان WCAG 2.0 AA و AAA ، والتي تستند إلى إرشادات WCAG 2.0.

الطباعة

طباعة الموقع هو اعتبار مهم آخر للعلامة التجارية.

في حين أن هناك العديد من المصادر المختلفة للعثور على الخطوط المحتملة لاستخدامها على موقع الويب الخاص بك ، ستحتاج أولاً إلى التفكير في الخيارات التي سيتم عرضها باستمرار بغض النظر عن الخطوط التي قام المستخدم النهائي بتثبيتها على أجهزة الكمبيوتر الخاصة به.

تقدم Google Fonts مجموعة متنوعة من الخطوط المجانية الآمنة للويب التي يمكنك الاعتماد عليها لعرضها بشكل صحيح ، بغض النظر عن الخطوط / البرامج المثبتة لدى المستخدم. تأكد من تضمين الخطوط في لوحة الحالة الخاصة بك لمعرفة ما إذا كانت تتطابق مع جمالية اللون.

إذا كنت تواجه مشكلة في إنشاء مجموعات ، فيمكن أن تقترح Google Fonts عمليات الاقتران الشائعة. يمكنك أيضًا استخدام موقع مثل FontPair للحصول على اقتراحات.

حاول تحديد أوزان الخط التي تستخدمها ، حيث إن الاضطرار إلى تحميل عدد كبير جدًا من الملفات يمكن أن يساهم في إبطاء سرعة الصفحة. في هذه الملاحظة ، ضع في اعتبارك استضافة Google Fonts محليًا لتقديم مزايا أداء إضافية.

مكدس الطباعة المثالي مقابل مكدس التصنيف الضعيف

الطباعة السيئة مقابل الطباعة المثالية

عندما يتعلق الأمر بتحديد عناصر الطباعة استنادًا إلى أفضل ممارسات تصميم الويب ، كقاعدة عامة ، استخدم خطوط sans-serif للعناوين وخطوط serif للمحتوى. كحد أدنى ، لا تستخدم الخطوط الزخرفية لمحتوى الجسم ، حيث سيكون من الصعب قراءتها.

أيضًا ، لا تميل إلى استخدام مجموعة متنوعة من الخطوط المختلفة على موقع الويب الخاص بك. من القواعد الأساسية الجيدة استخدام خط لشعارك وآخر لقوائمك / عناوينك وخط آخر لمحتوى الجسم. في هذه الملاحظة ، حاول إقران الخطوط التي تكمل بعضها البعض ، مثل تلك الموجودة في عائلة الخطوط نفسها.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

التسلسل الهرمي للعنصر

يشير التسلسل الهرمي إلى ترتيب عناصر التصميم التي تعرض الأهمية النسبية. يتم تحقيق ذلك من خلال معالجة عناصر مثل التباين المرئي والحجم والمواضع لجذب الانتباه.

أفضل ممارسات تصميم الويب

مثال على التسلسل الهرمي للعنصر

على سبيل المثال ، يجب تقسيم المحتوى إلى كتل منطقية حتى يتمكن المستخدمون من تمييز الأقسام عن بعضها البعض.

يمكنك القيام بذلك من خلال استخدام رؤوس المحتوى ، والتي لا تسهل فقط على المستخدمين التخطي إلى الأجزاء التي يريدون قراءتها ، ولكن أيضًا تقسم كميات كبيرة من النص إلى أجزاء قابلة للقراءة حتى تتمكن برامج قراءة الشاشة من تحديد السياق من كل قسم.

إذا كنت تبحث عن بعض الرسوم التوضيحية المرئية المفيدة لمفاهيم التصميم هذه والمزيد ، فإن مدونة Tilda Publishing تغطي بعضًا من أكثر أخطاء تصميم صفحات الويب شيوعًا وكيفية إصلاحها.

أفضل ممارسات تصميم / تنسيق الويب

وفقًا لبحث أجرته Orbit Media ، هناك بعض معايير تصميم الويب الشائعة التي لوحظت في أفضل 50 موقعًا للتسويق.

أفضل الممارسات لتصميم الويب

معايير تصميم الويب

تعني “المعايير” أن 80٪ من مواقع الويب تستخدم نهج تصميم مماثل:

الشعار في الزاوية اليسرى العليا.

التنقل الأفقي الرئيسي عبر الجزء العلوي من كل صفحة.

عرض القيمة مرتفع في الصفحة الرئيسية الموجودة “في الجزء المرئي من الصفحة”. لاحظ أن معظم مصممي الويب سيخبرونك أنه لا يوجد ارتفاع قياسي للبكسل للمتصفحات ، ولا يوجد “طي” من الناحية الفنية. ولكن بشكل عام ، يجب أن تظهر عناصر التصميم المهمة في مكان مرتفع في الصفحات المرئية بشكل عام لغالبية الزوار ، حتى بدون التمرير.

فيما يلي بعض أفضل ممارسات تصميم الويب لعناصر الموقع الشائعة:

الصور

يمكن أن تكون أفضل ممارسات تصميم الويب لاستخدام الصور مصدر إلهام للعديد من النصائح ولكن دعنا نركز على الحد الأدنى في هذه المناقشة حول أفضل ممارسات تصميم الويب:

إضافة نص ALT. صور لا يمكن معالجتها باستخدام قارئات الشاشة إلا إذا تم استخدام النص ALT. تساهم إضافة نص ALT أيضًا في تحسين محركات البحث ، لكن بعض الأشخاص يستخدمون نص ALT فقط لتكملة إستراتيجية الكلمات الرئيسية الخاصة بهم. قد يكون الاستخدام الأكثر فائدة لنص ALT هو وصف الصورة – على الرغم من أنه يمكنك بالتأكيد إرضاء عناكب البحث وقارئات الشاشة في نفس الوقت بالطريقة الصحيحة.

يميل استخدام الصور التي تظهر الوجوه البشرية إلى أن يكون أكثر فاعلية من الرسومات أو الرسوم المتحركة الأخرى. إنه يجعل الناس أكثر عرضة للتفاعل مع الصورة ، حيث ينجذب البشر إلى ما يعتبرونه تعاطفًا حقيقيًا وعواطف.

استخدم الصور المتجاوبة ، والتي تنمو أو تتقلص حسب حجم المتصفح . هذا يساعد في كل من سرعة الموقع وتحسين محركات البحث.

لا تنسى أبدًا الرموز المفضلة . الرموز المفضلة هي الرموز الصغيرة التي تظهر بجوار عنوان موقع الويب وفي نتائج البحث أيضًا. يساعد في التعرف على العلامة التجارية ويعزز تجربة المستخدم للموقع.

تصفح الموقع

يتوقع المستخدمون أن يتمكنوا من العثور بسهولة على المحتوى الذي يبحثون عنه على الموقع. وبالتالي ، من المهم أن يكون التنقل في موقع الويب بسيطًا ومباشرًا.

التنقل في موقع الويب هو مصطلح عام يشير إلى بنية الارتباط الداخلية لموقع الويب . لا تنس أن الغرض الرئيسي من التنقل هو مساعدة المستخدمين في العثور بسهولة على المحتوى ذي الصلة على موقع الويب الخاص بك.

تشكل بنية الروابط الداخلية لموقعك أساس ملف Sitemap الخاص بك ، مما يساعد محركات البحث في الوصول إلى المحتوى الخاص بك بشكل أسهل. لقد وجد أن وجود موقع جيد التصميم حيث يسهل العثور على المحتوى يؤثر بشكل إيجابي على حركة مرور موقع الويب التي ستحصل عليها من محركات البحث (إلى جانب فرصة أكبر للحصول على روابط أقسام موقع Google ).

التنقل في القائمة

هناك العديد من الجوانب التي تشكل التنقل في موقع الويب ، ولكن يجب أن يكون التركيز الأساسي على قائمتك العلوية / الرئيسية لأنها ستكون واحدة من أول الأشياء التي يتفاعل معها المستخدمون عند زيارتهم لموقع الويب الخاص بك.

هناك طرق مختلفة لاستدلال تصميم قائمة مواقع الويب ، لكن أكثرها شيوعًا تشمل:

قائمة التنقل

من الناحية المثالية ، يقع هذا في مقدمة ووسط موقع الويب. قد يتضمن ذلك استخدام قائمة منسدلة إذا كانت هناك عدة فئات. ومع ذلك ، لا يُنصح بالقوائم المنسدلة ، خاصةً عندما يتعلق الأمر بتحسين محركات البحث الفني (يصعب الزحف إليها). بالإضافة إلى ذلك ، فقد وجد أن معظم الناس لا يحبون القوائم المنسدلة .

هذا لأن العين البشرية تعمل بشكل أسرع من اليد ، ولذلك يجدها الناس مزعجة عندما يقررون بالفعل ما ينقرون عليه وينخفض ​​شيء آخر – مما قد يؤدي إلى انخفاض في عدد الزيارات إلى الصفحات.

قائمة همبرغر

يتم استخدام قائمة الهامبرغر بشكل أساسي لتصميم محسّن للجوّال ، وعادةً ما توجد قائمة الهامبرغر في أعلى الجانب الأيسر أو الأيمن من الصفحة. يظهر كمربع بثلاثة أسطر يمكن توسيعها بنقرة واحدة. ومع ذلك ، فإن العديد من المصممين يحتقرون قائمة الهامبرغر ، التي ألهمت مطوري الويب للنظر في طرق جديدة لجعل تصفح مواقع الويب للجوال ممتعًا وعمليًا.

هل سئمت من مواجهة مشكلات مع موقع وورد بريس الخاص بك؟ احصل على أفضل وأسرع دعم استضافة مع Kinsta! تحقق من خططنا

فيما يلي بعض النصائح لتصميم التنقل استنادًا إلى أفضل ممارسات تصميم الويب:

أضف شريط بحث لمساعدة المستخدمين في العثور على المحتوى بسهولة (إليك كيفية تحسين وظيفة البحث في وورد بريس ). هذا مفيد بشكل خاص لمواقع الويب التي تحتوي على الكثير من المحتوى ، مثل مدونة الأخبار.

صمم موقعك باتباع قاعدة النقرات الثلاث ، والتي تنص على أنه يجب أن يتمكن المستخدمون من العثور على المعلومات المطلوبة بما لا يزيد عن ثلاث نقرات بالماوس. هذا لأن المستخدمين يفضلون بالفعل التنقل عبر الموقع بدلاً من البحث في نتائج البحث ، عندما يكون ذلك ممكنًا.

اجعل عناوين قائمتك وصفية (مع وضع الكلمات الرئيسية في الاعتبار) ، مما يساعد المستخدمين في العثور على العناصر بشكل أسهل ويساهم أيضًا بشكل إيجابي في تحسين محركات البحث.

موضع عناصر القائمة مهم. ضع أهم الصفحات في مقدمة القائمة بحيث يسهل الوصول إليها.

احتفظ بعناصر القائمة بحد أقصى 7 ، ليس فقط للحفاظ على تصميم الموقع نظيفًا ولكن أيضًا لأن وجود عدد كبير جدًا من فئات عناصر القائمة يمكن أن يؤثر على قدرتك على الترتيب في البحث. قد تفسر Google هذه الفئات التي تبدو غير مرتبطة على أنها علامة على أن موقع الويب الخاص بك لم يقرر مكانًا معينًا.

للحصول على تنسيق أكثر ملاءمة ، إليك مخطط معلومات مفيد:

أفضل ممارسات تصميم الويب

أفضل ممارسات تصميم الويب للتنقل في القائمة

معايير الترميز

مع وجود العديد من مواقع الويب التي تم إنشاؤها واستهلاكها على مستوى العالم ، هناك بالتأكيد حاجة إلى مجموعة موحدة من مبادئ الترميز. تتضمن بعض جوانب معايير الويب هذه:

SEO

يمكن استخدام مُحسّنات محرّكات البحث لزيادة عدد زوار موقعك بشكل عضوي (دون استخدام الإعلانات). منذ الأمر معقد جدا لحفر نحو كاف في SEO في القسم الفرعي واحد صغير من مقال، تحقق من SEO المرجعية والنصائح ل أفضل SEO الإضافات لورد للتآلف مع هذا الجانب من أفضل الممارسات تصميم مواقع الإنترنت.

لاحظ أن نصائح معايير الترميز التالية تعمل جنبًا إلى جنب مع مُحسنات محركات البحث.

استجابة المحمول

يهتم التصميم سريع الاستجابة بإنشاء تجربة مستخدم رائعة ، بغض النظر عن الجهاز أو المتصفح المستخدم للوصول إلى موقع الويب الخاص بك.

من المهم اليوم أكثر من أي وقت مضى تصميم موقع الويب الخاص بك ليكون سريع الاستجابة ، حيث أن أكثر من 60 ٪ من مستخدمي الإنترنت يصلون إلى الإنترنت عبر هواتفهم المحمولة ، ويتم نصف معاملات التجارة الإلكترونية من خلال منصات الهاتف المحمول. إضافة إلى ذلك ، تعطي خوارزمية البحث الجديدة من Google الأولوية أيضًا للمواقع المتوافقة مع الجوّال .

الرسم المتجاوب

مثال على التصميم سريع الاستجابة

لا يساعد امتلاك موقع متجاوب المستخدمين على التنقل في موقعك بسهولة فحسب ، بل يساهم أيضًا في زيادة التفاعل والتحويلات. يوصي المستخدمون بالعلامات التجارية التي يتمتعون معها بتجربة إيجابية على الموقع المتجاوب مع الأجهزة المحمولة ، وعلى العكس من ذلك ، لن يتوقفوا فقط عن الشراء من العلامات التجارية التي تتمتع بتجربة سيئة على موقع الجوّال ، بل سيثني أيضًا الآخرين عن القيام بذلك.

ومع ذلك ، على الرغم من الطلب على موقع سريع الاستجابة ، يقدر أن 91٪ من الشركات الصغيرة ليس لديها موقع . يجب عليهم – لأن تصميم موقع ويب سريع الاستجابة للجوال يؤتي ثماره بالتأكيد. أبلغت 62٪ من الشركات عن زيادة في المبيعات بعد تصميم موقع متوافق مع الأجهزة المحمولة.

اقرأ على مورد Kinsta حول كيفية جعل موقعك أكثر ملاءمة للجوال ، والذي يتضمن قائمة بأفضل المكونات الإضافية للجوال وورد بريس لتنزيلها ، وتأكد من مراجعة هذه القائمة المنسقة لأفضل سمات وورد بريس ، حيث يمكنك تصفح الكثير من الموضوعات سريعة الاستجابة.

تقدم Google أيضًا بعض النصائح حول كيفية تصميم موقع ويب سريع الاستجابة .

أمن الموقع

ممارسة أخرى مهمة في الترميز؟ إنشاء برامج ومواقع آمنة يمكن للمستخدمين الوثوق بها فيما يتعلق بمعلوماتهم الشخصية الحساسة. خلافًا للاعتقاد الشائع ، لا يبحث المتسللون بنشاط عن مواقع ويب معينة لاختراقها ، وهذا هو السبب في أن حتى المواقع الصغيرة تكون عرضة للهجوم .

معلومات

تقدم Kinsta ضمانًا أمنيًا مع كل خطة ، وفي حالة حدوث شيء سيء ، سيقوم متخصصو الأمن بإصلاح موقعك.

بشكل عام ، يعد وورد بريس آمنًا بشكل عام ، ولكنه يساعد في اتخاذ احتياطات إضافية للحفاظ على موقع الويب الخاص بك آمنًا ضد الهجمات.

فيما يلي بعض من أفضل ممارسات أمان مواقع الويب:

احصل على شهادة SSL ، والتي تعتبر مهمة بشكل خاص للمواقع التي تتعامل مع المدفوعات والمعلومات الشخصية. تقوم شهادة SSL بتشفير المعلومات المرسلة عبر الشبكات بحيث يجد المتسللون صعوبة في فك تشفيرها. إلى جانب ذلك ، فهو معيار صناعي. ينبه Chrome الزوار عندما لا يحتوي الموقع الذي يزوره على شهادة SSL. بالإضافة إلى ذلك ، يتجاهل Chrome الآن إصدارات TLS القديمة ويبدأ في عرض تحذيرات إضافية.

يعد تمكين HTTPS (جزء من تثبيت شهادة SSL) عامل ترتيب رسمي من Google.

حافظ على بيانات اعتماد تسجيل الدخول الخاصة بك آمنة. تحدث العديد من الهجمات عن طريق قراصنة يحاولون الوصول بقوة إلى موقع ويب. يساعد في الحصول على صفحة تسجيل دخول منفصلة / مخفية (استخدم المكون الإضافي WP Hide Login ) والحد من عدد محاولات تسجيل الدخول. استخدم المكون الإضافي Login LockDown ، الذي يسجل عنوان IP والطابع الزمني لكل محاولة تسجيل دخول فاشلة ويغلق وظيفة تسجيل الدخول إذا تم الوصول إلى عدد المحاولات الفاشلة من نفس نطاق IP في فترة زمنية قصيرة. أيضًا ، قم بإنشاء كلمة مرور آمنة تتكون من أكثر من 6 أحرف وهي مزيج من الأحرف الكبيرة والصغيرة والأرقام والأحرف الخاصة. غيّر كلمة مرورك كثيرًا. يمكنك أيضًا استخدام المصادقة ذات العاملين لتسجيل الدخول إذا كنت تبحث عن أمان إضافي.

حافظ على تحديث وورد بريس الأساسي والإضافات والسمات. لا تنس تنزيل المكونات الإضافية أو السمات من مصدر حسن السمعة. علامة جيدة هي ما إذا كان المكون الإضافي / السمة به عمليات تثبيت متعددة وتم تحديثه مؤخرًا. يجب عليك أيضًا قراءة المراجعات لتقرر بنفسك ما إذا كان المكون الإضافي جديرًا بالثقة (تأكد من التحقق من تلك المدرجة هنا ). في هذه الملاحظة ، قم بتنزيل مكون إضافي للأمان في وورد بريس مثل Wordfence أو Sucuri أو Defender ، حيث يمكن اكتشاف 73.2٪ من تثبيتات وورد بريس الأكثر شيوعًا والمعرضة للخطر باستخدام أدوات آلية مجانية . فيما يلي قائمة أكثر تعمقًا لأفضل المكونات الإضافية للأمان .

استخدم مضيف ويب آمن. بالنسبة لأولئك الذين ليسوا على دراية ، قد لا يبدو أن مضيف الويب الخاص بك له علاقة بأمن الموقع ، ولكن 41٪ من الهجمات تحدث من خلال ثغرة أمنية على نظام الاستضافة. ابحث عن موفر استضافة يتضمن ميزات مثل: جدار الحماية والتشفير من جانب الخادم ، وخوادم الويب NGINX أو Apache ، وبرامج مكافحة الفيروسات والبرامج الضارة ، وأنظمة الأمان في الموقع ، وتوافر شهادات SSL و CDN.

لمزيد من المعلومات حول أمان وورد بريس ، تحقق من موردنا الشامل حول كيفية الحفاظ على أمان موقع وورد بريس الخاص بك .

سرعة الصفحة

يتوقع حوالي نصف المستخدمين تحميل الموقع في ثانيتين أو أقل ، وإذا استغرق الأمر وقتًا أطول من ذلك ، فلن يتردد 40٪ من الأشخاص في الارتداد من الصفحة (على الأرجح) ولن يعودوا أبدًا.

إلى جانب زيارات موقع الويب ، تعد سرعة الصفحة مهمة لأنها تؤثر أيضًا على التحويل والإيرادات. مقابل كل ثانية من سرعة تحميل الصفحة المضافة ، ستنخفض المبيعات بنسبة تصل إلى 27٪ . يمكن أن تؤدي زيادة سرعة موقع الويب إلى منع فقدان 7٪ من التحويلات المحتملة .

فيما يلي بعض الطرق لجعل صفحات الويب الخاصة بك يتم تحميلها بشكل أسرع:

استخدم شبكة توصيل المحتوى (CDN) ، والتي تأخذ ملفات ثابتة مثل الصور و CSS وجافا سكريبت ، وتسلمها على الخوادم الأقرب إلى الموقع الفعلي للمستخدم .

ضع في اعتبارك كيفية استخدام الصور. يستخدم متوسط ​​موقع الويب 1.8 ميجا بايت من الصور ، وهو ما يمثل 60٪ من حجم الموقع . للمساعدة في ذلك ، أعد النظر في كيفية تخطيط صفحة الويب الخاصة بك. إذا كنت ترغب في الحفاظ على سرعة الصفحة بسرعة ، فحاول تقليل عدد الصور الكبيرة المستخدمة في تصميمك وتأكد من تحسينها .

إذا احتاج موقع الويب الخاص بك إلى استخدام الكثير من الصور الكبيرة ، فاستخدم المكونات الإضافية التي تتضمن وظائف لضغط GZIP أو التخزين المؤقت أو تحسين الصور ، مثل WP Rocket و Imagify . يمكنهم المساعدة في تصغير حجم ملفاتك (دون التضحية بالجودة) بحيث يتم تحميلها بشكل أسرع.

ضع في اعتبارك عدد المكونات الإضافية والملفات التي تحتفظ بها في قاعدة بيانات وورد بريس الخاصة بك لأنها يمكن أن تؤثر أيضًا على سرعة تحميل الصفحة. نظف تلك التي لا تستخدمها. أثناء تواجدك فيه ، حافظ على تحديث PHP و وورد بريس core والمكونات الإضافية إلى أحدث إصداراتها .

تحقق من مواردنا الشاملة لتحسين سرعة الموقع .

معايير الوصول

تم تصميم الإنترنت للعمل مع جميع الأشخاص ، بغض النظر عن الأجهزة أو البرامج أو اللغة التي يستخدمونها أو قدرتهم أو موقعهم. ومع ذلك ، فإن الكثيرين يضحون بإمكانية الوصول من أجل تصميم جميل.

معايير الوصول

الوصول هو مفتاح لكل موقع

تشير إمكانية الوصول إلى ممارسة جعل موقع الويب الخاص بك قابلاً للاستخدام من قبل الجميع .

إلى جانب الأشخاص ذوي الإعاقة الذين يؤثرون على الوصول ، يقول W3 أن إمكانية الوصول إلى موقع الويب مفيدة أيضًا لـ:

أولئك الذين يستخدمون أجهزة ذات شاشات صغيرة ، وأنماط إدخال مختلفة ، وما إلى ذلك.

كبار السن.

الأشخاص الذين يعانون من “إعاقات مؤقتة” بما في ذلك كسر في أحد الأطراف أو فقدان نظارات أو حالة طبية.

المستخدمون الذين يعانون من “قيود ظرفية” ، مثل أولئك الذين يدخلون إلى الإنترنت على أجهزة في ضوء الشمس الساطع أو في بيئة لا يمكنهم فيها الاستماع إلى الصوت ، مثل وسائل النقل العام.

الأفراد الذين لديهم اتصال بطيء بالإنترنت.

يجب أن تكون إمكانية الوصول مصدر قلق الجميع ، لأننا جميعًا نتأثر بها بطريقة ما.

أسباب تجعل الوصول إلى موقعك متاحًا

هل ما زلت غير متأكد من أنه يستحق قضاء وقتك في إمكانية الوصول في هذه المناقشة حول أفضل ممارسات تصميم الويب؟

ضع في اعتبارك هذه الأسباب:

إنه أحد متطلبات ADA. صدر قانون الأمريكيين ذوي الإعاقة (ADA) في عام 1990 لحماية الحقوق المدنية للأشخاص ذوي الإعاقة من التمييز. وهي تغطي أشياء مثل النقل والاتصالات والتوظيف وحتى قوانين البناء. منذ أن تم تمرير هذا القانون قبل ما يقرب من 30 عامًا – وهو الوقت الذي لم يكن فيه الإنترنت موجودًا في كل مكان – يسعى المشرعون إلى تعديله .

يعزز الشمولية. أظهر استطلاع أجراه مركز بيو للأبحاث أن الأشخاص ذوي الإعاقة هم أقل عرضة بثلاث مرات للاتصال بالإنترنت من نظرائهم من غير ذوي الإعاقة ، وهو أمر مخزٍ لأن الإحصائيات تظهر أن حوالي 30٪ من المهنيين يعانون من إعاقة ، مع 62٪ من ذوي الإعاقة. “الطيران تحت الرادار” خوفا من التحيز السلبي.

سوف يساعدك على كسب المزيد من الأعمال. من خلال كونك أكثر شمولاً ، ستجلب شبكة من الأشخاص ذوي الإعاقة ، والتي تمثل 7 تريليون دولار من الدخل المتاح

فوائد تحسين محركات البحث. تكافئ محركات البحث مواقع الويب المتوافقة مع إمكانية الوصول من أجل تشجيع المزيد من المواقع على الوصول إليها.

كيفية جعل موقع الويب الخاص بك أكثر سهولة

هناك طريقة سهلة لجعل الوصول إلى موقع الويب الخاص بك أكثر سهولة وهي تثبيت المكون الإضافي WP Accessibility ، والذي يضيف ميزات إمكانية الوصول بما في ذلك:

شريط أدوات حيث يمكن للمستخدمين تغيير حجم الخطوط وعرض موقعك بتباين عالي وتدرج رمادي.

مقارنة تباين الألوان للتحقق مما إذا كان يناسب معيار ADA.

إزالة سمات العنوان من الصور المدرجة في المحتوى. لا تستطيع معظم برامج قراءة الشاشة الإحساس بهذا وقراءة نص الرابط بدلاً من ذلك.

تمكين روابط التخطي ، وهي روابط صفحات داخلية تتيح للمستخدمين التخطي مباشرة إلى المحتوى ، وهو أمر مفيد للأشخاص الذين يستخدمون برامج قراءة الشاشة.

بعض الخطوات الإضافية التي يجب اتخاذها:

أضف ترجمات مصاحبة أو نص إذا كان موقعك ينتج وسائط مثل الصوت والكتب الصوتية ومقاطع الفيديو والبودكاست وما إلى ذلك ، لإفادة الصم / البكم ، وكذلك الأشخاص الذين يرغبون في استهلاك المحتوى الخاص بك ولكن لا يمكنهم استخدام الوسائط في الأماكن العامة.

أنشئ روابط وقوائم يمكن الوصول إليها من خلال لوحة المفاتيح للأشخاص الذين يعانون من إعاقات حركية ويمكنهم فقط استخدام لوحة المفاتيح (وليس الماوس) للتنقل في موقعك. لا يُنصح باستخدام القوائم المنسدلة ، ولكن يمكنك تصحيح ذلك عن طريق تعيين اختصارات لكل عنصر من عناصر القائمة المنسدلة (مثل: الضغط على “1” للصفحة الرئيسية ، و “2” للصفحة “حول” ، وما إلى ذلك).

أخيرًا ، اختبر موقعك للوصول إلى موقع الويب. لا تؤيد مبادرة الوصول إلى الويب أي أداة محددة ولكنها تقدم بدلاً من ذلك قائمة بالأدوات التي يمكنك استخدامها لتدقيق جهودك.

الأفكار النهائية: أفضل ممارسات تصميم الويب لمشروع موقع الويب التالي

لا ينبغي تحديد مواقع الويب الجيدة من خلال التصميم الجيد الموضوعي. لا تقل أهمية عن سهولة استخدام الموقع وسهولة التنقل وإمكانية الوصول. مسلحًا بأفضل ممارسات تصميم الويب هذه ، لديك كل ما تحتاجه لإنشاء شيء يبدو ويعمل بشكل جيد .

تصميم الويب لا يقتصر فقط على الجماليات. إنه عالم أكثر تعقيدًا حيث يجب أن ترتبط كل من UX وإمكانية الوصول وأهداف العمل. تحقق من أفضل ممارسات تصميم الويب هذه! ✍️🔝

انقر للتغريد

فقط ضع في اعتبارك أن هذه هي أفضل ممارسات تصميم الويب . من المحتمل أنك لن تكون قادرًا على متابعة كل واحد بالضبط ، اعتمادًا على طبيعة موقع الويب الخاص بك. ولكن قبل أن تتمكن من كسر القواعد ، من المفيد على الأقل أن تدرك سبب وجودها.

هل فقدنا أي شيء مهم؟ شارك أفضل ممارسات تصميم الويب في التعليقات أدناه!

قراءة مقترحة: أفضل دورات تصميم مواقع الإنترنت عبر الإنترنت

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.

توضيح

اي عملية نسخ او اقتباس او ترجمة او نقل تم لاغراض علمية وتدريبية وتعليمية بحته وقد تم انشاء هذا المحتوى بمعرفة خبراء في مجال التقنية اما عن طريق إنشاء او تحرير او نقل او نسخ او اقتباس او ترجمة المحتوى من مصادر خاصة او عامة وكل ذلك ضمن حقوق النشر المتعارف عليها.

اي أخطاء تظهر في المحتوى مهما كان نوعه او تصنيفه يمكنك تحرير رسالة فورية لادارة موثوق لاجل تصحيح هذه الاخطاء، وسنكون شاكرين لك في حال قمت بالتعاون معنا لاجل اصلاح هذه الاخطاء.

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}