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

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

 

برای سفارش طراحی سایت در رامسر با خجسته وب تماس بگیرید.

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

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

اصول طراحی سایت برای موبایل

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

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

یکی از اصلی ترین ویژگیهای نمایش وب سایت در موبایل نمایش اطلاعات این فرم ها در موبایل است؛ فرم های ساخته شده در وبسایت خود را متناسب با ابعاد موبایل در نظر بگیرید.نمونه ای از این فرم ها شامل: فرم ثبت سفارش برای خرید کالا یا فرم دریافت اطلاعات برای عضویت درسایت است.

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

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

تنظیم عرض تصاویر روی ۱۰۰ درصد

بعد از اینکه وب سایتتان را با عرض متناسب موبایل تنظیم کردید ممکن است برخی از تصاویر بسیار بزرگتر از ابعاد مناسب در وب سایت نشان داده شوند.برای رفع شدن این مشکل حداکثر عرض تصویر را روی ۱۰۰ درصد تنظیم نمائید تا در صورت بزرگ بودن تصویر در صفحه نمایش موبایل به صورت خودکار تغییر سایز داده و هماهنگ با آن گردد.

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

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

 

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

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

حذف کردن فضاهای اضافه

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

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

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

قابلیت Zoom-in کردن

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

استفاده از فونت های استاندارد

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

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

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