لا يوجد ما هو أسوأ من امتلاك موقع ويب رائع لسطح المكتب وموقع للجوّال لا يعمل بشكل صحيح.

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

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

• التغييرات التي تم إجراؤها لا^(Are) تظهر على الهاتف المحمول^(Mobile)
• ملاحة غير ودية
• التخطيط المتجاوب^{(Responsive Layout)} يتوقف عن العمل فجأة
• تستغرق الصور وقتًا طويلاً للتحميل
• أهم محتوى غير واضح
• الكثير من المعلومات
• بيانات الشاشات الصغيرة

لا تظهر تحديثات موقع الويب المتوافق مع الجوّال^{(Mobile Friendly Website Updates Not Showing Up)}

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

أحد أكثر الأسباب شيوعًا هو التخزين المؤقت. قد يعرض متصفح هاتفك إصدارًا قديمًا من موقعك قمت بتنزيله مسبقًا. يمكن أن يكون السبب الآخر هو أن موقع الويب الخاص بك يحتفظ بالإصدار القديم من صفحتك ولا يعرض تغييراتك.

إذا كانت هذه هي المشكلة ، فستحتاج إلى مسح ذاكرة التخزين المؤقت لتنزيل الإصدار المنقح. يمكن أن يساعد مكون إضافي للتخزين المؤقت مثل WP Super Cache أو W3 Total Cache أو WP Fastest Cache في حل هذه المشكلة.

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

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

ملاحة غير ودية^{(Unfriendly Navigation)}

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

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

فيما يلي^(Below) بعض الطرق لإصلاح هذه المشكلة لموقع ويب متوافق مع الأجهزة المحمولة:

• حوّل التنقل إلى قائمة منسدلة للأجهزة المحمولة.
• اعرض قائمة التنقل كعناصر كتلة ، بحيث تظهر عموديًا.
• استخدم رمز قائمة يمكن تبديله ليشغل مساحة أقل.
• قم بإنشاء قائمة تنقل للجوال باستخدام jQuery.
• استخدم قائمة Hamburger (تتضمن العديد من السمات هذا كخيار أو يمكنك استخدام مكون إضافي^{( use a plugin)} .)

التخطيط المتجاوب يتوقف عن العمل فجأة^{(Responsive Layout Stops Working Suddenly)}

إذا توقف موقعك المتوافق مع الجوّال عن العمل فجأة ، فقد يرجع ذلك إلى وجود مكون إضافي على موقعك.

قد يتسبب تثبيت مكون إضافي جديد أو تحديث لمكوِّن إضافي موجود في حدوث تعارض مع المكونات الأخرى التي تؤثر على تخطيطك سريع الاستجابة.

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

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

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

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

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

سيكون الموقع الذي يتم عرضه هو حجم إطار العرض (حجم منطقة صفحة الويب المرئية للمستخدم).

لإصلاح موقعك المتوافق مع الجوّال ، أضف السطر التالي من التعليمات البرمجية إلى قسم العنوان:

<meta name=”viewport” content=”width=device-width”>

في بعض الأحيان عند تحديث سمة ما ، يمكن أن يختفي هذا الرمز.

تستغرق الصور وقتًا طويلاً للتحميل^{(Images Are Taking Too Long to Load)}

يعد تحسين الصور وتقليل حجم ملف الصورة^{(reducing image file size)} أمرًا منطقيًا. يمكن أن تؤدي الصور الكبيرة غير المحسّنة إلى إبطاء سرعة تحميل صفحات الويب الخاصة بك. قد يكون هذا محبطًا لمستخدمي الجوال.

يقدم WordPress^(WordPress) الإصدار 4.4 وما فوق تلقائيًا أصغر إصدار من الصورة على الخادم الخاص بك.

إذا كنت تقوم بالفعل بتشغيل أحدث إصدار من WordPress ، ولكن موقعك لا يزال لا يتم تحميله بالسرعة الكافية ، فيمكنك:

• قم بتثبيت مكون إضافي مثل Smush Image Optimization و Compression و Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} لتغيير حجم صورك وتحسينها
• استخدم أداة الضغط والتحسين قبل تحميل الصور إلى موقعك مثل TinyPNG أو Compress JPEG أو Online Image Optimizer .

أهم محتوى غير واضح^{(Most Important Content Isn’t Obvious)}

