كيفية تحسين تخطيطات WordPress الخاصة بك لحركة مرور الهاتف المحمول

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

لتحسين تخطيطات WordPress الخاصة بك لحركة مرور الهاتف المحمول ، عليك القيام بأكثر من مجرد تثبيت موضوع. يجب عليك الاستثمار في إصدار الهاتف المحمول من موقع الويب الخاص بك ، ليس فقط من وجهة نظر UX ، ولكن أيضًا من وجهة نظر تحسين محركات البحث (SEO) و CRO والإعلان والأداء.

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

لماذا تعتبر حركة المرور على الهاتف المحمول مهمة

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

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

بالإضافة إلى UX المحسّن ، يؤثر التصميم الصديق للجوّال بشكل إيجابي أيضًا على مُحسنات محركات البحث. من تحديث Google في عام 2015 فصاعدًا ، كانت هناك مراجعة كبيرة في خوارزميات محرك البحث. الآن ، يعد التوافق مع الجوّال أحد العوامل المهمة لتحسين ترتيب البحث وزيادة حركة مرور الويب.

تشهد حركة مرور الويب على الجوال ارتفاعًا مستمرًا ، كما هو موضح في هذا الرسم البياني من Statista.

لذلك ، إذا كان موقع الويب الخاص بك ممتازًا على الأجهزة المحمولة ، فسيتم ترتيبه بشكل أفضل في SERPs ، وسيؤدي إلى المزيد من المبيعات عبر الهاتف المحمول. حتى كبار تجار التجزئة مثل Walmart Canada استفادوا بشكل أكبر من تحسينات تخطيط الويب للجوال ، مع زيادة بنسبة 98٪ في مبيعات الأجهزة المحمولة!

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

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

النتيجة: زيادة بنسبة 20٪ في معدل التحويل الإجمالي ، وزيادة بنسبة 98٪ في مبيعات الأجهزة المحمولة ، كما هو مذكور أعلاه.

كيف تقيم Google تخطيطات مواقع الويب للجوال؟

عند تقييم قدرة الموقع على تلقي حركة المرور من بحث الجوال ، تأخذ Google في الاعتبار العوامل التالية:

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

ابدأ ببعض الاختبارات

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

يعد اختبار التوافق مع الأجهزة الجوّالة من Google أحد أفضل الأدوات لفحص التنسيقات المتجاوبة للجوال لموقعك.

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

هناك عدد قليل من الأدوات المفيدة الأخرى التي يمكنك استخدامها لاختبار التوافق مع الأجهزة المحمولة ، مثل:

• فارفي موبايل سيو
• W3C Mobile Validator
• مدقق التصميم المستجيب

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

اختبر الأداء

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

فيما يلي بعض الأدوات التي يمكنك استخدامها لاختبار سرعة موقع الويب الخاص بك:

• PageSpeed ​​Insights
• GTMetrix
• بينغدوم

إذا كنت ترغب في تسريع المحتوى على الهاتف المحمول ، فيمكن أن تساعدك شبكة CDN في تقديم المحتوى بشكل أسرع من خلال التخزين المؤقت والتوزيع من مواقع عديدة.

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

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

يمكن للترقية إلى استضافة WordPress مثل Pagely إجراء تحسينات كبيرة في الأداء. يستخدم Pagely البنية التحتية للخادم والتي ستعمل على تسريع موقع الويب الخاص بك على الفور. كما أنهم يستخدمون أحدث إصدار من PHP 7 ويتضمنون CDN يمكنه زيادة أصول موقعك.

حافظ على البساطة

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

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

لا يعني موقع سطح المكتب الجيد المظهر أن تصميم الهاتف المحمول سيحذو حذوه. مصدر الصورة: تويوتا البرازيل

ولكن ، ماذا لو كنت تريد تصفح سياراتهم على هاتفك الذكي.

يؤدي تخطيط الويب المحمول المزدحم إلى حركة مرور أقل ومعدل تحويل أقل. مصدر الصورة: تويوتا البرازيل

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

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

تخطيط WordPress بسيط للجوال من Swell

عندما تقوم بتصميم تخطيط متنقل ، فمن الأفضل التركيز على تخطيط صفحة من عمود واحد ، لتعزيز المزيد من التمرير على الصفحة. فكر في - ما سبب نجاح Facebook و Instagram مثل منصات الهاتف المحمول؟

يقوم المستخدمون بالتمرير عموديًا بشكل طبيعي. مصدر الصورة: Giphy

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

زر قائمة همبرغر في أعلى اليسار. مصدر الصورة: AMC

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

استبعاد المحتوى غير الضروري

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

عند مراجعة المحتوى الذي يجب أن يظهر على الصفحة ، اسأل نفسك ما يلي:

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

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

واجهة مستخدم بسيطة من موقع ويب BuildFire للجوال.

حدد المناطق القابلة للنقر

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

يحتوي Todoist فقط على عبارة الحث على اتخاذ إجراء وبعض الرسومات الجميلة.

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

يحتوي موقع الجوال Quicksprout على مناطق كبيرة قابلة للنقر.

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

تسخير التصميم المستجيب

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

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

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

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

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

مصدر الصورة: Giphy

فيما يتعلق بالصور ، حقق WordPress بالفعل تقدمًا كبيرًا نحو تجربة أفضل. منذ الإصدار 4.4 ، يقوم نظام إدارة المحتوى تلقائيًا بقياس حتى أكبر الصور من خلال سمة srcset HTML.

PNG و JPEG هما أكثر تنسيقات ملفات الصور شيوعًا. ولكن مع أحدث التطورات التقنية والصورة الرقمية ، أصبحت تنسيقات WebP و SVG حاضرة بشكل متزايد.

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

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

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

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

المصدر: HubSpot

تحسين النماذج

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

اجعل نماذج صفحات الجوال الخاصة بك بسيطة قدر الإمكان. المصدر: Copyblogger

في WordPress ، يمكنك تثبيت مكون إضافي مثل WPForms وإنشاء نماذج سريعة الاستجابة والتي يمكن أن تساعدك في تحويل زوار الويب عبر الأجهزة المحمولة.

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

نموذج الاتصال 7 هو أفضل أداة تحسين النموذج من وجهة نظر المطور.

تغليف

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

يتمتع موقع WordPress المتوافق مع الجوّال بالقدرة على جلب المزيد من الزيارات العضوية وإشراك عملاء محتملين جدد وعملاء.

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

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

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