هل سألت نفسك ، "ما هو تصميم الويب المتجاوب؟" تصميم الويب السريع الاستجابة هو نهج يقوم من خلاله المصمم بإنشاء صفحة ويب "تستجيب لـ" أو تغيير حجمها اعتمادًا على نوع الجهاز الذي يتم رؤيته من خلاله. قد يكون هذا جهاز عرض كمبيوتر مكتبي كبير الحجم أو جهاز كمبيوتر محمول أو أجهزة مزودة بشاشات صغيرة مثل الهواتف الذكية والأجهزة اللوحية.
أصبح تصميم الويب سريع الاستجابة أداة أساسية لأي شخص لديه وجود رقمي. مع نمو الهواتف الذكية والأجهزة اللوحية وغيرها من أجهزة الكمبيوتر المحمولة ، يستخدم عدد أكبر من الأشخاص شاشات أصغر لعرض صفحات الويب.
$config[code] not foundيجب على هذه المواقع أيضًا أن تأخذ في الاعتبار مؤشر الجوّال الأول الذي أعلنت عنه Google للتو في أبريل 2018. مع زيادة عدد الشركات الصغيرة التي تعمل على زيادة تواجدها على الجوّال ، يجب أن يكون موقعها على الويب ، والتجارة الإلكترونية ، وصفحة Google للأعمال ، وصفحات وسائل التواصل الاجتماعي والأصول الأخرى سهلة الوصول عبر جميع الأجهزة.
ما هو تصميم الويب سريع الاستجابة؟
الغرض من التصميم المتجاوب هو امتلاك موقع واحد ، ولكن مع عناصر مختلفة تستجيب بشكل مختلف عند عرضها على أجهزة ذات أحجام مختلفة.
لنأخذ موقع ويب "ثابتًا" تقليديًا. عند عرضها على كمبيوتر سطح المكتب ، على سبيل المثال ، قد يعرض موقع الويب ثلاثة أعمدة. ولكن عند عرض ذلك التخطيط نفسه على جهاز لوحي أصغر ، فقد يجبرك على التمرير أفقيًا ، وهو أمر لا يعجب المستخدمين. أو قد تكون العناصر مخفية من العرض أو تبدو مشوهة. كما أن التأثير معقد بسبب حقيقة أن العديد من الأجهزة اللوحية يمكن مشاهدتها إما في اتجاه عمودي أو تحولها إلى جانب العرض الأفقي.
على شاشة الهاتف الذكي الصغيرة ، يمكن أن تكون مواقع الويب أكثر تحديًا لرؤيتها. الصور الكبيرة قد "تكسر" التصميم. قد تكون المواقع بطيئة التحميل على الهواتف الذكية إذا كانت ثقيلة الرسوم.
ومع ذلك ، إذا كان الموقع يستخدم تصميمًا متجاوبًا ، فقد يتم تعديل إصدار الجهاز اللوحي تلقائيًا لعرض عمودين فقط. بهذه الطريقة ، يكون المحتوى قابلاً للقراءة وسهل التصفح. على الهاتف الذكي ، قد يظهر المحتوى كعمود واحد ، ربما يكون مكدسًا رأسيًا. أو ربما يكون لدى المستخدم القدرة على التمرير السريع لعرض الأعمدة الأخرى. سيتم تغيير حجم الصور بدلاً من تشويه التخطيط أو قطعه.
وتتمثل النقطة التالية: مع التصميم المتجاوب ، يضبط موقع الويب تلقائيًا استنادًا إلى الجهاز الذي يراه المشاهد فيه.
كيف يعمل تصميم الويب سريع الاستجابة؟
تستخدم المواقع سريعة الاستجابة شبكات السوائل.يتم ضبط جميع عناصر الصفحة حسب النسبة ، بدلاً من وحدات البكسل. لذا إذا كان لديك ثلاثة أعمدة ، فلن تقول بالضبط كم يجب أن يكون كل عرض ، ولكن بالأحرى كيف ينبغي أن تكون على نطاق واسع بالنسبة للأعمدة الأخرى. يجب أن يأخذ العمود 1 نصف الصفحة ، ويجب أن يأخذ العمود 2 30٪ ، كما يجب أن يأخذ العمود 3 20٪ ، على سبيل المثال.
يتم أيضًا تغيير حجم الوسائط مثل الصور نسبيًا. وبهذه الطريقة ، يمكن أن تظل الصورة داخل العمود أو عنصر التصميم النسبي.
القضايا ذات الصلة
Mouse v. touch: كما أن التصميم للأجهزة المحمولة يثير مشكلة الماوس في مقابل اللمس. على أجهزة الكمبيوتر المكتبية ، عادة ما يكون لدى المستخدم ماوس للتنقل وتحديد العناصر. على الهاتف الذكي أو الجهاز اللوحي ، يستخدم المستخدم في الغالب أصابع ولمس الشاشة. قد يكون من الصعب تحديد ما قد يكون من السهل تحديده باستخدام الماوس ، وذلك عن طريق الإصبع على نقطة صغيرة على الشاشة. يجب أن يأخذ مصمم الويب "لمسة" بعين الاعتبار.
الرسومات وسرعة التحميل: أيضًا ، هناك مشكلة في الرسومات والإعلانات وسرعة التنزيل. على أجهزة الجوّال ، قد يكون من الحكمة عرض عدد أقل من الرسومات مقارنةً بمشاهدات سطح المكتب ، بحيث لا يستغرق تحميل الموقع أبدًا على الهاتف الذكي. قد يلزم تبديل أحجام الإعلانات الكبيرة للإعلانات الأصغر حجمًا.
التطبيقات و "إصدارات الجوال": في الماضي ، ربما فكرت في إنشاء تطبيق لموقعك على الويب - لنقل تطبيق iPad أو تطبيق Android. أو سيكون لديك إصدار محمول خصيصًا لهاتف BlackBerry.
ولكن مع وجود العديد من الأجهزة المختلفة اليوم ، يصبح من الصعب إنشاء تطبيقات وإصدارات مختلفة لكل جهاز ومنصة تشغيل.
لماذا تحتاج الشركات الصغيرة إلى التبديل إلى تصميم الويب سريع الاستجابة
يستخدم المزيد من الأشخاص الأجهزة المحمولة. دراسة حديثة لـ "بيو" 77٪ من الأمريكيين يمتلكون الآن هواتف ذكية في عام 2018 ، وهي نسبة أعلى من 35٪ فقط في مسح ملكية الهواتف الذكية الأول لمركز بيو للأبحاث في عام 2011.
تحقق من عدد زياراتك وقد تصاب بصدمة بعدد الزوار الذين يزورون موقعك على الويب من خلال أجهزة الجوّال. (في Google Analytics ، حدد "الجمهور" على الجانب الأيمن ، ثم "الجوال" لمعرفة نسبة حركة المرور من أجهزة الجوّال. يمكنك أيضًا الانتقال لأسفل لمعرفة الأجهزة التي ترسل حركة المرور.)
قوالب التصميم المستجيب في كل مكان الآن ، للشراء. إذا كان لديك ، على سبيل المثال ، موقع WordPress ، فيمكنك الانتقال إلى معرض نماذج شهيرة مثل ThemeForest والبحث عن "نماذج ووردبريس سريعة الاستجابة". يمكنك شراء واحدة بسعر أقل من 50 دولارًا. يستطيع مطور الويب الخاص بك تخصيصه لشعارك وعلامتك التجارية.
ملاحظة المحرر: هنا في Small Business Trends ، نحن نعمل على تصميم جديد سريع الاستجابة. لا يجب عليك؟
صورة عبر Shutterstock
أكثر في: تسويق المحتوى ، ما هو 95 تعليقات ▼
