مبادئ تصميم الويب سريع الاستجابة

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

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

في هذه المقالة ، سنتعرف على تصميم الويب سريع الاستجابة والمبادئ الأساسية التي ستساعدك في إنشاء موقع ويب رائع.

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

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

تخطيطات السوائل

باستخدام التخطيط المرن ، يمكنك إنشاء صفحات ويب تتكيف مع عرض إطار العرض وارتفاعه الحاليين. تتضمن الممارسة الشائعة استخدام

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

الوحدات المستجيبة

عندما تنتقل إلى CSS الأكثر تقدمًا ، سترى غالبًا استخدام rem و م وحدات للطول بدلاً من مقصف الوحدات. هذا لأن ملف rem تجعل الوحدة من السهل جدًا قياس التخطيط بأكمله. بشكل افتراضي ، يساوي 1rem 16 بكسل لأنه يتناسب مع حجم خط العنصر ، عادةً 16 بكسل. ومع ذلك ، يمكنك تعيين 1rem يساوي 10 بكسل (أو أي قيمة أخرى) لإجراء عمليات حسابية أسهل ، عن طريق ضبط حجم خط المستوى الأعلى.

صور مرنة

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

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

مبادئ تصميم الويب سريع الاستجابة

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

استخدم نقاط الفصل القائمة على المحتوى

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

اختر خطوط الويب وخطوط النظام بحكمة

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

تحسين الصور النقطية والمتجهات

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

قم بإجراء اختبارات الطية الأولى المستجيبة

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

لا تخفِ المحتوى على الشاشات الصغيرة

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

إدارة التخطيط باستخدام الكائنات المتداخلة

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

تصميم سريع الاستجابة: هل يجب عليك استخدام سطح المكتب أولاً أم استخدام الهاتف المحمول أولاً؟

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

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

أفضل 6 دورات لتعلم تصميم تجربة المستخدم

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

اقرأ التالي

نبذة عن الكاتب