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

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

مع وضع ذلك في الاعتبار ، إليك سبع نصائح لأفضل الممارسات لتصميم الويب سريع الاستجابة.

1. فكر مستجيب

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

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

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

2. انتبه إلى المحتوى

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

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

3. جرب التنقل القابل للتطوير

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

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

4. كل شيء عن الصور

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

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

5. فكر في الطباعة

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

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

6. تحسين شاشات اللمس

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

7. اختبار على الأجهزة الفعلية

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

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