ویژگی طراحی سایت سازگار با موبایل

چگونه می توان یک وب سایت را سازگار با موبایل کرد؟ برای سازگاری سایت با نسخه تلفن همراه چه تنظمیات و فاکتورهایی ضروری است؟ در طراحی نسخه موبایل چه نکاتی باید رعایت شود؟ در این مطلب ابتدا 10 ویژگی مهم سایت های ریسپانسیو و سازگار با موبایل ( mobile friendly ) و تبلت را تشریح می کنیم و سپس نکات مهم که باید در طراحی نسخه موبایل رعایت شود را ذکر می کنیم.

نکته مهم: رتبه بندی در گوگل براساس نسخه موبایل سایتها انجام میشود، یعنی برای گوگل مهم است که نسخه موبایل سایت شما چه محتوای را نمایش میدهد، چه لینکهایی دارد، منو، فوتر و سایدبار چه وضعیتی در موبایل دارند، سرعت سایت در موبایل چقدر است. نسخه ای که در کامپیوتر( دسکتاپ) به کاربر نمایش داده میشود، در اولویت دوم قرار داد. در یکی دو سال اخیر با رونمایی از الگوریتم mobile-first indexing گوگل، خیلی از سایتها به دلیل ناسازگار بودن با موبایل، افت رتبه داشته اند.

اگر وب سایت شما تجربه کاربری خوبی را در تلفن های همراه ارائه می دهد و اصول سئو سایت را نیز رعایت کرده باشید ، پس باید رتبه خوبی در گوگل داشته باشید زیرا سایت شما موبایل فرندلی است. درصورتیکه وب سایت شما با ایرادات زیادی هنگام بارگزاری در موبایل روبروست ، حتما موارد زیر را بررسی و تغییرات لازم را اعمال کنید.

معمولا بسیاری از قالب های وردپرس ، بصورت پیش فرض سازگار با موبایل طراحی شده اند ، اما زمانی که شما آن را نصب می کنید و سپس با تغییراتی که در نتیجه درج تصاویر ، محتوا و افزونه های جدید ایجاد می کنید ، امکان دارد کمی قابلیت سازگاری با موبایل سایت دستخوش تغییر شود.

مقایسه وضعیت نسخه موبایل و دسکتاپ در pagespeed insights

برای اینکه متوجه شوید نسخه موبایل شما چقدر از نظر عملکرد با نسخه دسکتاپ تفاوت دارد میتوانید از ابزار pagespeed گوگل استفاده کنید. از طریق لینک تست سایت با pagespeed insights میتوانید آموزش لازم در این باره را ببینید. این ابزار سایت را هم از نظر نسخه موبایل و هم دسکتاپ بررسی و امتیازدهی میکند. اگر افت رتبه را تجربه کردید، احتمالا امتیاز نسخه موبایل سایتتان خیلی کمتر از امتیاز نسخه دسکتاپ است.

سازگاری سایت با موبایل

نسخه موبایل سایت ، برای رتبه بندی سایت ها در گوگل ، نسبت به نسخه دسکتاپ اولویت دارد و این موتور جستجو براساس میزان سازگاری سایت ها با موبایل ، رتبه بندی را انجام می دهد. علت این اولویت بندی را می توان در افزایش چشمگیر کاربران موبایلی و استفاده از تلفن های همراه هوشمند جهت جستجو در گوگل ، جویا شد. طبق آمار منتشر شده در حال حاضر تعداد جستجوهایی که از طریق تلفن همراه در گوگل انجام می شود معادل 60 درصد کل آمار است.

ده مورد از ویژگی های یک سایت سازگار با موبایل که تغییرات هرچند کوچکی در سایت شما ایجاد می کنند را توضیح می دهیم. اجرای مجموعه این فاکتور ها که جز ویژگی طراحی سایت ریسپانسیو است ، می تواند نقش موثری در بهبود رتبه سایت شما در گوگل داشته باشد. اگر می خواهید یک سایت کاملا موبایل فرندلی داشته باشید حتما موارد زیر را با دقت مطالعه نمایید.

همچنین شما می توانید از طریق ابزار رایگان میزان سازگاری سایت با نسخه تلفن همراه که توسط گوگل ارائه شده ، وضعیت سایت خود را از این نظر چک کنید. از طریق کلیک روی لینک روبرو اقدام نمایید: mobile friendly test

فرم ثبت اطلاعات سازگار با موبایل