يتم تحميل بعض مواقع الويب بالكثير من المحتوى غير الضروري لملء المساحة الفارغة عند فتحها على سطح المكتب.

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

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

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

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

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

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

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

الكثير من المعلومات^{(Too Much Information)}

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

تحتوي هذه العناصر على الكثير من المعلومات التي يمكن أن تزاحم شاشة الهاتف المحمول وتتداخل مع عثور المستخدم على المعلومات التي يريدها.

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

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

بيانات الشاشات الصغيرة^{(Data For Small Screens)}

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

يمكن لمكوِّن إضافي مثل WP Responsive Table تسهيل تحقيق ذلك.

كما هو الحال مع جدول الأسعار أعلاه ، عند عرضها على جهاز محمول ، سيتم تكديس الأعمدة لتناسب الشاشة الأصغر.

تشمل الطرق الأخرى لعرض البيانات على الأجهزة المحمولة ما يلي:

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

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

يجب عليك دائمًا مراقبة أداء موقعك وإجراء التعديلات عند الضرورة لتحسين الأداء وتجربة المستخدم.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having a great-looking desktop website and a mobile site that doesn’t work correctly.

Most design fixes are simple but do require attention if you want visitors to stay on your site while browsing on a mobile device.

This article will highlight seven mobile friendly website issues and fixes for them.

• Changes Made Are Not Showing on Mobile
• Unfriendly Navigation
• Responsive Layout Stops Working Suddenly
• Images Are Taking Too Long to Load
• Most Important Content Isn’t Obvious
• Too Much Information
• Data for Small Screens

Mobile Friendly Website Updates Not Showing Up

You have just spent a lot of time making updates to your website. They look great on your desktop but don’t show up on your mobile device.

One of the most common reasons is caching. Your mobile browser could be showing an old version of your site which you previously downloaded. Another reason can be that your website is holding onto the old version of your page and not showing your changes.

If this is the problem, you will need to clear the cache to download the revised version. A caching plugin such as WP Super Cache, W3 Total Cache, or WP Fastest Cache can help solve this problem.

Below are four steps to help you flush your website cache and browser to enable the new version to show on your mobile friendly site.

1. Refresh your browser several times on your desktop and mobile device.
2. Test your website on different mobile devices.
3. Clear your site with a caching plugin.
4. Check with your hosting company to see if there is another caching system on your server that needs to be cleared.

Unfriendly Navigation

It can be challenging to create a navigation menu that works well on mobile devices. If your website navigation has many items and submenus, it is even more tricky to squeeze everything on a smaller screen.

For example, if you only have three or four items in your website navigation, it should look fine on mobile. However, if you have more items and submenus, they will stack up on top of each other and look crowded.

Below are a few ways to fix this problem for a mobile friendly website:

• Turn your navigation into a dropdown menu for mobile devices.
• Display your navigation menu as block elements, so they appear vertically.
• Use a menu icon that can be toggled to take up less space.
• Create a mobile navigation menu using jQuery.
• Use the Hamburger menu (Many themes include this as an option or you can use a plugin.)

Responsive Layout Stops Working Suddenly

If your mobile friendly site suddenly stops working, it could be due to a plugin on your site.

Installing a new plugin or an update to an existing plugin could be causing a conflict with others that affects your responsive layout.

Start by deactivating each plugin one at a time to see if it is the cause. Don’t deactivate them all at once or you won’t know which plugin could be the culprit.

Code changes are another possible cause. If you have modified any code accidentally or intentionally, restore the original codebase and see if your responsive website starts working again.

When checking your site for mobile responsiveness, you should always test it on a mobile device. 

Sometimes it appears to work when resizing the browser window on your desktop but doesn’t display correctly on mobile.

If one line of code is missing from an HTML header file, it can break the responsive design. This single line of missing code will cause your mobile device to assume the site you are viewing is a full-sized website.

The site rendered will be the size of the viewport (the size of the area of the web page that is visible to the user).

To fix your mobile friendly site, add the following line of code to the header section:

<meta name=”viewport” content=”width=device-width”>

Sometimes when a theme is updated, this code can disappear.

Images Are Taking Too Long to Load

Optimizing images and reducing image file size makes sense. Large images that are not optimized can slow down the loading speed of your webpages. This can be frustrating to mobile users.

