هیچ چیز بدتر از داشتن یک وب سایت دسکتاپ با ظاهر عالی و یک سایت تلفن همراه که به درستی کار نمی کند وجود ندارد.

اکثر اصلاحات طراحی ساده هستند، اما اگر می خواهید بازدیدکنندگان در هنگام مرور در دستگاه تلفن همراه در سایت شما بمانند، نیاز به توجه دارند.

این مقاله هفت مشکل وب سایت سازگار با موبایل و رفع آنها را برجسته می کند.

• تغییرات ایجاد شده در موبایل^(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) نسخه 4.4 و بالاتر به طور خودکار کوچکترین نسخه یک تصویر را در سرور شما ارائه می دهد.

اگر در حال حاضر آخرین نسخه وردپرس^(WordPress) را اجرا می کنید، اما سایت شما هنوز به اندازه کافی سریع بارگیری نمی شود، می توانید:

• برای تغییر اندازه و بهینه سازی تصاویر ، افزونه ای مانند Smush Image Optimization، Compression و Lazy Load را نصب کنید.^{( Smush Image Optimization, Compression, and Lazy Load)}
• قبل از آپلود تصاویر در سایت خود از یک ابزار فشرده سازی و بهینه سازی مانند TinyPNG ، فشرده سازی JPEG^{(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 dоesn’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 وردپرس، وب سایتی شبیه توییتر خود را راه اندازی کنید

• 10 افزونه ضروری وردپرس برای یک وب سایت کسب و کار کوچک

• چگونه می توان یک WordPress Site Secure

• بررسی کتاب: وب سایت خود را بسازید: راهنمای کمیک برای HTML، CSS و وردپرس

• Wix در مقابل وردپرس: کدام یک برای ایجاد وب سایت شما بهترین است؟

• چگونه به انجام یک DDoS Attack در CMD Website با استفاده از

• با استفاده از سایت های گوگل به سرعت یک وب سایت شخصی ایجاد کنید

• 7 نکته فنی بهینه سازی سئو برای هر وب سایت

• نحوه لغو دسترسی به وب سایت شخص ثالث در فیس بوک، توییتر و گوگل

• نحوه ردیابی تغییرات در Word (آنلاین، موبایل و دسکتاپ)

• نحوه نظارت بر به روز رسانی وب سایت

• چگونه WordPress site را از یک میزبان به دیگری حرکت دهیم

• چگونه صفحات را در وب سایت وردپرس خود با رمز عبور محافظت کنیم

• چگونگی اضافه کردن یک Discord Widget به Website شما

• نحوه ذخیره گیف های متحرک در موبایل و کامپیوتر

• نظارت بر وب سایت و اتصالات اینترنتی پنهان

• 10 نکته و ترفند Gboard برای بهبود تایپ موبایل

• نحوه فعال کردن حالت تاریک در Microsoft Outlook (ویندوز، مک و موبایل)

• چگونه برای اجرای پرسرعتی WordPress در Microsoft Azure

• چگونه یک وب سایت جعلی یا تلاش فیشینگ را در این فصل تعطیلات تشخیص دهیم