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

في دليلنا لتصميم الويب سريع الاستجابة ، سنناقش أهم نقاط النهج المتوافق مع الجوّال وسنرافقك خلال العملية الأساسية لجعل موقعك مستجيبًا تمامًا.

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

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

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

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

لماذا هو مهم؟

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

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

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

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

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

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

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

الآن ، دعنا نرى المكونات الرئيسية لتصميم الويب سريع الاستجابة هي. هناك ثلاثة منهم.

1. تخطيطات مرنة

إنشاء موقع بشبكة مرنة لإعادة ترتيبها وتحجيمها حسب حجم الشاشة وأبعادها.

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

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

2. صور مرنة

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

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

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

img {
 أقصى عرض: 100٪ ؛
 العرض: 100٪؛
}

3. استعلامات الوسائط

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

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

فيما يلي بعض نقاط فصل استعلام وسائط CSS العملية لتساعدك كثيرًا:

/ * مخصص ، iPhone Retina * / 
شاشةmedia only و (min-width: 320px) {
/ * أنماط مخصصة * /
}
/ * الأجهزة الصغيرة جدًا ، الهواتف * / 
شاشةmedia only و (min-width: 480px) {
/ * أنماط مخصصة * /
}
/ * الأجهزة الصغيرة والأجهزة اللوحية * /
شاشةmedia only و (الحد الأدنى للعرض: 768 بكسل) {
/ * أنماط مخصصة * /
}
/ * الأجهزة المتوسطة وأجهزة الكمبيوتر المكتبية * /
شاشةmedia only و (min-width: 992px) {
/ * أنماط مخصصة * /
}
/ * أجهزة كبيرة ، شاشات عريضة * /
شاشةmedia only و (min-width: 1200px) {
/ * أنماط مخصصة * /
}

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

/ * الهواتف الذكية (عمودي وأفقي) ----------- * /
شاشةmedia only و (min-device-width: 320px) و (max-device-width: 480px) {
/ * الأنماط * /
.button {display: none}
}