لماذا يجب أن يكون موقع الوب مستجيبًا؟

مقاسات صفحة الويب لمختلف الأجهزة

يهتم التصميم (Responsive Design)  بتغيير مظهر صفحات الموقع لتناسب حجم متصفحات المستخدمين. هذا يعني أن مظهر موقع الويب يجب أن يكون مناسبًا لجميع الأجهزة التي يزور المستخدم الموقع بها (مثل الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وما إلى ذلك).

responsive-كيف يكون لديك موقع متجاوب

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

في التصميم سريع الاستجابة، يجب على مصمم الموقع التفكير في تصميم مناسب لكل حجم صفحة وفقًا لتجربته وإبداعه.


التفاعلية هي تقنية يتغير فيها تصميم الصفحة تلقائيًا وفقًا لحجم المتصفح.

بمعنى أن الموقع مستجيب


لماذا الموقع مستجيب؟

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

سيكون لتفاعل الصفحات أيضًا تأثير كبير على SEO. تولي Google مزيدًا من الاهتمام لمواقع الويب التي تقدر مستخدميها ولديها تصميم جيد لراحتهم! هذا يعني أن فرصك في التواجد في الصفوف الأولى من نتائج البحث تزداد.


اختبار استجابة الموقع

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

اختبار استجابة موقعك الان


كيف يكون لديك موقع الوب متجاوب؟

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


كود جعل الموقع متوافق مع الجوال

1. بمساعدة @media 

بمساعدة media، يمكنك تطبيق أنماط مختلفة على عناصر html في أي حجم لصفحة المتصفح. 


شاهد المتال التالي.

في هذا المثال، حجم الخط في علامة h2 هو 25 بكسل. ولكن بمساعدة الوسائط الموجودة في شاشة الهاتف، تم تغيير الحجم إلى 19 بكسل.


2. استخدم Bootstrap

Bootstrap هو إطار عمل شائع يستخدم HTML و CSS و JQuery  لتعامل مع صفحات الويب. Bootstrap مجاني تمامًا. من خلال إضافة ملفاته إلى مشروعك، يمكنك استخدامه أثناء كتابة كود html. 


3. استخدم W3.CSS

هو إطار عمل CSS يساعد في تصميم صفحات سريعة الاستجابة. أساس هذا الإطار هو الجوّال أولاً بشكل افتراضي (التصميم المستند إلى صفحة المحمول).


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


كلمات مفتاحية: