19 دروسًا مفيدة حقًا لتصميم الويب سريع الاستجابة

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

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

01. كيف تبدأ التفكير باستجابة

دروس تصميم الويب سريع الاستجابة: كيف تبدأ التفكير بشكل متجاوب



كيفية تنعيم الصورة في الفوتوشوب
ادخل إلى حالة ذهنية سريعة الاستجابة(رصيد الصورة: FreeCodeCamp)

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

02. 9 نصائح الطباعة سريعة الاستجابة

دروس تصميم الويب سريعة الاستجابة: 9 نصائح للطباعة سريعة الاستجابة

احصل على نصائح سريعة الاستجابة من الخبراء(رصيد الصورة: آدم بانكس)

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

03. قواعد طباعة الويب سريعة الاستجابة

قواعد طباعة الويب سريعة الاستجابة

اتبع هذه النصائح للحصول على طباعة الويب سريعة الاستجابة بشكل صحيح

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

04. تصميم موقع سريع الاستجابة مع التحجيم القائم على em

صمم موقعًا سريع الاستجابة مع تغيير الحجم على أساس em

قم ببناء صفحاتك بحيث لا ينكسر التصميم إذا تغير حجم الخط

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

05. أدلة الأولوية: بديل المحتوى أولاً للإطارات السلكية

أدلة الأولوية: بديل المحتوى أولاً للإطارات السلكية

تعرف على سبب وجوب استخدام أدلة الأولوية بدلاً من الإطارات الشبكية

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

06. دليل المحترفين لتصميم الويب سريع الاستجابة

المؤيد

أنشئ مواقع أفضل لأي جهاز باستخدام هذا الدليل

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

07. كيفية تصميم أشكال مستجيبة وغير محددة الجهاز

نماذج مستجيبة تتكيف مع الأجهزة المختلفة

تأكد من عمل النماذج الخاصة بك ، مهما كان الجهاز

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

08. قم بإنشاء تخطيط سريع الاستجابة باستخدام CSS Grid

مصمم يقوم بإنشاء موقع ويب CSS Grid

قم ببناء موقع محفظة رائع المظهر ومناسب لجميع إطارات العرض

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

09. دليل مصمم الويب إلى Flexbox

تم وضع علامة على أعمدة Flexbox 1 2 3 4 5 مع سهم يوضح أن المحور الرئيسي أفقي

ابدأ مع Flexbox

هل بدأت في استخدام Flexbox حتى الآن؟ في هذا البرنامج التعليمي يقدم Wes Bos ملف دليل شامل إلى المفاهيم الأساسية التي ستمنحك فهمًا قويًا لكل ما تحتاجه للتعامل مع هذه الأداة القوية.

10. مرجع Codrops Flexbox

تقول لقطة شاشة Codrops

دليل كامل لسارة سويدان

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

11. الأكوام: Flexbox للرسم

تقول لقطة شاشة المقالة المتوسطة

احصل على إمكانات Flexbox داخل Sketch

توفر Stacks ، وهي جزء من المكون الإضافي Auto Layout ، طريقة لك لاستخدام تقنية Flexbox داخل Sketch ، دون استخدام CSS. هذه المقالة يشرح كيف يمكنك الاستفادة من هذه التقنية القوية لتصميم سهل الاستجابة.

12. دورة مكثفة في تقنية RWD

دورة مكثفة في لقطة شاشة تصميم ويب سريع الاستجابة

تعرف على أساسيات تصميم الويب سريع الاستجابة

عند الكتابة على مدونة Treehouse ، قام Jerry Cao بتكثيف الكثير من المعلومات المفيدة في مقالة قصيرة نسبيًا وقابلة للقراءة.

13. إنشاء تخطيطات مرنة باستخدام Susy و Breakpoint

تعرض شاشات الجهاز تخطيطًا سريع الاستجابة لموقع الويب يتناسب مع كل نسبة

ملحقات Sass لرعاية الرياضيات المستجيبة

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

14. كيفية إنشاء أدلة سريعة الاستجابة في Adobe XD

أدلة سريعة الاستجابة يتم إجراؤها في Adobe XD

Adobe Experience Design (XD) هو أداة UX والنماذج الأولية

إذا كنت حريصًا على التجربة تصميم تجربة Adobe (XD) هنا تعليمي جيد لتبدأ. يتضمن عرضًا توضيحيًا بالفيديو يأخذك خلال كل نقرة للعملية.

15. CSS في بي بي سي سبورت

لقطة شاشة لموقع بي بي سي سبورت

خفيف الوزن CSS لموقع كبير سريع الاستجابة

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

لقطة شاشة لـ CSS Tricks تبدأ المقالة بـ

طرق تذييل كريس كويير اللاصقة

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

17. التكيف مع المدخلات

يعرض الجدول تصميمات نصية مريحة ودافئة ومضغوطة على أحجام شاشات مختلفة

تأكد من أن موقعك سريع الاستجابة يمكنه قبول الإدخال من أي نوع من الأجهزة

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

18. تقتل أفضل ممارساتنا أداء ويب الجوّال

لقطة شاشة لقراءة المقال

يجب أن تعمل اعتبارات الأداء مع الأجهزة المحمولة أيضًا

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

19. كيفية إنشاء تطبيقات ويب سريعة الاستجابة مع استعلامات الحاوية

شاشات بأبعاد مختلفة تعرض مقياسًا لنموذج تطبيق الويب

تعرف على كيفية جعل مقياس الوسائط الخاص بك باستخدام استعلامات الحاوية

تعرف على كيفية تحويل تطبيق ويب جميل ومعقد - بمكونات وحالات وتفاعلات - عبر أبعاد ودقة مختلفة ، باستخدام Querie حاوية .

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