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

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

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

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

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

ويكيبيديا

بمعنى آخر ، يمكن تعديل عناصر مثل الصور وكذلك تخطيط تلك العناصر. إليك مقطع فيديو يشرح ماهية التصميم سريع الاستجابة بالإضافة إلى سبب وجوب قيام شركتك بتطبيقه. لقد قمنا مؤخرًا بإعادة تطوير ملف DK New Media ليكون سريع الاستجابة وتعمل الآن عليه Martech Zone لفعل نفس الشيء!

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

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

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

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

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

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

إذا كنت ترغب في رؤية موقع سريع الاستجابة قيد التنفيذ ، فقم بتوجيه جوجل كروم متصفح (أعتقد أن Firefox لديه نفس الميزة) DK New Media. الآن اختر عرض> المطور> أدوات المطور من القائمة. سيؤدي هذا إلى تحميل مجموعة من الأدوات في الجزء السفلي من المتصفح. انقر على أيقونة الهاتف المحمول الصغيرة في أقصى يسار شريط قائمة أدوات المطور.

استجابة-اختبار-الكروم

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

3 تعليقات

  1. 1
  2. 2

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

    • 3

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

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.