التصميم المتجاوب هو مصطلح جديد نسبيًا في تصميم الويب. تم صياغتها منذ ثلاث سنوات فقط في مايو 2010 ، عندما استخدم مصمم الويب إيثان ماركوت المصطلح في مقاله للحصول على قائمة وبصرف النظر.
اليوم ، هناك حتى نقاش صغير يدور حول ما إذا كان التصميم المتجاوب موجودًا للبقاء أم أنه مجرد وميض في المقلاة. لن يخبرنا سوى الوقت ، ولكن في الوقت الحالي ، من الواضح أن التصميم المتجاوب يسعى لجعل تجربة المستخدم مريحة قدر الإمكان.
التصميم المتجاوب هو فلسفة تصميم الويب التي تركز على إنشاء مواقع تمنح المستخدمين تجربة مشاهدة محسنة. وهذا يشمل ميزات مثل التنقل والقراءة بسهولة ، والحد الأدنى من تغيير حجم المتصفح ، والتمرير والتحريك. كل هذا يحدث عبر مجموعة من الأجهزة المختلفة ، من أجهزة سطح المكتب إلى الهواتف الذكية.
نظرًا لأن نهج تصميم الويب هذا لا يزال في حالة حديثة ، فقد لا تكون واضحًا تمامًا في ما يتعلق بالتصميم الجاهز. هل يتعلق الأمر بشكل أكثر بساطة بعرض المحتوى عبر أنظمة أساسية متعددة ، أم يتعلق بشكل أساسي بمساعدة الشركات على إنشاء مواقع أكثر جاذبية لزيادة مبيعاتها من خلال تجربة مستخدم أفضل؟
Mashable قد خرج بالفعل على طرف و مسمي 2013 عام التصميم سريع الاستجابة. في حين أن هذا لا يزال ينظر إلى ، بعض الجوانب الأساسية للتصميم الاستجابة هي المعايير التي لن تختفي. فيما يلي أهم حقائق التصميم المتجاوب للتعرّف على نفسك.
سوف يغفر لك التفكير في أن التصميم المتجاوب وتصميم الجوال هما نفس الشيء - ولكنهما ليسا كذلك. من المؤكد أن التصميم المتجاوب يُنشئ مواقع الويب بحيث يستجيب كلاهما لحجم المتصفح ويكون متوافقًا مع الجوّال ، ولكن التصميم المتجاوب هو تصميم الويب بالكامل. تكمن المشكلة في الإشارة إلى نهج تصميم الويب هذا كتصميم الهاتف المحمول في أنه يحدّ بطبيعته ، مما يضر بالنهج نفسه.
قد يتم عرض مواقع الويب الأكثر استجابة بشكل فعال كما كان من المفترض أن تكون ، عبر مجموعة من القرارات. يتضمن هذا كل شيء بدءًا من 1024 × 768 بكسل المعتاد إلى شاشات 1920 × 1080 وكل شيء بينهما. تبدو مواقع مثل هذه رائعة أيضًا على الأجهزة اللوحية (كل من شبكية العين وشاشات العرض القياسية) ، وكذلك على الهواتف الذكية. إذا نظر مصمم الويب إلى التصميم المتجاوب فقط من خلال سياق الجوال ، فمن المحتمل أن يكون قد فاتته تجربة استخدام أوسع.
في الوقت نفسه ، يُعتبر الجوّال نقطة بداية مناسبة تمامًا للمناقشة التصميمية كاملة الاستجابة. لقد كان من المعتاد البدء بمخطط جوّال ثم توسيع هذا التصميم إلى أحجام إضافية عند تطوير موقع ويب سريع الاستجابة. يعتقد الكثير من المصممين أنه من الأسهل زراعة الصور بدلاً من تصغيرها.
إذا كانت هناك قاعدة يجب على مصممي الويب اتباعها ، فإن جودة الصورة هي أكثر أهمية من العدد الفعلي للصور. السبب هو أن الصورة منخفضة الجودة لا تبدو جذابة في أي حجم. إن الوقت الذي يستغرقه الموقع في تحميل صورة لا يقل أهمية عن الحجم. سيتفق مستخدمو الجوال مع هذا لأنهم لديهم عرض نطاق ترددي محدود.
ما هو مصمم الويب أن تفعل؟ ما عليك سوى الوصول إلى توازن ذكي بين وقت التحميل والجودة. يتضمن ذلك تحجيم الصور بخصائص ارتفاع وعرض CSS ، والتخلص من تحميل الصور بالحجم الكامل ، وتحسين الصور للإنترنت. قبل التحميل ، ينصح بشدة اقتصاص أي صور وحفظ كل صورة بأصغر حجم ممكن ، طالما أنها لا تزال تحافظ على جودة بصرية حادة.
الدفع موقع سوني الولايات المتحدة الأمريكية . لاحظ كيف تكون جميع الصور فائقة الجودة ، بغض النظر عن حجمها. بمجرد زيارة الموقع أو تحديث الصفحة الرئيسية ، لاحظ أيضًا مدى سرعة تحميل الصور. لن تضطر إلى الانتظار أكثر من ثانية لكي يصبح كل شيء موضع التركيز بشكل حاد للغاية.
لدى المصممين العديد من الخيارات عند دمج الصور في إعداد متجاوب. يمكنهم فقط استخدام بعض الصور. تقليل استخدام الصور في مخططات الحجم المحمول ؛ السماح للصور بإخفاء أنفسهم في محيط متنقل ؛ أو استخدام مختلف أحجام الملفات وإصداراتها. ستعمل هذه الخيارات بفعالية ، على الرغم من أن بعض المطورين ضد الصور المخفية ، لأن المستخدم سيظل بحاجة إلى تحميل الصور على الرغم من كونها غير مرئية.
النوع يجب ألا يكون مقاس واحد يناسب الجميع. نوع واحد من الخطوط التي تبدو جذابة للعين على سطح المكتب الخاص بك قد يكون فظيعًا على هاتفك الذكي. يجب أن تتبع الطباعة نفس القواعد مثل الجوانب الأخرى للتصميم سريع الاستجابة.
الجانب الأكثر أهمية في الطباعة المتجاوبة هو طول الخط. للحصول على قراءة سلسة ، يجب تحسين النوع بناءً على عرض الشاشة. تتمثل القاعدة الأساسية ، لمواقع سطح المكتب ، في أن ما بين 50 و 75 حرفًا يمثل خطًا مثاليًا ؛ للأجهزة المحمولة ، ما بين 35 إلى 50 حرفًا مثاليًا.
يجب أيضًا قراءة النوع بشكل رأسي بسهولة. تستخدم الكثير من المواقع مساحة سطر تصل إلى 140 بالمائة من حجم نقطة الشاشة للكتل النصية الكبيرة. إذا كانت الشاشة أصغر ، فيجب إضافة المزيد من المساحة.
حتى المحرف المحدد الذي يستخدم هو كبير. تتميز الخطوط الفارهة والخطوط الجديدة بالقدرة على الظهور بمظهر جذاب على شاشات أكبر ، ومع ذلك يصعب قراءتها إذا كان حجم النقطة صغيرًا. يجب أن تحتوي هذه الأنواع من الخطوط على مساحة كبيرة بينها. عندما تعمل بأحجام أصغر ، من الأسهل استخدام أنماط sans serif العادية وحتى السكتات الدماغية.
على موقع Hardboiled Web Design ، يمكنك أن ترى الكثير من هذه المبادئ يتم اتباعها ، مما يجعل الاستجابة الجيدة. لاحظ كيف يتكون طول السطر من النص على سطح المكتب - في المتوسط أكبر من التوصية المثالية من 50 إلى 75 حرفًا - من محرف نظيف وسهل القراءة. بالإضافة إلى ذلك ، تكون مساحة السطر أكبر من حجم نقطة الخط. على أجهزة الجوّال ، تعمل استجابة الموقع بشكل أفضل: على شاشة iPhone 5 ، كان عدد الأحرف في كل سطر 67 تقريبًا ، وهو ما يزيد قليلاً عن القاعدة المثالية التي تتراوح بين 35 و 50 حرفًا.
عندما يتعلق الأمر بتجربة المستخدم - التي تعد واحدة من أهم العوامل التي يجب أن يفكر بها مصممو الويب - فالملاحة في أعلى الأولويات. يجب أن يكون التنقل سلسًا وفعالًا لضمان تجربة مستخدم مريحة.
يجب أن يضمن التصميم الفعال الاستجابة من خلال إضفاء مزيد من الانتباه على العرض المحدد لمتصفح معين. سيعمل الموقع الذي يستخدم التصميم المتجاوب بشكل جيد على تحديد التنقل في موقعه في مناطق مختلفة ، كل ذلك يعتمد على عرض المتصفح. واحدة من أفضل الأمثلة على ذلك حس الغذاء الملاحة في الموقع.
سيكون من الخطأ بالنسبة للتصميم التفاعلي توسيع نطاق التنقل في الموقع إلى نسب أكبر على الأجهزة ذات الشاشات الأكبر.
والآن ، عندما تسمع مصممي مواقع ويب يتحدثون عن تصميم متجاوب ، ستعرف أن الأمر لا يتعلق فقط بإنشاء موقع ويب يبدو جيدًا وتشغيله بسلاسة على شاشات أصغر حجمًا. ستعرف أن أسلوب التصميم هذا يعتمد على مبدأ جعل مواقع الويب من جميع الأحجام توفر أفضل تجربة للمستخدم - بغض النظر عن ما يستخدمه لعرض الموقع.
لا يزال التصميم المتجاوب مفهومًا جديدًا نسبيًا ، على الأقل بالنسبة لمعظم الأشخاص الذين يشاهدون مواقع الويب على الإنترنت فقط. هذا هو السبب في أن الكثير من الناس لا يزالون غير قادرين على الاتفاق على ما يجعل التصميم المستجيب ... تصميم سريع الاستجابة. هل يتعلق الأمر برؤية كل شيء بشكل صحيح على شاشات الجوال؟ هل هو فقط حول أوقات التحميل والصور عالية الجودة التي سوف ترضي العين؟ هل هو تصميم أنيق ومحرف سهلة القراءة؟
كل هذا وأكثر. هذه هي فقط أساسيات نهج تصميم الويب هذا ، ولكن التصميم المتجاوب لا يزال يتطور ويتغير ، لذلك من المفيد أن يتم النظر في عناصر إضافية أيضًا. في النهاية ، يتعلق الأمر بتعزيز تجربة المستخدم ، لأن لا أحد يريد التعامل مع موقع ويب بطيء أو ضبابي أو يصعب قراءته أو ازدحامه أو صعوبة في التنقل.
هل التصميم سريع الاستجابة هو الاتجاه؟ ما هي الجوانب الرئيسية للتصميم الاستجابة؟ دعنا نعرف أفكارك في التعليقات.