الگوریتم های گوگل هرروز در حال بهینه شدن هستند. چه مسائلی برای گوگل اهمیت بیشتری پیدا می کند تا الگوریتم های خودش را آپدیت کند؟
قطعا تجربه کاربری مثبت کاربران که از موتور جستجوی گوگل استفاده می کنند برای گوگل اهمیت پیدا می کند.
برای اینکه کاربران تجربه کاربری عالی داشته باشند هرکدام از بخش های سایت که مورد نظر گوگل هستند باید به نحوه درستی در دسترس کاربران قرار گیرند. از جمله آنها بخش موبایل فرندلی بودن سایت در نتایج موتورهای جستجو هست. قطعا اگر بهترین کدنویسی و طراحی را انجام داده باشید؛ خواهید دید یکسری خطاها بوجود خواهد آمد. اما برای شناسایی این خطاها به ابزارهای قابل اعتماد نیاز دارید. در ادامه می خواهیم ابزارهای معروف موبایل فرندلی بودن سایت هم به شما معرفی کنیم و همچنین بطور کامل تمام خطاهای رایج موبایل برای شما توضیح دهیم.
قبل از اینکه سراغ معرفی خطاها در بخش موبایل سایت شویم. بهتر است که ابزارهای شناسایی ارورهای بخش موبایل سایت را بشناسیم. از جمله ابزارها:
Google Search Console >> Experience >> Mobile Usability
Google Developers Mobile Friendly Test tool
W3C Mobile Checker
bing.com/webmaster/tools/mobile-friendliness
همیشه فکر می کنید کارها درست جلو می رود اما خطاهای هستند که سایت شما را در نتایج جستجو بدرستی نمایش نمی دهد. بهتر راهکار این است که با خطاها آشنا شوید و راه حل های مناسبی ارائه دهید. در ادامه می خواهیم ارورهای که در سرچ کنسول سایت هستند را معرفی کنیم؛ حتی مواردی که داکیومنت گوگل در مورد خطاهای موبایل در سایت معرفی کرده است هم بگوییم. برای یادگیری بهتر پیشنهاد می کنیم خطاهای سایت خودتان را برطرف کنید.
1- Uses incompatible plugins
اولین خطا در داکیومنت گوگل Uses incompatible plugins است که مرتبط با پلاگین های که ناسازگار با مرورگرهای موبایل کاربران است. از جمله آنها فلش ها هستند که باعث تجربه بد کاربری می گردد. به همین دلیل گوگل پیشنهاد داده است که کدنویسی را جایگزین پلاگین یا افزونه برای نمایش انیمیشن های سایت خود کنید.
در حال حاضر با روی کار آمدن HTML 5 و CSS3 می توانید بهترین انیمیشن ها در سایت خودتان پیاده سازی کنید و بهترین جایگزین برای انیمیشن های که با جاوااسکریپت پیاده سازی شده اند هستند. اما هیچ وقت جاوا اسکریپت رو دست کم نگیرید.
در حال حاضر کمتر کسی هست از فلش استفاده می کند؛ اما پیشنهاد شده است بجای استفاده از فلش، کدهای HTML5 , CSS3 استفاده کنید. اگر خودتان کدنویسی بلد هستید که دست بکار شوید اما اگر بلد نیستید پیشنهاد می کنم که یکسری از نکات را به برنامه نویستان برای بهینه شدن کدها یاد آوری کنید. از جمله:
Use CSS when you have smaller, self-contained states for UI elements.
Use CSS animations for simpler "one-shot" transitions, like toggling UI element states.
نکات مهم این است که اگر حالت های نمایشی کوچکی دارید از css استفاده کنید.
قبل از هرچیزی باید گفت که انیمیشن در CSS با ورژن HTM5 معرفی شده است. اگر می خواهید انیمیشن در سی اس اس تعریف کنید از دستور @keyframes استفاده کنید. این بهترین روش برای جایگزین کردن کدهای سنگین جاوا اسکریپت هست. البته فراموش نکنید چه پروژه ای در دست دارید اگر پروژه خیلی سنگین هست و نمی توانید از کدهای css برای پیاده سازی انیمیشن های استفاده کنید از کدهای جاوا اسکریپت بهینه شده استفاده کنید.
بعضی از مرورگرها از دستور @keyframe پشتیبانی نمی کنند همانند مرورگر اینترنت اکسپلورر، برای حل چنین مشکلی پیشنهاد می گردد که ms را قبل از @keyframes استفاده کنید. همانند :
اینترنت اکسپلورر -ms-@keyframes bounce
یا برای مرورگرهای همانند فایرفاکس –moz-
کروم و سافاری پیشوند -webkit-
اپرا -o-
در نظر گرفته میشود.
Use CSS animations for simpler "one-shot" transitions, like toggling UI element states.
body {
font: 1em sans-serif;
text-align: center;
}
.stage {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
} .box {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: #F44336;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
.bounce-1 {
animation-name: bounce-1;
animation-timing-function: linear;
}
@keyframes bounce-1 {
0% { transform: translateY(0); }
50% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}
بهینه ترین کدنویسی برای پیاده سازی بهتر transitions یکی از انواع انیمیشن در css هست. اما اگر می خواهید، بهتر با css آشنا شوید پیشنهاد می کنیم به لینک زیر بروید.
https://css-tricks.com/making-css-animations-feel-natural/
استرس نگیرید! نیازی نیست حتما css بصورت حرفه ای یادبگیرید اما لازم است که با آنها آشنایی کافی داشته باشید.
خطاهای موبایل فرندلی تنها این موارد نیستند ، در نوشته های بعدی بیشتر در مورد این موارد صحبت می کنیم.
