عند تصميم موقع الويب الخاص بك ، من المهم التأكد من أنه يبدو رائعًا على أي جهاز ، بغض النظر عن حجم الشاشة وشكلها. تم تصميم مواقع الويب المتجاوبة لتبدو جيدة على جميع أنواع الأجهزة الحديثة مثل أجهزة الكمبيوتر والهواتف والأجهزة اللوحية وأجهزة التلفزيون والأجهزة القابلة للارتداء وحتى شاشات السيارات. لجعل موقع الويب مستجيبًا ، ستحتاج إلى تعديل كود CSS و HTML لتغيير حجم عناصره تلقائيًا وفقًا لشروط محددة. تعلمك مقالة ويكي هاو هذه كيفية تخطيط وتنفيذ تصميم الويب سريع الاستجابة الأساسي.
خطوات
طريقة 1 من 3: التخطيط للتصميم المستجيب
الخطوة 1. اكتشف كيف يستخدم جمهورك موقع الويب الخاص بك
في هذه الأيام ، يقوم غالبية الأشخاص الذين يتصفحون الويب بذلك من الهواتف المحمولة والأجهزة اللوحية. لكي يكون الموقع متجاوبًا ، يجب عليك التأكد من أنه يتم عرضه بشكل صحيح بغض النظر عن مكان عرضه. إذا كان الوقت والمال جوهريًا ، فركز على أنواع الأجهزة الأكثر شيوعًا بين المستخدمين (إذا كانت هذه المعلومات متوفرة) وكيفية استخدامهم لموقعك. باستخدام برنامج التحليلات الخاص بك أو أي شكل آخر من أشكال البحث ، اكتشف:
- ما هي أنواع الأجهزة التي يستخدمونها في أغلب الأحيان لعرض موقع الويب ، مع إيلاء اهتمام خاص للعلامات التجارية للهواتف المحمولة / الأجهزة اللوحية / أجهزة الكمبيوتر وأحجام الشاشة / الدقة.
- ما هي المتصفحات الأكثر شيوعًا بين المستخدمين لديك. بقدر ما يتعلق الأمر بالإحصاءات العالمية ، فإن Google Chrome هو متصفح الويب الأكثر شيوعًا في جميع أنحاء العالم ، ولكن Safari يأتي في المرتبة الثانية.
- كيف يستخدم الزوار موقعك على الويب ، مثل مقدار الوقت الذي يقضونه في مشاهدته ، ومكان مشاهدته ، والمحتوى الأكثر شيوعًا. يمكن أن يساعدك هذا في تحديد نوع المحتوى المهم الذي يجب تضمينه وأي نوع يمكن حذفه.
الخطوة 2. تصميم تخطيطات مختلفة لأجهزة مختلفة
يمكنك استخدام مزيج من CSS وجافا سكريبت لاكتشاف جهاز المستخدم ، بالإضافة إلى إمكانياته (سواء كان يدعم Java أو Flash وما إلى ذلك) وعرض إصدار معين من موقعك وفقًا لذلك. تعد استعلامات وسائط CSS مفيدة بشكل خاص لتحديد حجم / دقة الجهاز.
الخطوة 3. ضع في اعتبارك أنواعًا مختلفة من التفاعلات
يمكن أن يتفاعل زائرك مع موقع الويب الخاص بك باستخدام الماوس أو لوحة المفاتيح أو شاشة اللمس أو حتى قارئ الشاشة للأشخاص المعاقين بصريًا. بالنظر إلى ذلك ، يجب أن يستجيب موقع الويب الخاص بك لنقرات الماوس ومفاتيح لوحة المفاتيح (Tab ، Enter ، Return ، إلخ) ولمسات أصابع الشاشة.
لا تعمل تأثيرات التمرير مع أي شيء باستثناء الماوس. بدلاً من استخدام هذه التأثيرات ، يمكنك استخدام مطالبة الزائر بالنقر فوق زر أو رمز لعرض ما تم عرضه مسبقًا على تمرير الماوس
الخطوة 4. فكر في استخدام نظام إدارة المحتوى (CMS)
هناك طريقة سهلة لضمان استجابة تصميم موقعك وهي استخدام نظام إدارة المحتوى مع سمة متجاوبة مُصممة مسبقًا. يتيح لك استخدام نظام إدارة محتوى مثل Joomla أو Drupal أو Wordpress ضمان ظهور موقع الويب الخاص بك بشكل رائع على جميع الأجهزة دون الحاجة إلى ترميز العناصر سريعة الاستجابة بنفسك. تحقق من مزود خدمة الاستضافة على الويب لمعرفة أدوات CMS المتوفرة مع خدمتك.
الخطوة 5. استخدم الأدوات عبر الإنترنت لاختبار موقع الويب الخاص بك
الآن بعد أن زادت شعبية تصميم الويب سريع الاستجابة ، هناك مجموعة متنوعة من الأدوات المجانية التي يمكنك استخدامها لاختبار موقع الويب الخاص بك. إذا قمت بالفعل بترميز موقع الويب الخاص بك ، فاستخدم هذه الأدوات لاختبار كيف يبدو في ظروف مختلفة حتى تعرف أين تحتاج إلى تحسين الاستجابة:
- اختبار التوافق مع الأجهزة المحمولة من Google: يتيح لك معرفة ما إذا كان موقعك يعمل على الأجهزة المحمولة بشكل جيد كما يعمل على شاشات الكمبيوتر.
- resizeMyBrowser: يتيح لك عرض موقعك بدقة مختلفة.
- المستجيب: يعرض موقعك على شاشات جهاز مختلفة بتخطيطات مختلفة (جانبية أو جهة اليمين لأعلى).
الطريقة 2 من 3: جعل تخطيط الصفحة مستجيبًا
الخطوة الأولى. ضع في اعتبارك إطار عمل ورقة أنماط سريع الاستجابة
إطار العمل عبارة عن مجموعة مكتوبة مسبقًا من HTML و / أو CSS و / أو JavaScript والتي يمكنك استخدامها كهيكل أساسي لموقعك. يتم اختبار جميع الأطر وتحسينها للعمل مع جميع المستعرضات ، لذلك كل ما عليك فعله هو إدراج المحتوى الخاص بك وإضافة الوسائط وتفضيلات الألوان ونشر موقعك. بعض الأطر الشائعة هي:
- التمهيد
- هيكل عظمي
- المؤسسة
الخطوة 2. قم بتعيين منفذ العرض باستخدام علامة وصفية
إذا كنت لا تستخدم إطار عمل ، فستحتاج إلى البدء بالجانب الأكثر أهمية في ترميز موقع ويب سريع الاستجابة: منفذ العرض. منفذ العرض هو جزء من موقع الويب يكون مرئيًا للمستخدم. المفتاح لجعل موقعك يتم عرضه بشكل صحيح بغض النظر عن حجم الشاشة هو قياس حجم منفذ العرض في علامة META. للقيام بذلك ، قم بتضمين هذه العلامة في أعلى كل صفحة على الموقع:
الخطوة الثالثة. حدد حجم النص فيما يتعلق بإطار العرض
بمجرد تعيين منفذ العرض ، سيتغير حجم النص الموجود على صفحتك ليناسب الشاشة. ومع ذلك ، قد يتم عرض الخطوط كبيرة جدًا أو صغيرة جدًا إذا لم يتم تحديد أحجامها فيما يتعلق بإطار العرض. يمكنك القيام بذلك عن طريق تحديد حجم الخط كنسبة مئوية معينة من منفذ العرض باستخدام وحدة vw. يوضح هذا المثال أن رؤوس H1 يجب عرضها بنسبة 10٪ من عرض منفذ العرض ، بغض النظر عن حجمها:
ويكي هاو
الخطوة 4. استخدم استعلامات الوسائط لإظهار أنماط مختلفة لأحجام الشاشات المختلفة
تتيح لك استعلامات الوسائط اختيار ما إذا كنت تريد عرض عناصر CSS معينة بناءً على حجم الشاشة. يمكنك تحديد تفاصيل استعلام الوسائط في ملف CSS الخاص بك. في هذا المثال ، سيتحول لون خلفية الجسم إلى اللون الأحمر إذا كان حجم شاشة المستخدم 480 بكسل أو أكبر:
ويكي هاو
media screen and (min-width: 480px) {body {background-color: aqua؛ }}
طريقة 3 من 3: جعل الصور تستجيب
الخطوة الأولى. استخدم خاصية عرض CSS لقياس الصور
بدلاً من تعيين عرض الصورة على مقدار معين من البكسل (على سبيل المثال ، 500 بكسل) ، استخدم النسبة المئوية (على سبيل المثال ، 100٪) بحيث تنظر الصورة إلى عرض الأصل وتعديلها وفقًا لذلك. يؤدي تعيين عرض الصورة إلى 100٪ إلى إجبار الصورة على التحجيم لأعلى ولأسفل اعتمادًا على حجم شاشة العارض. للقيام بذلك في الخط:
الخطوة 2. استخدم خاصية max-width للحد من قياس الحجم الفعلي للصورة
إذا كنت تستخدم خاصية العرض في الخطوة السابقة لتغيير حجم الصورة إلى 100٪ ، فإن الصورة ستكبر أو تتقلص لتلائم 100٪ من حاويتها بغض النظر عن الحجم. هذا يعني أنه إذا كانت الصورة على الجانب الأصغر ، فسيتم تكبير حجمها أكبر من حجمها الأصلي وستبدو أقل جودة. لمنع حدوث ذلك ، استخدم max-width لتعيين الحد الأقصى لحجم الصورة إلى 100٪ (حجمها الفعلي). إليك الطريقة:
الخطوة الثالثة. استخدم عنصر صورة HTML لعرض صور مختلفة بأحجام شاشة مختلفة
إذا كنت ترغب في إنشاء صور ذات حجم مخصص لعرضها على شاشات مختلفة الحجم ، يمكنك تحديد الصور التي تريد عرضها في كود HTML الخاص بك. قم بإنشاء صور ذات أحجام مختلفة ، ثم استخدم هذا الرمز كمثال لتحديد الصورة التي يجب استخدامها على شاشات عرض 600 بكسل و 1500 بكسل:
