همان گونه که بارها گفته شده است، موبایل فرندلی بودن یک سایت امروزه امری بسیار مهم و ضروری برای هر سایت بوده و از لحاظ تأثیر در سئو نیز آیتمی فوق العاده مهم محسوب میگردد. اما سوالی که برای بسیاری از طراحان مطرح میگردد این است که: «موبایل فرندلی بودن چه استانداردهایی دارد؟» یا «یک قالب موبایل فرندلی ایده آل چه ویژگیهای خاصی را دارا میباشد؟» در این نوشتار به تشریح این موضوع برای شما علاقه مندان خواهیم پرداخت:
به عنوان مقدمه بایستی اظهار داریم که در حال حاضر، سایتهای بسیاری وجود دارند که دربارهی این موضوع اطلاعاتی را ارائه نمودهاند. به علاوه کلیپهای آموزشی بسیاری توسط سایتهایی نظیر لیندا و Tutsplus جهت نشان دادن چگونگی ایجاد یک سایت که دارای قابلیتهای استاندارد نمایش در موبایل میباشد ارائه گشته است. با این حال ما در این مقاله از سایت اصلی ارائه دهندهی امکانات موبایل فرندلی اطلاعات مهمی را در اختیار شما قرار خواهیم داد:
نخستین سایتی که به عنوان سایت استفاده کننده از پلتفرم موبایل فرندلی به صورت رسمی شناخته میشود، Audi نام دارد. سایت Audi ارائه دهندهی محصولات شرکتی به همین نام میباشد که با توجه به این موضوع که مشتریان این محصولات از موبایلهای خود جهت مشاهدهی تولیدات این شرکت استفاده میکردند، بنای اصلی این استاندارد را به شکلی استاندارد در اختیار کاربران سایت قرار داد. میتوان گفت محبوبیت و مشهور بودن نام این شرکت نقش مهمی در توسعهی این امکانات داشته است.
با این همه سایت W3 به عنوان سایت اصلی و رسمی که به تعریف استانداردهای موبایل فرندلی میپردازد و کاربران را با طراحی سایت استاندارد در این زمینه آشنا میکند شناخته میگردد. سایت W3 در حقیقت به بنا نهادن استانداردهای وب همت میگمارد. کلیهی برنامه نویسان وب این سایت را به عنوان مرجعی برای فعالیتهای خود در نظر گرفته و محتوای تأیید شده در این سایت مورد استفادهی برنامه نویسان قرار میگیرد.
بنابراین موتورهای جستجو مثل گوگل و یاهو و بینگ و … همیشه استانداردهای رنک دهی خود به صفحات وب را با استانداردهایی که در این سایت مهیا شده تنظیم و هماهنگ مینمایند. در نتیجه اطمینان داشته باشید که این سایت اطلاعات دقیق و مبنایی را برای کلیه استانداردها از جمله بحث موبایل فرندلی ارائه میدهد.
ما قصد داریم در این مقاله راهبردهای کلیدی را با کمک این سایت به حضورتان معرفی نماییم.
استاندارد W3 برای موبایل فرندلی
همانطور که می دانید در عصر حاضر تعداد افرادی که به موبایلهای هوشمند دسترسی دارند بسیار زیاد است. در نتیجه در دنیای مجازی میتوان روی این موضوع برنامه ریزی کرد و تولید کنندگان مطالب، حساب ویژهای روی آن باز نمودهاند. لذا تولید کنندگان محتوا باید بتوانند به خوبی به شناخت پتانسیلها و محدودیتهای این دستگاه پرداخته و فناوریهایی که این دستگاهها مورد استفاده قرار میدهند را بشناسند. به وب سایتهایی که از فناوریهای به کار رفته در تلفن همراه جهت ارائه محتوا و مطالب متناسب با موبایل استفاده مینمایند، در اصطلاح وب سایتهای mobile-friendly گفته میشود.
نوشتن سایت برای موبایل و به کار بردن کدهای ویژه
در حالت معمول باید بتوانیم بدون تغییر یک خط کد سایت را در موبایل خود بدون مشکل ببینیم. یک طراح بایستی بتواند نهایت تلاش خود را برای استفادهی بهتر امکانات موبایل از جانب کاربران به کار گیرد. این موضوع به علت موارد فنی از جمله محدودیتهای CPU و حافظه و یا جایگزینی کلیک موس با فشردن صفحه میباشد.
آیا فناوری تازهای جهت گسترش سایت برای موبایل وجود دارد؟
در طی سه سال گذشته W3C برای فراهم نمودن فناوریهای جدید جهت هماهنگی بین وب و دستگاههای موبایل فعالیتهای زیادی را انجام داده است. از جمله این فناوریها میتوان به موارد ذیل اشاره نمود:
Css mobile
هنگامی که بعد از یک سال و در سال 2015 میخواهید به تغییرات css پی ببرید متوجه خواهید شد که مقررات به کار رفته در آن با قوانین سال 2014 هیچ تفاوتی ندارد. تغییرات جزئی نامی به کار رفته هم از کارایی بالایی برای سایتها برخوردار نمیباشد. اغلب طراحان سایت بجای اینکه از فضاهای نامی جهت کاراکترهای فارسی استفاده نمایند از فونت فارسی بهره میبرند. به این دلیل که فونت فارسی حذف شدنی نیست، استفاده از دو ابزار جهت انجام یک کار توجیه پذیر نمیباشد.
Svg tiny
در صورتی که SVG برایتان لغتی نامانوس است، باید گفت که این فناوری با HTML5 به طراحی سایت افزوده شده است و ایجاد گرافیکهای ریسپانسیو با حجم پایین از اهداف آن میباشد. در حقیقت SVG به صورتی است که شکلهای گرافیکی را با کد تولید مینماید. بنابراین یک شکل بدون تغییر حجم نهایی صفحه وب، در هر حجمی نمایش داده میشود. جهت تولید SVG باید شکل مورد نظر را در نرم افزار فتوشاپ با ابزارهای رسم شکل (دایره، مستطیل گوشه گرد، فونت،Pen، ابزار مستطیل، خط، شکل سفارشی) ایجاد نمود و فرمان File/Export/svg را پیاده سازی کرد. فناوری SVG Tiny که در این مقاله به آن اشاره شده است، SVG 1.2 میباشد که جزیئات آن در سایت W3 ارائه شده است. اما آسانترین و مناسبترین راهکار ایجاد svg همان روشی است که با فتوشاپ ورژن 2017 بیان شده است.
Xhtml for mobile
این نسخه برای موبایل ارائه شده است که توضیح کد نویسی های آن به دلیل پیچیدگی در این مقاله امکان پذیر نیست. در این نسخه از HTML تعامل با کاربران همچنان پا برجاست.
نحوه اطلاع از Mobile friendly بودن سایت
شما به آسانی در صورتی که قصد بررسی یک سایت را دارید میتوانید از نشانی http://search.google.com/test/mobile-friendly درجستجو گر گوگل استفاده نمایید. این سایت طرز کار بسیار راحتی دارد. برای این منظور میتوانید نشانی سایتتان را با تمام اجزا در نوار ابزار سایت جایگذاری نموده یا بنویسید و روی دکمهای که در پایین نوار ابزار وجود دارد، کلیک نمایید.
در صورتی که قصد دارید یک سایت را به نسخه موبایل فرندلی تبدیل نمایید سه تکنیک پیش روی شماست. گفتنی است که هر کدام از این تکنیکها دارای ویژگیهای منفی و مثبت خود میباشند.
روش ریسپانسیو
طراحی Mobile first در شرایط کنونی بسیار فراگیر شده است. این عبارت به معنای طراحی سایت بر مبنای موبایل است. دربارهی صفحاتی که حجم بیشتری دارند باید گفت، مدیا کوئری ها کاربرد خوبی میتوانند داشته باشند. در زمینهی طراحی ریسپانسیو در مدیا کوئری بر مبنای درصد، برای تگهایی که سایت را ایجاد نمودهاند یک مقدار را در نظر میگیریم. این عمل منجر میشود تا در صفحاتی که اندازههای متغیر دارند این تگها بزرگ و کوچک شوند. یکی از نکات مثبت ریسپانسیو این است که در صورتی که دستگاه تغییر نکند و تنها اندازه پنجره نمایش تغییر نماید هم تغییر اندازه تگها اجتناب ناپذیر است.
روش آداپتیو
این روش به گونهای است که فقط اندازههای مشخصی از صفحه دارای طراحی میباشند. بر ای هر کدام از این اندازهها یک استاندارد ویژه در نظر گرفته شده است و تغییر حالت صفحه سایت تنها زمانی است که به این اندازهها برسد و اندازهی درصدی هم به تگها تعلق نمیگیرد.
روش AMP
این روش در حقیقت یک صفحه است که به گونهای جداگانه با کدهای ویژهی خود طراحی میشود و در صورت بازکردن سایت از جانب کاربر توسط موبایل؛ انتقال به آن صفحه صورت میگیرد. در طراحی َ AMP از استاندارد تک صفحهای استفاده شده است و مسئلهی مهم اینجاست که یک سایت نسخه AMP بخواهد تبدیل شود.
موضوعات عمده در موبایل فرندلی
1-ممنوعیت کاربرد فلش
مدت زیادی است که کاربرد فلش در وب منسوخ شده است، اما هنوز هم استفاده از آن توسط بعضی از کاربران صورت میگیرد. توجه به این نکته الزامی است که فلش در موبایل اجرا نمیشود. برای این منظور میتوانید از خصوصیت Canvas در HTML5 به علاوهی جاوا اسکریپت استفاده نمایید تا روشی جایگزین برای فلش داشته باشید.
2- فرمت فیلمها
پخش فیلم در موبایل مستلزم داشتن نرم افزار مربوطه میباشد. لازم به ذکر است که در اغلب جستجوگرهای فعلی کدک های تصویری مورد نیاز جهت پخش فیلم موجود بوده و استانداردهای HTML5 در صفحات شما را برای تماشای فیلم یاری مینماید.
3-منوهای شناور ممنوع
حتماً می دانید که هاور کردن در موبایل معنایی ندارد. در نتیجه استفاده از منوی شناور در موبایل امکان پذیر نیست. برای این منظور میتوانید از بوت استرپ استفاده نمایید که در آن کدهای مورد نیاز جهت تبدیل یک منوی شناور به یک منوی قابل استفاده در موبایل موجود است. ذخیرهی این کدها از سایت رسمی بوت استرپ و یا سایت W3schools انجام میشود.
4-حذف اسلایدر ها در نسخه موبایل
در بازار میتوانید از اسلایدرهای ریسپانسیو متنوعی استفاده نمایید، اما در واقع اسلایدر در موبایلهای کوچک کارایی خاصی ندارد؛ درنتیجه تغییر آن با عکس ثابت میتواند راهگشا باشد.
CMS های موبایل فرندلی
CMS ها و تمهایی که انتخاب میشوند تا به وسیلهی آنها طراحی سایت را انجام دهند، بایستی Mobile friendly باشند. جهت پی بردن به این موضوع که CMS یا تم انتخابی Mobile friendly هست یا نه، توضیحات ذکر شده در سایت شرکت ارائه دهنده آن میتواند کمک شایانی به شما نماید. در حال حاضر امکان به کارگیری طراحی سایت ریسپانسیو توسط اغلب سیستمهای مدیریت محتوا فراهم شده است. ولی باز هم ممکن است در زمان کار با یک سیستم متن باز، تمهایی که به طور صحیح ریسپانسیو نشدهاند نیز دیده شوند.
جمع بندی
طراحی موبایل فرندلی به روشهای متعددی انجام میپذیرد. در صورتی که قصد انتخاب یک روش را داشتید سعی کنید موارد زیر را مد نظر قرار دهید: اولاً دقت داشته باشید که کدهای شما در این طراحی به تغییر نیاز دارد یا خیر. ثانیاً نیاز به تغییر در نشانی صفحات سایت شما وجود دارد یا خیر.
در طراحی موبایل فرندلی معمولاً برنامه نویسان اغلب به علت فراموشی اندازه فونت را تغییر نمیدهند، اما همین موضوع برای سئو از اهمیت زیادی برخوردار است، در نتیجه اگر توسط یکی از تکنیکهای درصد، فونتهایتان را تعیین اندازه نمایید تأثیر بهتری خواهید دید.
جهت ایجاد سایتهای موبایل فرندلی، به هیچ عنوان استفاده از روش Rem در بوت استرپ 4 پیشنهاد نمیشود زیرا از جستجوگرهای قدیمیتر حمایت و پشتیبانی لازم را انجام نمیدهد.
سون بک لینک » مرجع خرید بک لینک
سلام
درباره ارور زیر باید چیکار کرد ؟!
Clickable elements too close together
مثل سایر مطالبتون خیلی خوب بود ممنونم که پست های کاربردی میذارید
مطالبتون خیلی خوب و مفید هستند ممنونم
درود بر همه دوستان
ممنون میشم از سایت ما دیدن فرمائید. نوین بین برای افرادی که تغییر را رقم خواهند زد.
http://novinbin.com
سلام
خیلی عالیه کلا طراحی واکنشگرا خیلی مبحث دوست داشتنی شده
سلام
ای ول استاندارد های موبایل فرندلی خیلی خیلی جدی شده چون الان سایت ما از این پشتیبانی میکنه ولی استاندارد نوشته نشده و در سرچ کنسول هم خطا موبایل فرندلی میده، ولی فکر کنم زیاد از جاوااسکریپت ها استفاده شده است
سایت ما یک فروشگاه اینترنتی کولر گازی است و جزء تخصصی ترین فروشگاه هایی است که بهترین کولر گازی هم بصورت عمده و هم به صورت تکی می توانید بهترین کولر گازی را خریداری کرد https://coolernew.com/shop/air-conditioner/split-30000/
بنظرم amp برای موبایل کافی باشه خودش موبایل فرندلی میشه