اگر سایت شما از فرم های ثبت سفارش ، ثبت درخواست و یا جمع آوری اطلاعات تماس مانند شماره تلفن یا آدرس ایمیل کاربران استفاده می کند اولا باید کاملا بهینه و سازگار با تغییرات ابعاد نمایشگر باشد. همچنین هر قسمت دارای تگ ویژکی مناسب باشد. مثلا در قسمت ثبت ایمیل ، نباید کاربر بتواند بدون درج @ عبارتی را ثبت کند. یا در قسمت درج شماره تماس ، فقط مقادیر عددی قابل ثبت باشند. یکی از ویژگی های مهم در فرم ثبت اطلاعات ، استفاده از لغت نامه است. مثلا اگر فردی به اشتباه نام شهر خود را سیراز ثبت کند ، فرم ثبت درخواست ، قابلیت تشخیص عبارت اصلی و تبدیل سیراز به شیراز را داشته باشد.

عرض مناسب صفحه

وب سایت خود را در لپ تاپ در یک مرورگر باز کنید و عرض مرورگر را به کمترین حالت ممکن کاهش دهید ، چیزی که مشاهده می کنید نحوه نمایش سایت شما در تلفن همراه خواهد بود. با مشخص شدن ابعاد و عرض صفحه در این وضعیت می توانید عرض مناسب صفحه برای موبایل را با درج تگ <meta name = viewport content = ‘width = > را تعیین نمایید.

عرض تصاویر را روی 100٪ تنظیم کنید

پس از اینکه وب سایت را با عرض دلخواه مناسب موبایل کردید ، طبیعتاً برخی از تصاویر بسیار بزرگ نمایش داده خواهند شد.

برای رفع این مشکل ، حداکثر عرض تصاویر را  100٪ قرار دهید  تا در صورت بزرگ بودن تصویر در موبایل به صورت خودکار تغییر سایز دهند و متناسب با صفحه تلفن همراه کوچک شوند.

عرض محتوا را نیز 100٪ کنید

پس از تنظیم عرض تصاویر ، حال شما باید عرض محتوا ، قالب بندی و بخش های مختلف یک صفحه را نیز روی 100 درصد تنظیم نمایید.

دکمه های cta و ثبت درخواست

همانطور که در نسخه دسکتاپ سایت ، دکمه های cta  عمل می کنند در موبایل نیز باید عملکرد درستی داشته باشند و کاربر بتواند به راحتی و بدون مشکلی از طریق تلفن همراه ثبت درخواست ، سفارش ، کلیک روی لینک های مربوطه را انجام دهد.

همچنین چون برخلاف لپتاپ و اینترنت adsl ، اینترنت تلفن همراه معمولا با اختلال مواجه می شود و در صورتی که دکمه cta یک بار غیرفعال شود امکان دارد کاربر دوباره نتواند روی آن کلیک کند.

قابلیت نمایش کامل عبارات طولانی

ممکن است سایت شما در موبایل بسیار کم عرض تر از برخی از عبارات طولانی پیوسته مانند یک شماره حساب ،  کد یا URL بلند باشد. پس عبارت مورد نظر به درستی نمایش داده نمی شود. برای رفع این مشکل عبارات طولانی پیوسته را از طریق دستور WORD-WRAP درون یک چهارچوب مشخص قرار دهید.

حذف فضاهای خالی اضافی

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

استایل های سفارشی برای موبایل

گاهی اوقات استفاده از تصاویر کوچک برای موبایل در دسکتاپ به خوبی نمایش داده نمی شود و چون نسخه موبایل سایت برای گوگل در اولویت است ، شما می توانید از استایل های سفارشی و تولید کدهای CSS برای نمایش عنصری خاص در موبایل و عدم نمایش آن در دسکتاپ استفاده کنید.

قابلیت زوم کردن در موبایل

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

فونت های استاندارد و سازگار با موبایل

استفاده از فونت های سفارشی به وب سایت شما ظاهری حرفه ای می بخشد ، اما قبل از نمایش سایت برای کاربران ابتدا زمانی صرف بارگزاری فونت می شود که موجب کاهش سرعت سایت در موبایل خواهد شد. پس بهتر است که از فونت های استاندارد برای سازگاری بیشتر سایت با موبایل استفاده نمایید.

جهت بهینه سازی بیشتر سایت خود برای موبایل می توانید مقاله روش های سئو برای نسخه موبایل را مطالعه نمایید.

طراحی نسخه موبایل سایت

