اصول طراحی نسخه موبایل برای وب سایت
اگر وب سایت شما نسخه موبایل نداشته و یا طراحی آن به صورت واکنش گرا (ریسپانسیو) نباشد، حتما اخیرا پیامی از گوگل دریافت کرده اید که این موضوع را به عنوان مشکل جدی مطرح کرده و شما را نسبت به این موضوع مطلع کرده است :
Google systems have tested — pages from your site and found that 100% of them have critical mobile usability errors. The errors on these — pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users
در نگاه اول این پیام به مشکل مهمی اشاره دارد زیرا از کلماتی مانند Severely و Critical Mobile Errors استفاده شده است. یعنی مشکلات خیلی جدی! و شما را نگران کرده است. شما هم سریعا این موضوع را در گوگل جستجو کرده‌اید که حال باید چه کنم و راهکار چیست؟
این مشکل برای چیست؟ این پیام گوگل یعنی چه؟
ابتدا باید متوجه باشید که این پیام به چه دلیلی برای شما ارسال شده است. ساده است: سایت شما برای موبایل طراحی نشده و بازدیدکنندگان زیادی که از طریق موبایل وب سایت شما را بازدید می‌کنند، نمای خوبی از آن نمی‌بینند. سایت شما را در حالت زوم میبینند که بسیار کوچک و برای چشم خسته کننده است. به همین دلیل احتمالا سایت شما را در همان ابتدای کار می‌بندند و یا باید تمامی بخش‌ها را زوم بزرگ‌تر کنند تا بتوانند به خوبی مطالب سایت شما را مطالعه کنند. پس این مشکل اشاره به این دارد که سایت شما به صورت Responsive یا واکنشگرا طراحی نشده است.
سایت واکنشگرا یا ریسپانسیو چیست؟
یک سایت یا یک صفحه اینترنتی که رسپانسیو باشد، به گونه‌ای است که برای هر صفحه نمایشی (هر دستگاه متفاوتی مثل موبایل، تبلت و …) نمایش به خصوصی دارد و بخش‌های مختلف سایت به گونه‌ای مرتب برای نمایش در صفحات مختلف طرح ریزی شده‌اند، بدون اینکه نیازی به زوم باشد. تقریبا مثل یک اپلیکیشن موبایل، همه چیز در جای خود قرار دارد.
طراحی ریسپانسیو در مبحث طراحی سایت، هدفش این است که تجربه‌ای خوشایند را در مشاهده سایت، با قابلیت خواندن آسان محتوا، حداقل زوم و کاوش هر چه آسان‌تر صفحات برای بازدید کنندگانی که از طریق صفحات مختلف نمایش با سایزهای متفاوت از سایت بازدید می‌کنند به وجود آورد.
دقیقا یعنی چه؟!
در یک جمله یعنی: بازدیدکنندگانی که سایت شما را از طریق موبایل یا تبلت با صفحاتی کوچک‌تر از مانیتور کامپیوتر میبینند، بتوانند به راحتی با سایت شما ارتباط برقرار کرده و مدت‌ها آن را مرور کنند.
طراحی سایت واکنشگرا چه فایده ای دارد؟
طبق آمار، استفاده کنندگان از موبایل برای بازدید صفحات وب، روز به روز در حال رشد هستند و این رشد طی یک سال اخیر، بی‌سابقه بوده است و گوی سبقت را از بازدیدکنندگانی که از طریق کامپیوتر به وب گردی می پردازند ربوده است. این نشان می‌دهد که در صورتی‌که وب‌سایت شما بازدیدکنندگانی دارد، بخش اعظم آن‌ها را افرادی که از طریق موبایل وارد شده‌اند تشکیل می‌دهد.
اگر وب‌سایت شما برای موبایل آماده شده باشد، طبیعتا مخاطبان بیشتری را به خود جذب خواهد کرد و برعکس اگر نسخه موبایل نداشته باشد، بازدیدکنندگانی بسیاری را از دست خواهد داد و این یعنی خسارت! یعنی از دست دادن مخاطب به بهایی اندک. آمار زیر، میزان استفاده کنندگان از مرورگرهای موبایلی را نسبت به افرادی که از کامپیوتر استفاده می‌کنند نشان می‌دهد.
دو مدل سایت موبایلی
اولین نکته‌ای که باید در نظر داشته باشید این است که رسپانسیو بودن وب‌سایت براساس موبایل دیگر یک انتخاب نیست و در چند وقت آینده یکی از مهم‌ترین فاکتورهای گوگل برای بررسی سایت‌ها خواهد بود. بنابراین، هر چه زودتر به این مساله توجه کنید، بهتر است. برای این منظور باید به ۲ مدل از سایت‌های موبایلی و مزایا و معایب هر کدام توجه کنید:
طراحی سایت ریسپانسیو
این سایت‌ها برای هر دستگاهی مانند موبل و تبلت بهینه می‌شوند و محتوای آن‌ها به طور مناسبی به نمایش در می‌آید. مزایای چنین روشی این است که سایت شما فقط یک URL دارد؛ پس از نظر بهبود سئو، وظیفه کمتری برعهده خواهید داشت. همچنین، سایت شما در تمامی دستگاه‌ها به طور مناسبی نشان داده می‌شود اما این روش یک عیب دارد و آن گران بودن هزینه چنین طراحی سایتی است.
طراحی سایب اختصاصی برای موبایل
دامنه این سایت در زیر دامنه اصلی قرار می‌گیرد و به طور ویژه برای کاربران موبایلی طراحی شده است؛ یعنی محتوایی که در این سایت نشان داده می‌شود مختص دستگاه‌های موبایل می‌باشد. از مزایای این روش می‌توان به بهبود تجربه کاربر به دلیل اختصاصی بودن و آسان بودن نحوه پیاده‌سازی آن برای توسعه دهنده اشاره کرد. نکته منفی و عیب این روش این است که سایت شما از چند URL استفاده می‌کند و همین مساله در حین لینک‌سازی مشکل‌ساز می‌شود یا فرآیند را سخت و پیچیده خواهد کرد.
ویژگی‌های وب‌سایت موبایلی
فاکتورهای مختلفی برای بررسی این ویژگی سایت‌ها وجود دارد اما مهم‌ترین آن‌ها این چند مورد هستند:
- زمان بارگزاری صفحه: بسیاری از کاربران از انتظار برای بارگزاری صفحه بیزارند و اگر این مشکل در نسخه موبایلی وجود ندارد، پس سایت شما رسپانسیو است.
- سایز مناسب فونت در محتوای متنی: یکی از مشکلات سایت‌ها در نسخه موبایلی، بزرگ یا کوچک بودن فونت است. برای رسپانسیو شدن سایت باید این مشکل را برطرف کنید.
- فاصله زیاد بین لینک‌ها: این اتفاق زمانی رخ می‌دهد که می‌خواهید مطمئن شوید هر لینک چه مقدار بازدید دارد و لینک‌ها از یکدگیر فاصله زیادی پیدا می‌کنند.
- مسدود شدن تصاویر و جاوا اسکریپت: اگر تصاویر یا کدهای جاوا در موبایل مسدود شوند یا نمایش داده نشوند، این سایت برای موبایل رسپانسیو نشده است.
پلاگین‌های CMS ها برای طراحی سایت موبایلی
این پلاگین‌ها می‌توانند در رسپانسیو کردن سایت به شما کمک کنند:
- پلاگین‌های موبایل وردپرس: wp touch و Jet Pack هستند که از جمله پلاگین‌های کاربردی این حوزه محسوب می‌شوند.
- پلاگین‌های موبایل جوملا: پلاگین‌های Responsivizer و JoomlaShine برای این موضوع پیشنهاد می‌شوند.
- پلاگین‌های موبایل دروپال: دروپال دو ماژول ThemeKey و MobileTheme ارائه می‌دهد که برای رسپانسیوسازی سایت پیشنهاد میکنیم.
برای نسخه موبایل چه باید کرد؟
خیلی ساده است. دو حالت دارد:
- سایت شما فعال است اما نسخه موبایل ندارد.
- می‌خواهید سایت جدیدی راه‌اندازی کنید و نیاز به مشاوره دارید.
در حالت اول، کافی است برای سایت خود نسخه موبایل آماده کنید. در واقع باید طرح فعلی وب‌سایتتان را واکنشگرا کنید. این کار ساده است و به زیرساخت‌های سایت شما آسیب وارد نمی‌کند. یعنی طرح اصلی وب‌سایت که در کامپیوتر دیده می شود دستکاری نمی‌شود. فقط برای مشاهده در موبایل آماده‌سازی می‌شود. این کار توسط کدنویسان حرفه‌ای که کارشان طراحی ریسپانسیو است انجام می‌گردد. ما در آرنیکاوب، این کار را به راحتی و با کیفیتی بالا انجام می‌دهیم.
در حالت دوم، قبل از اینکه سایت جدید خود را راه اندازی کنید، پیشنهاد میکنیم که با کدنویسان حرفه‌ای مشورت کنید و در مورد طراحی واکنشگرای سایتتان نظرات آن‌ها را نیز جویا شوید. زیرا گاهی با هزینه‌ای بسیار کم، می‌توان از خسارتی زیاد جلوگیری کرد و همچنین می‌توان مخاطبان زیادی را جذب نمود. سایتی که واکنشگرا نباشد، اکنون دیگر نمی‌توان نام سایت را به آن داد!
برای داشتن یک سایت واکنشگرا با ما در ارتباط باشید.
با سلام و خسته نباشید .
بنده سایت پربازدیدی داشتم اما مثل اینکه امروز متوجه شدم دیگه هیچ مطلب و ایندکسی در گوگل ندارم.
یعنی فکرکنم گوگل سایت من را کلا حذف کرده .
آدرس سایتم موجوده . لطفا بررسی و پاسخی برای حذف کلی سایتم بدید.
متن گوگل وبستر ارور :
Sneaky mobile redirects detected on …………………
August 20, 2016
To: Webmaster of ……………
Google has detected sneaky redirects for mobile users on your site. This means that mobile users visiting your site are redirected to another page or are shown different content than your desktop users. This creates an unexpected experience for Google Search users and violates our Webmaster Guidelines. Therefore Google has prevented the offending pages from showing in search results. This manual spam action has been applied to musicom.ir/. To reinstate these pages in search results, remove the spam and file a reconsideration request. After we determine that you have complied with our guidelines, we will remove this manual action.
Here’s how to fix this problem:
۱
Find the configuration responsible for the sneaky redirects
Start by reading our guide on detecting sneaky mobile redirects. Sneaky redirects can be caused by code or an ad campaign on your site. Because the redirection can be caused by factors like visiting on specific browsers, devices, locations, or IP ranges, you should visit your site like how a typical user would visit it. For example, visit your site from Google Search using a mobile device.
Detect sneaky mobile redirects
۲
Remove the configuration causing the cloaking or sneaky redirects
We’ll discover these changes when we re-crawl your pages and update our index.
۳
Submit a reconsideration request
Once you fix your site, file for reconsideration to remove this manual action. Include any details or documentation that can help us understand the changes made to your site.
لطفا راهنمایی کنید .
ممنون .