Content Marketingفيديوهات التسويق والمبيعاتالرسوم البيانية التسويقيةتسويق الأجهزة المحمولة والأجهزة اللوحية

ما هو التصميم المستجيب؟ (فيديو توضيحي وإنفوجرافيك)

لقد استغرق الأمر عقدًا من الزمان تصميم مواقع الإنترنت استجابة (RWD) للذهاب إلى التيار الرئيسي منذ ذلك الحين قدم كاميرون آدمز لأول مرة المفهوم في عام 2010. كانت الفكرة بارعة - لماذا لا يمكننا تصميم مواقع تتكيف مع منفذ عرض الجهاز الذي يتم عرضها عليه؟

ما هو تصميم استجابة؟

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

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

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

تصميم متجاوب استعلامات إطار عرض CSS

فيما يلي مثال على ورقة الأنماط التي تقوم بضبط حجم الخط بناءً على إطار العرض باستخدام استعلام وسائط:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

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

يعتبر العمل بعقلية الجوال أولاً هو المعيار الأساسي اليوم. لا تفكر أفضل العلامات التجارية في فئتها فقط في ما إذا كان موقعها متوافقًا مع الجوّال ولكن في تجربة العملاء الكاملة.

لوسيندا دنكالف ، الرئيس التنفيذي لشركة Monetate

إليك مخطط معلومات من Monetate لتوضيح الفوائد المحتملة لإنشاء تصميم واحد سريع الاستجابة لأجهزة متعددة:

مخطط معلومات تصميم ويب سريع الاستجابة

هل موقعك مستجيب؟

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

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

  • أدوات مطور الكروم تستجيب للكمبيوتر اللوحي
  • أدوات مطور الكروم تستجيب أفقيًا للجوال
  • أدوات مطور الكروم تستجيب للهاتف المحمول
  • أدوات مطور الكروم تستجيب لسطح المكتب

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

Douglas Karr

Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

مقالات ذات صلة

العودة إلى الزر العلوي
اغلاق

كشف Adblock

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