Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Responsive Web Design
Business

13 نصائح تصميم ويب استجابة سريعة & الخدع لعام 2018

by
Length:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
How to Make Responsive Business Websites With Templates
20 Best Responsive HTML5 Website Design Business Templates

Arabic (العربية/عربي) translation by Ike purnaniwati (you can also view the original English article)

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

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

كيفية تنفيذ تصميم ويب استجابة

النصائح التالية لتصميم موقع ويب للجوال وتصميم استجابة سوف تساعدك على التأكد من أن موقع الويب الخاص بك استجابة والمتنقلة ودية جداً. إليك بعض النصائح لدينا أفضل لتصميم ويب استجابة:

1. تعلم كيفية استخدام الزوار موبايل

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

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

2-خطة التصميم الخاص بك أولاً

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

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

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

3-أن تكون حذراً بالتنقل

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

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

4-تحسين الصور

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

هذا يعني أنه يجب حفظ الصور بالتنسيق المناسب - JPG للصور الفوتوغرافية أو الصور ذات المناظر الخلابة و PNG-8 للرموز والشعارات التي تتطلب خلفية شفافة. علاوة على ذلك ، يجب عليك تقليل حجم الصورة باستخدام أداة مثل TinyJPG والنظر في استخدام الصور المحسنة لمختلف نقاط التوقف المتنقلة لتقليل مشاكل القياس والنطاق الترددي.

TinyPNG

5. النظر في نهج المحمول الأول

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

6. تعلم كيفية استخدام استعلامات وسائل الإعلام

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

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


7. إضافة مشغلات لوحة المفاتيح في أشكال

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

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

8-ضمان أزرار يمكن النقر على شاشات أصغر حجماً بسهولة

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

تأكد من السهل التعرف الأزرار الخاصة بك:

  • استخدام الألوان لجعلها تبرز من بقية الصفحة.
  • استخدام مستطيل أو دائرة لتمثيل الزر.

بقدر ما يذهب الحجم ، ضع في الاعتبار استخدام الحشو على الزر الخاص بك لزيادة المساحة القابلة للنقر. يمكنك أيضًا اتباع توصية التصميم متعدد الأبعاد لإمكانية الوصول إلى الزر والتأكد من ارتفاعها إلى 36dp. (1dp = 1px).

9-تحسين الطباعة

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

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

10-استخدم ميكروينتيراكشنز

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

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

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

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

Le Cafe Noir Sudio website

11-اعتماد أطر

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

Bootstrap

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

Responsive WordPress themes

12-التمسك بتصميم الحد الأدنى

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

13-جعل متأكد من أزرار الأسهم الخاصة بك ليست حجب المحتوى الخاص بك

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

كيفية معرفة ما إذا كان موقع الويب الخاص بك استجابة

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

1-الجوال الصديق من جوجل

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

2-سكرينفلي

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

Screenfly

3-MobileTest.me

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

MobileTestme

المضي قدما مع هذه الحيل تصميم ويب استجابة ونصائح

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.