WordPress version 4.4 and above automatically serves up the smallest version of an image on your server.

If you are already running the latest version of WordPress, but your site is still not loading fast enough, you can:

• Install a plugin such as Smush Image Optimization, Compression, and Lazy Load to resize and optimize your images
• Use a compression and optimization tool before uploading images to your site such as TinyPNG, Compress JPEG, or Online Image Optimizer.

Most Important Content Isn’t Obvious

Some websites are loaded with a lot of unnecessary content to fill the empty space when opened on a desktop.

Websites developed without being conscious of mobile users generally fall under this category. These sites take more time and bandwidth to load.

If the pages aren’t designed appropriately for mobile devices, then part of the content may not appear on mobile without a lot of scrolling.

Most of the time, an element on your webpage will look one way on a computer and completely different on a mobile device.

For example, a pricing page with three columns will show them side by side on a computer.

However, on a mobile device, the columns are stacked on top of each other because the screen size is smaller. This behavior is to be expected.

Make sure your pricing table is in a top position on your webpage so that it will appear first when viewed on mobile. If you have a lot of text over your table, mobile users will have to scroll down to see it and might not.

For the most optimal mobile user experience, put the most critical pieces of content towards the top of the page. If a user needs to scroll a lot before they can view your content, they probably won’t.

Too Much Information

Sites with complicated user-interface elements such as tables, multi-step forms, and advanced search features can produce a poor mobile user experience.

These elements contain too much information that can crowd a mobile screen and interfere with a user finding the information they want.

One approach is to remove or hide some content from mobile users. However, this is not an ideal solution for visitors who want to have access to these elements.

To avoid this problem, optimize your mobile friendly site as much as possible. Also, remove any unnecessary elements while focusing on the core structure of your website.

Data For Small Screens

Complex tables with many rows and columns can be a problem when viewed on small mobile screens. The best fix is to use responsive tables.

A plugin such as WP Responsive Table can make this easy to accomplish.

As with the pricing table above, when viewed on a mobile device, the columns will be stacked to fit the smaller screen.

Other ways to show data on mobile devices include:

• Creating a smaller table without the grid layout to avoid the need for horizontal scrolling.
• Flipping a table on its side to fit better on a smaller screen.
• Replacing larger tables with smaller ones that link to the full version.
• Converting tables into pie charts.

As mobile usage is growing exponentially, it is imperative that business websites are optimized with mobile friendly versions. Enhance user experience without sacrificing functionality by following the steps above.

You should also always monitor your site’s performance and make tweaks when necessary to improve performance and user experience.

Related posts

• كيفية إعداد موقع الويب الشبيه بالتويتر الخاص بك باستخدام سمة P2 الخاصة بـ WordPress

• 10 إضافات WordPress أساسية لموقع الأعمال الصغيرة

• كيفية جعل WordPress Site Secure

• مراجعة الكتاب: قم ببناء موقع الويب الخاص بك: دليل فكاهي إلى HTML و CSS و Wordpress

• Wix Vs WordPress: أيهما أفضل لإنشاء موقع الويب الخاص بك؟

• 7 Proven Ways إلى Increase Website Traffic

• تحقق من عمر الموقع

• 3 Ways لإزالة Slideshow From Any Website

• كيفية نقل WordPress site من مجموعة واحدة إلى أخرى

• كيفية توصيل الكمبيوتر المحمول الذي يعمل بنظام Windows بنقطة اتصال محمولة

• استضافة مواقع رخيصة وموثوقة للشركات الصغيرة

• مراقبة مواقع الويب المخفية واتصالات الإنترنت

• أنشئ موقعًا شخصيًا بسرعة باستخدام مواقع Google

• كيفية إبطال الوصول إلى موقع ويب الطرف الثالث على Facebook و Twitter و Google

• كيفية اكتشاف موقع ويب مزيف أو محاولة تصيد في موسم الأعياد هذا

• كيفية تثبيت WordPress على Google Cloud Platform

• 19 من أفضل النصائح لتطبيق Outlook Mobile لنظامي Android و iOS

• 7 نصائح فنية لتحسين محركات البحث لأي موقع ويب

• كيفية تثبيت و Setup WordPress على Microsoft Azure

• 10 نصائح وحيل Gboard لتحسين الكتابة على الأجهزة المحمولة