ما هي الميزات الرئيسية التي تجعل موضوع WordPress يستجيب؟
نشرت: 2023-02-08إنه عام 2023 ، مما يعني أن تصميم الويب سريع الاستجابة لم يعد خيارًا بل ضرورة.
مع وصول 92.3 ٪ من مستخدمي الإنترنت إلى الويب عبر الأجهزة المحمولة وما يقرب من 60 ٪ من جميع حركة مرور الويب العالمية القادمة من الأجهزة المحمولة ، يجب أن تكون موضوعات WordPress ببساطة مستجيبة تمامًا إذا كانت ستلبي احتياجات المستخدمين الحديثين.
إذن ، ما الذي يشكل بالضبط تصميم موضوع سريع الاستجابة؟
ما المكونات الأساسية التي تضمن عمل السمة بشكل لا تشوبه شائبة على أي جهاز ، وكيف تعمل بالضبط؟
ستجد إجابات لكل هذه الأسئلة في هذا الدليل.
سواء كنت مالك موقع ويب تتطلع إلى تسليح نفسك بكل المعرفة التي تحتاجها لاختيار أفضل سمة WordPress سريعة الاستجابة ، أو مصممًا مبتدئًا يستعد لبناء القالب الأول ، فقد حددنا كل ما تحتاج لمعرفته حول الميزات الرئيسية لـ مواضيع مستجيبة.
ما الذي يجعل موضوع WordPress مستجيبًا؟
بالمعنى الأساسي ، فإن موضوع WordPress سريع الاستجابة هو أي موضوع يغير تصميمه وتخطيطه العام ليناسب أي جهاز يشاهده المستخدم عليه.
هذا يعني أنه إذا قمت بتحميل موقع الويب الخاص بك على ثلاثة أنظمة أساسية مختلفة (على سبيل المثال ، جهاز كمبيوتر سطح المكتب وجهاز iPad وهاتف Android) ، فقد يبدو مختلفًا في كل منها ولكنه سيعطي المستخدمين أفضل تجربة ممكنة على هذا الجهاز المحدد.
ما هي السمات الرئيسية للموضوع سريع الاستجابة؟
هناك ثلاث ميزات أساسية لجعل سمة WordPress تعمل بطريقة سريعة الاستجابة.
وتشمل هذه:
المقال يستمر أدناه
1. أنظمة الشبكة المرنة
في الأيام الأولى للويب ، اتبع المصممون نفس مبادئ التخطيط المستخدمة في المنشورات المطبوعة ، حيث حددوا أحجامًا ثابتة ومطلقة لتخطيطات صفحاتهم بناءً على وحدات البكسل.
بمجرد أن بدأ معظمنا في الابتعاد عن أجهزة الكمبيوتر المكتبية لدينا والوصول إلى الويب عبر الأجهزة اللوحية والهواتف الذكية ، سرعان ما أصبح واضحًا أن هذا لم يعد يعمل.
عادةً لا تبدو الصفحات ذات التنسيقات الثابتة رائعة على تلك الأجهزة ، وحتى إذا لم يكن هناك شيء خاطئ في الجمالية العامة ، فقد تكون وظائف التنقل والموقع صغيرة جدًا أو صعبة الاستخدام.
لهذا السبب ، بدأ المصممون الذين يعملون على موضوعات متجاوبة في تغيير نهجهم واستخدام أنظمة الشبكة المرنة.
توفر تخطيطات الشبكة المرنة ، وهي حجر الزاوية في أي سمة سريعة الاستجابة ، الإطار الذي يمكّن السمات من تبديل تخطيطها ليناسب نوع الجهاز وحجم الشاشة.
باختصار ، تتكون هذه الأنظمة من سلسلة من الشبكات والأعمدة ، مع لغة CSS (أوراق الأنماط المتتالية) المستخدمة للتحكم في كيفية ضبطها على الأجهزة المختلفة.
على سبيل المثال ، من الممكن استخدام CSS لتحديد أن موقع الويب يجب أن ينتشر عبر عدة أعمدة على شاشة سطح المكتب ولكن يتم تبسيطه إلى عمود واحد على شاشة أصغر ، مثل iPhone.
بدون مثل هذا النظام ، لن يكون لدى منشئي القوالب أي طريقة لضمان ظهور صفحاتهم على الأجهزة المختلفة ، ولكن هذا ليس كل ما يفعلونه.
نظرًا لأن استخدام شبكة مرنة مع CSS يعني أن جميع الأنماط والتخطيطات الخاصة بك يتم الاحتفاظ بها معًا ، فمن الأسهل بكثير معالجة التحديثات والصيانة المستمرة مما لو تم وضعها في جميع أنحاء الكود الرئيسي للموضوع.
2. نقاط التوقف
بعبارات بسيطة ، فإن نقطة توقف السمة سريعة الاستجابة هي النقطة التي يجب أن يتغير فيها تخطيط السمة.
المقال يستمر أدناه
على سبيل المثال ، قد يقرر بعض المصممين تعيين العديد من نقاط التوقف التي تغير تخطيط موقع الويب عندما يقوم المستخدم بإجراء تعديلات طفيفة على حجم متصفح الويب الخاص بهم. في المقابل ، قد يقرر آخرون أن التخطيط يجب أن يتغير فقط عندما يكون التغيير في الحجم كبيرًا ، مثل من شاشة سطح المكتب إلى الهاتف الذكي.
يتم تحديد نقاط الفصل هذه من خلال استعلامات وسائط CSS ، وهي أوامر محددة تخبر السمة عند عرض تخطيط مختلف.
media (أقصى عرض: 480 بكسل) {
.حاوية {
العرض: 100٪؛
}
}
على سبيل المثال ، باستخدام استعلام الوسائط أعلاه ، يمكن لمطور القوالب تحديد تقليل التنسيق إلى عمود واحد عندما يكون حجم الشاشة 480 بكسل أو أقل.
كقاعدة عامة لأفضل الممارسات ، من الجيد أن يكون لديك ما لا يقل عن ثلاث أو أربع نقاط توقف لكل موقع إلكتروني للتأكد من أنه يستجيب لأحجام الشاشات الأكثر استخدامًا.
3. الصور السائلة
بينما تحدد أنظمة الشبكة المرنة كيفية استجابة التخطيط العام لأحجام الشاشة المختلفة ، فإن الصور المرنة تفعل الشيء نفسه مع الصور الموجودة على الصفحة ، كما خمنت.
المقال يستمر أدناه
مثل أنظمة الشبكة ، يتم التعامل مع الصور السائلة بواسطة CSS ، والتي تحدد ، في هذه الحالة ، أحجام الصور بناءً على نسبة من الحاوية الخاصة بها بدلاً من العرض الثابت. نتيجة لذلك ، يتم ضبط هذه الصور تلقائيًا على الحجم والموضع الأمثل للشاشة التي يتم عرضها عليها.
يفيد هذا النهج كلاً من المصممين والمستخدمين النهائيين.
باستخدام الصور المرنة ، لا يتعين على مطوري السمات الخوض في العملية الشاقة لإنشاء صور متعددة الأحجام لمتصفحات مختلفة وقواعد الإعداد التي يجب استخدام الصورة على أي حجم شاشة. بدلاً من ذلك ، يمكنهم استخدام صورة واحدة والتحكم في استجابتها باستخدام CSS.
وفي الوقت نفسه ، يتمتع زوار الموقع بتجربة شاملة أفضل ، مما يضمن أن الصور لا تعترض طريق المعلومات المهمة أو وظائف الصفحة مثل نماذج الاتصال وعبارات الحث على اتخاذ إجراء.
4. الطباعة سريعة الاستجابة
بالطبع ، ليست صورك فقط هي التي تحتاج إلى التكيف مع أحجام الشاشات المختلفة ؛ نصك كذلك.
بعد كل شيء ، تخيل ما إذا كنت قد صممت للجوال أولاً واستخدمت حجم خط مناسب لأجهزة Android و iPhone. عندما يحاول المستخدم زيارة موقعك على كمبيوتر سطح المكتب أو الكمبيوتر المحمول ، فمن المحتمل أن يكون النص صغيرًا جدًا بحيث لا يمكن قراءته بشكل صحيح.
على العكس من ذلك ، إذا استخدمت حجم خط ثابتًا لسطح المكتب ، فسيكون حجمه كبيرًا جدًا بالنسبة للأجهزة المحمولة ويدمر تجربة المستخدم.
لهذا السبب ، يحتاج مصممو السمات إلى الاعتماد على الطباعة سريعة الاستجابة ، وتسخير مرة أخرى قوة أوراق الأنماط المتتالية لتحديد وجه وحجم الخط الأنسب لكل حجم شاشة.
5. التنقل الصديق للجوال
يعد التنقل السهل الاستخدام مكونًا أساسيًا لأي موقع ويب ، مما يسمح للزوار بالتنقل بين صفحاتك للعثور على المعلومات أو الخدمة التي يحتاجون إليها.
لذلك ، بطبيعة الحال ، هذا شيء يجب على مصممي السمات المستجيبة الانتباه إليه حقًا.
غالبًا ما تصبح قوائم التنقل القياسية التي تراها على المواقع المعروضة على سطح المكتب صعبة الاستخدام على الشاشات الأصغر ، وغالبًا ما تؤثر سلبًا على التصميم العام والتخطيط في العملية.
لهذا السبب يلجأ المصممون عادةً إلى ما يُعرف باسم "قائمة الهامبرغر".
لقد شاهدت بلا شك "قوائم همبرغر" مرات عديدة من قبل ، حتى لو لم تكن تعلم أن هذا ما كان يُطلق عليها. يشير هذا المصطلح بشكل أساسي إلى ثلاث شرطات على موقع أو تطبيق للجوّال تشبه تصميم الهامبرغر والتي ، عند النقر عليها ، تكشف عن الوصول إلى قائمة التنقل.
يتم إنشاء هذه القوائم باستخدام مزيج من HTML للهيكل ، و CSS للأسلوب والموضع ، و Javascript لتمكين التفاعل الأساسي حتى يتم فتح القائمة وإغلاقها عند النقر عليها.
بينما يمكن لمالكي مواقع الويب استخدام مجموعة متنوعة من المكونات الإضافية لقائمة الأجهزة المحمولة مثل WP Mega Menu أو WP Mobile Menu لتحسين أسلوب ووظائف قائمة السمات الخاصة بهم ، سيجد مصممو السمات عمومًا أنهم يحققون المزيد من النجاح عند إنشاء تنقل محسّن بالكامل عبر الهاتف المحمول في ثيمهم. في المقام الأول.
6. تصميم زر محسن
غالبًا ما يتم التغاضي عن الأزرار ولكنها جانب مهم بشكل أساسي لتصميم السمة سريعة الاستجابة عالية الجودة.
على جهاز كمبيوتر مكتبي بمؤشر ، من السهل النقر على الزر بدقة كبيرة. على جهاز محمول ، سينقر المستخدمون بأصابعهم ، والتي لا تقدم نفس المستوى من الدقة.
على هذا النحو ، يجب أن تكون العناصر القابلة للنقر ، مثل الأزرار والروابط النصية ، كبيرة بما يكفي.
تشير إرشادات Apple الشاملة للواجهة البشرية للمطورين إلى أن متوسط النقر بالإصبع يبلغ 44 بكسل × 44 بكسل ، مما يعني أنه يجب على منشئي السمات إنشاء أزرار بهذا الحجم على الأقل.
وضع الميزات الرئيسية للتصميم سريع الاستجابة موضع التنفيذ: لماذا يهم نهج الجوال أولاً
هناك مبدأ يتكرر على نطاق واسع في صناعات التصميم والتطوير مفاده أن أي منتج جديد ، سواء كان موضوع WordPress أو برنامجًا أو موقعًا مخصصًا ، يجب تصميمه باستخدام نهج الهاتف المحمول أولاً.
بعبارة أخرى ، بدلاً من بناء واختبار سمة لشاشات سطح المكتب الأكبر حجمًا وضبطها مع تقدمك للتأكد من أنها تعمل على هاتف ذكي ، فمن الأفضل أن تبدأ بنظام الشبكة المرنة ونقاط التوقف الخاصة بك وتجعل تجربة مستخدم الهاتف المحمول الأفضل بالنسبة لك. أولوية.
مع وصول 92٪ من المستخدمين إلى الويب عبر الأجهزة الذكية ، فإن هذا النهج المنطقي يضمن لك تلبية احتياجات العديد من زوارك من كلمة "go".
ليس هذا هو السبب الوحيد لإعطاء الأولوية لتصميم الهاتف المحمول.
لا يخفى على أحد أن التصميم للشاشات الأصغر يمثل المزيد من التحديات وقابلية الاستخدام مقارنة بالشاشات الأكبر حجمًا. من خلال التركيز على الهاتف المحمول ، يمنح مطورو السمات أنفسهم ميزة منع معظم هذه المشكلات من البداية ، مما يوفر الوقت الذي تستغرقه للعودة وإصلاحهم لاحقًا.
مع كل ما يقال ، فإن المظهر المتجاوب ليس هو الشيء الوحيد الذي يمكن أن يساعد في تحسين تجارب المستخدم على الشاشات الأصغر. لمزيد من الأدوات المفيدة ، راجع دليلنا لأفضل مكونات WordPress الإضافية لموقع متوافق مع الجوّال.