با افزایش استفاده از موبایل برای خرید ، جستجو در اینترنت و بازدید سایت ها ، طراحی نسخه موبایل سایت و توجه به واکنش گرا بودن قالب اهمیت زیادی دارد. بسیاری از سایت ها در نسخه کامپیوتر عملکرد خوبی دارند اما در تلفن همراه به درستی اجرا نمی شوند که موجب از دست رفتن تعداد زیادی بازدید و مشتریان احتمالی می شود. اگر وب سایت شما نیز چنین مشکلی دارد ، دو راه پیش رو دارید ، یا اینکه قالب سایت بصورت ریسپانسیو و سازگار با موبایل ، باز طراحی شود و یا تنظیمات خاصی روی آن انجام شود. البته حالت دوم برای زمانی است که برنامه نویسی قالب کاملا صحیح انجام شده باشد و یا نهایتا با چند تغییر ساده ، شرایط نمایش سایت در موبایل به وضعیت مطلوب برسد.

همچنین چون یکی از مهم ترین فاکتورهایی که گوگل برای رتبه بندی سایت ها در نظر می گیرد، سازگاری سایت با موبایل است، پس برای اینکه رتبه بهتری در نتایج جستجو کسب کنید ، توجه به نسخه موبایل ضروری است. حتی طبق اعلام گوگل ، در سال 2021 ، اولویت اصلی این موتور جستجو برای رتبه بندی ، مقایسه نسخه تلفن همراه سایت ها است و هر سایتی که از این نظر عملکرد بهتری داشته باشد می تواند به حضور در صفحه اول و رتبه های اول تا سوم موتورهای جستجو امیدوار باشد.

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

تنظیمات وب سایت برای موبایل

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

طراحی منو ریسپانسیو

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

فاصله مناسب لینک ها

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

متناسب سازی عرض صفحه با موبایل

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

دکمه تماس با ما

حتما در نسخه موبایل باید دکمه های cta به ویژه تماس با ما بصورت واضح در دید کاربر باشد. به علت کوچکی صفحه ، بسیاری از کاربران امکان مشاهده لینکهای تماس یا ارتباطی نیستند و اگر ظرف چند ثانیه چنین چیزی را مشاهده نکنند سایت را ترک خواهند کرد. معمولا این دکمه باید بصورت تمام عرض در پایین صفحه موبایل قابل مشاهده باشد و حتی با اسکرول به سمت پایین نیز در جای خود ثابت بماند. باتوجه به نوع فعالیت و راه ارتباطی ، می تواند ارسال درخواست در واتساپ یا تلگرام و یا تماس مستقیم تلفنی باشد.

برنامه نویسی سازگار با تمام سیستم عامل ها

یک وبسایت علاوه بر اینکه باید در تمام مرورگرها و سیستم عامل های دسکتاپ به درستی اجرا شود ، باید با سیستم عامل های موبایل مثل اندروید و ios نیز سازگار باشد. اگرچه بخش زیادی از کاربران از گوشی های اندروید استفاده می کنند ، اما اگر می خواهید مابقی کاربران را از دست ندهید و تمام افراد بتوانند سایت شما را در موبایل واضح مشاهده کنند باید به برنامه نویسی منطبق با استانداردهای ios نیز توجه کنید زیرا بسیاری از کاربران از تلفن های همراه شرکت اپل استفاده می کنند. در بسیاری از سایتها دیده شده که بارگزاری سایت در یک گوشی اپل با مشکلات فراوانی همراه است.

زیبایی قالب در نسخه موبایل

تجربه کاربری فاکتور مهمی در طراحی سایت است که برای کاربران و موتورهای جستجو نیز اهمیت دارد. یکی از زیرشاخه های تجربه کاربری ف توجه به زیبایی سایت است. در طراحی ریسپانسیو ، تمرکز بر روی بهترین وضعیت نمایش در هر صفحه نمایشی می باشد. پس برای اینکه در موبایل سایت به درستی اجرا شود ، لازم است که تغییراتی در ساختار برنامه نویسی داده شود. اما این تغییرات نباید منجر به از دست رفتن زیبایی و جذابیت سایت شود. اگر به جذابیت صفحات سایت در دسکتاپ اهمیت می دهید ، چندبرابر بیشتر باید به نسخه موبایل فکر کنید زیرا کاربران موبایلی روز به روز در حال افزایش هستند.

فشرده سازی کدها و حذف کد اضافه

آیا سایت شما علی رغم سرعت خوبی که در دسکتاپ دارد در موبایل کند است؟ پس باید هنگام طراحی یا سئو به فشرده سازی کد قالب دقت کنید. همچنین بسیاری از کدها که مخصوص نسخه دسکتاپ سایت هستند باید با برنامه نویسی یا نصب افزونه ، در زمان اجرا در نسخه موبایل حذف شوند. اجرای این فرآیند نیاز به تخصص دارد و پیشنهاد می کنیم در صورتی که اطلاعات کافی در زمینه برنامه نویسی وب را ندارید ، هرگز تغییر در کد قالب ندهید.

بیشتر بدانید: مقایسه تفاوت های سئو سایت با طراحی وب