اطمینان از سازگاری سایت با گوشی
پس از آنکه گوگل مسئله «موبایلگدون» را مطرح نمود، سازگاری وبسایتها با گوشیهای تلفن همراه به یکی از فاکتورهای اصلی در نتایج جستجو تبدیل شد. اهمیت این فاکتور روز به روز نیز در حال افزایش است. گوگل می خواهد مرتبطترین و با کیفیتترین صفحات که بیشترین سازگاری را نیز با گوشیهای تلفن همراه دارند، در نتایج جستجو نمایش داده شوند. گوگل بارها و بارها بر موضوع سازگاری با گوشیهای تلفن همراه تاکید نموده و مصمم است وبسایتها را به سمت آن سوق دهد. در این مقاله فهرستی کاربردی از مواردی که باید انجام دهید و یا نباید انجام دهید را برای شما آماده نمودهایم تا بتوانید وبسایت خود را به بهینهترین حالت ممکن برای گوشیهای تلفن همراه ارائه دهید. با بخش وبلاگ سایت دیاکو همراه باشید.
- از فلش استفاده نکنید: اکثر مرورگرهای تلفن همراه قادر به پردازش محتوای فلش نیستند. برای داشتن سایتی سازگار با گوشی تلفن همراه نباید از فلش استفاده کنید. توصیه گوگل این است که به جای فلش از تکنولوژیهای مدرن وب برای نمایش محتوای صفحه، انیمیشن و... استفاده کنید و فلش را بطور مطلق کنار بگذارید.
- تنظیمات تگ "viewport": تگ Viewport نوعی متا تگ است که برای مرورگر، نحوه نمایش صفحه در نمایشگرهایی با عرض های مختلف را تعیین می کند. اگر تگ "viewport" وجود نداشته باشد، مرورگر تلفن همراه به طور پیش فرض صفحه را با عرض نمایشگر رومیزی نمایش میدهد. بعضی از توسعه دهندگان، "viewport" را بر روی یک مقدار ثابت که با اندازه معمول نمایشگر تلفنهای همراه سازگار است، تنظیم می کنند. اما این همان کاری است که نباید بکنید. زیرا این مقدار ثابت نمیتواند با نمایشگر همه دستگاههای مختلف هماهنگ باشد و چنین سایتی از نظر گوگل با تلفن همراه سازگار نیست. در صورتی که بر اساس دستورالعمل گوگل عمل نموده و عرض صفحه را برابر با عرض نمایشگر دستگاه تنظیم کنید "width=device-width"، صفحه شما با نمایشگر همه دستگاههای مورد استفاده کاربران سازگار خواهد بود. در صورتی که ویژگی "initial-scale=1" را نیز به صفحه خود بیفزایید، صفحه شما با حالات افقی و عمودی صفحه نمایش سازگار خواهد شد و همچنین تمام عرض صفحه نمایشگر را پر خواهد کرد. مطمئن شوید که سایز محتوای خود را بر اساس "viewport" تنظیم نمودهاید. اگر عرض عناصر صفحه مانند تصاویر و ویدئوها را بر روی یک مقدار ثابت تنظیم کرده باشید، در نمایشگرهای کم عرضتر از مقدار تعیین شده، با مشکل مواجه خواهید شد. در کدهای "CSS" صفحه میتوانید به جای یک عرض ثابت از عرض نسبی استفاده کنید.
- فونت بزرگ: در صورتی که تنظیمات "viewport" را به درستی انجام داده باشید، اندازه فونت خود به خود با نمایشگرهای مختلف هماهنگ خواهد شد، اما گوگل در رابطه با فونت نیز توصیههایی دارد. گوگل توصیه میکند که یک فونت پایه 16 پیکسل یا "em" را برای صفحه خود در نظر بگیرید و سایر اندازهها مانند small و large را بر اساس این فونت پایه تعریف کنید. فاصله عمودی بین خطوط نیز باید "1.2em "باشد. همچنین سعی کنید که از زیاد به کار بردن اندازه فونتهای مختلف خودداری کنید زیرا باعث می شود صفحه خیلی شلوغ و به هم ریختهای داشته باشید.
- فواصل لینکها و کلیدها: تپ کردن روی لینکها و کلیدها در موبایل و تبلت دشوارتر از کلیک کردن روی آنها در رایانههای رومیزی است، چون نوک انگشت خیلی بزرگتر از نشانگر ماوس است. گوگل به لینکها و کلیدها، «اهداف تپ» "tap targets" میگوید و به صفحاتی که اهداف تپ در آنها بسیار کوچک و نزدیک به هم باشند امتیاز منفی میدهد. اندازه متوسط عرض انگشت یک فرد بزرگسال حدود 10 میلیمتر است. گوگل حداقل اندازه حدود 7 میلیمتر یا 48 پیکسل را برای اهداف تپ و به ویژه اهداف تپ مهم، مانند کلیدهای پرکاربرد، منوهای ناوبری و نوار جستجو توصیه میکند. اهداف تپ کم اهمیتتر را میتوان کوچکتر در نظر گرفت، اما باید بین اهداف مختلف، فاصله کافی وجود داشته باشد تا وقتی کاربری سعی دارد با انگشت بر روی یکی از آنها بزند، انگشت او به علت فضای کم بین آنها تصادفاً به لینک یا کلید مجاور برخورد نکند. فاصله توصیه شده برای اهداف کوچکتر، حداقل 5 میلیمتر است.
- عدم استفاده از صفحات واسط: صفحات باز شونده یا "pop-up" که صفحات واسط نیز نامیده میشوند، در نمایشگر تلفن همراه میتوانند بسیار دست و پاگیر باشند و نمایش سایت را با مشکل مواجه کنند. استفاده از چنین "pop-up"هایی باعث میشود گوگل شما را جریمه کند. گوگل توصیه میکند به جای استفاده از صفحات واسط تمام صفحه، از بنر استفاده کنید.
- ابزارهای گوگل: آسانترین راه بررسی سازگاری یا عدم سازگاری سایت با تلفن همراه، استفاده از ابزارهایی است که گوگل به همین منظور فراهم کرده است. در "Search Console" گوگل بخشی با عنوان "mobile usability" قرار دارد که می تواند همه موارد مشکلساز را در سایت شما تشخیص دهد که معمولاً یکی از مواردی است که در بالا مورد بحث قرار گرفت. همچنین میتوانید از میزان سازگاری سایر صفحات وب نیز آگاهی پیدا کنید. برای این منظور باید URL صفحه مورد نظر را در بخش "Mobile-Friendly Test" وارد کنید. بخشی با عنوان "common mistakes made when designing for mobile" نیز برای توسعهدهندگان وجود دارد که در مورد مشکلاتی مانند محتواهای غیر قابل اجرا، "faulty redirects" و 404 و نحوه برطرف کردن آنها توضیح داده شده است.
- سرعت: گوگل توصیه کرده است که برای سازگار نمودن وبسایت خود با تلفن همراه، سرعت سایت خود را بالا ببرید. هر چند گوگل، سرعت بالا را به عنوان یکی از شرایط سازگاری با تلفن همراه ذکر نکرده، اما میدانیم که سرعت یکی از فاکتورهای رتبهبندی است و آمارها نشان میدهد که اگر سرعت سایتی پایین باشد، کاربران خیلی زود آن را ترک خواهند کرد. بنابراین اگر میخواهید سایت شما تا بیشترین حد ممکن با تلفن همراه سازگاری داشته باشد و بهترین تجربه را برای کاربران ایجاد کند، باید سرعت سایت خود را تا بالاترین حد ممکن افزایش دهید. ابزار "PageSpeed Insights" گوگل، بخشی با عنوان "mobile" دارد که برای صفحه شما از 100، رتبهای را مشخص نموده و برای برطرف نمودن عوامل احتمالی کاهش سرعت پیشنهاداتی را مطرح می نماید. این ابزار، در مورد تجربه کاربری نیز از 100، رتبهای به سایت شما میدهد و موارد ناسازگار با تلفن همراه را برای شما مشخص می کند.
راه دیگری که برای داشتن یک سایت سازگار با تلفن همراه وجود دارد این است که یک نسخه "AMP" برای سایت خود ایجاد کنید. البته این فقط یک گزینه است و برای داشتن یک سایت سازگار با تلفن همراه ضروری نیست.
سایر مطالب مرتبط با وبسایت تخصصی، وبسایت فروشگاهی، وبسایت گردشگری، سئو و تولید محتوا و نرمافزارهای اختصاصی را در وبلاگ و سایت دیاکو مطالعه کنید.












