دليل سهل لإنشاء موقع متجاوب

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

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

ألق نظرة على البيانات أدناه (مقدمة من موقع statcounter.com). ستلاحظ أن أحجام الشاشات الأكثر شيوعًا هي صغيرة (أي شاشات الهاتف المحمول).

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

إذا لم يكن فقدان العملاء المحتملين كافيًا لإقناعك بقيمة امتلاك موقع ويب سريع الاستجابة ، فقد تكون فكرة فقدان تصنيفات البحث كذلك. قامت Google لبعض الوقت بمعاقبة مواقع الويب التي لا تقدم شكلاً من أشكال التصميم المتجاوب أو التكيفي لمستخدمي الأجهزة المحمولة. هذا يعني أنه إذا كان موقع الويب الخاص بك لا يعمل بشكل جيد على الهاتف المحمول ، فتوقع الحصول على عقوبة الترتيب. ماذا تعني عبارة "العمل بشكل جيد" على الهاتف المحمول؟ حسنًا ، يجب عرض المحتوى بطريقة سهلة الاستخدام. هذا يعني أنه يجب أن يكون قابلاً للقراءة دون الضغط عليه أو تكبيره. كما يحتاج أيضًا إلى التحميل بسرعة (مهتمًا بكيفية مساعدة التخزين المؤقت في WordPress في تحقيق أهداف السرعة الخاصة بك ، ثم ألق نظرة على هذه المقالة "التخزين المؤقت في WordPress - كيف يعمل ولماذا يجب عليك استخدامه" ! ')

صفحات الويب المستجيبة مقابل صفحات الويب التكيفية

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

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

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

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

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

كيف تعمل مواقع الويب المستجيبة؟

تستخدم مواقع الويب المتجاوبة ما يسمى CSS Media Queries لتعديل تخطيط موقع الويب بناءً على عرض الشاشة. تعد CSS Media Queries أداة قوية يسهل نشرها إذا كان لديك فهم أساسي لـ CSS. مكان للبدء قبل الغوص في عملية إنشاء موقع ويب repsonsive هو إلقاء نظرة على بعض الأمثلة الحية. أفضل طريقة للقيام بذلك هي شاشة سطح المكتب أو الكمبيوتر المحمول. افتح متصفحًا مثل Chrome وتوجه إلى أحد مواقع الويب الشهيرة. قد ترغب في تجربة موقعنا على pressidium.com.

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

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

بناء صفحة ويب سريعة الاستجابة

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

الخطوة 1: HTML

قم بإنشاء ملف index.html داخل مجلدك الجديد. افتح هذا الملف باستخدام محرر النص / الرمز المفضل لديك ، ثم أدخل الكود التالي:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

الخطوة 2: CSS الخارجية

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

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

في هذه المرحلة ، إذا فتحت ملف index.html باستخدام متصفح الإنترنت الخاص بك (استخدمنا Chrome في هذا المثال) ، فإن ما يجب أن تراه على صفحتك هو شيء من هذا القبيل:

الآن دعنا نلقي نظرة على أدوات مطور المتصفح (مرة أخرى ، نحن نستخدم Chrome في هذا المثال). افتح Chrome واضغط على F12 واضبطه للعرض على الجانب الأيمن.

قم بتغيير حجم النافذة عن طريق تحريك المؤشر الفاصل ومشاهدة دقة الشاشة تتغير في الوقت الفعلي.

الخطوة 3: وحدات CSS النسبية

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

حدث ذلك لأننا حددنا عرضًا ثابتًا بقيمة 900 بكسل على div#main و 300 بكسل على div#sidebar . دعنا نغير تنسيق هذه القيم ونستخدم النسب بدلاً من ذلك. (يرجى ملاحظة أن الحشوات والهوامش يتم حسابها أيضًا على العرض ، لذا يجب تحويل هذه القيم إلى نسبة مئوية أيضًا.)

بعد إجراء هذه التعديلات ، يجب أن يبدو style.css كما يلي:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

لقد أصبح هذا الأمر مثيرًا الآن لأن لدينا صفحة أصبحت الآن أكثر استجابة!

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

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

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

الخطوة 4: استعلامات وسائط CSS

بالنسبة إلى وضع "الشاشة العريضة" الخاص بنا ، سنقدم استعلام وسائط CSS مثل هذا: مثل @media screen and (min-width: 1396px) . يوجد هذا الاستعلام في الجزء العلوي من ورقة أنماط CSS الخاصة بنا ويتضمن مجموعة كاملة من CSS التي نريد تشغيلها عندما تكون شاشتنا بعرض 1396 بكسل على الأقل.

يمكننا الآن نسخ كل هذه التعليمات البرمجية وتكرارها في ورقة أنماط CSS الخاصة بنا (انسخها والصقها أسفل CSS الحالي بحيث يكون لديك نسختان متطابقتان في ملف واحد). الآن ، قم بتحرير استعلام وسائط CSS أعلى الدفعة الثانية من CSS لقراءة @media screen and (max-width: 1395px) . هذا يخبر متصفحنا الآن أنه إذا كان أصغر من 1395 بكسل ، فيجب عليه تشغيل CSS. الآن بعد الانتهاء من ذلك ، يمكننا تعديل CSS في هذا القسم "الأصغر" بحيث يغير تخطيط صفحة الويب الخاصة بنا حتى تتناسب بشكل أفضل مع شاشة أصغر. في هذا المثال سنقوم بتعديل ال وهناك يجب علينا تعديل نسبة div.post من 31.1٪ إلى 45٪.

يجب أن يكون لديك الآن ملف CSS يشبه هذا:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

الآن بعد أن أصبحت مربعات المنشورات لها نمط مختلف للشاشات التي يقل عرضها عن 1395 بكسل ، فلنرى كيف ينعكس هذا في العمل:

لطيف - جيد!

ستلاحظ أن الأشياء لا تزال غريبة أثناء تصغيرها وبعد تجاوز عرض 760 بكسل.

لفرز ذلك ، يمكننا استخدام نفس الحيلة التي استخدمناها للانتقال من 3 أعمدة إلى 2. هذه المرة على الرغم من أننا سنستخدم "نقطة فاصل" 760 بكسل وسنقوم بتغيير CSS div.post إلى 94٪. إذا قمنا بذلك ، فسيكون لدينا ثلاثة استعلامات عن وسائط CSS والتي يجب أن تبدو كما يلي:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

@media screen and (max-width: 760px) CSS لدينا div.post والذي سيبدو كما يلي:

 div.post { width: 94%; float: left; padding: 2%; }

كل شيء على ما يرام ، يجب أن ترى الآن شيئًا مشابهًا لما يلي عندما تقوم بتقليل عرض المستعرض الخاص بك إلى أقل من 760 بكسل عرضًا:

وهذا كل شيء! لقد أنشأنا الآن صفحة ويب سريعة الاستجابة تعمل على الشاشات الكبيرة والأجهزة اللوحية والهواتف المحمولة!

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

استضافة موقع الويب الخاص بك مع Pressidium

ضمان استرداد الأموال لمدة 60 يومًا

اطلع على خططنا

استنتاج

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

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