ایا سایت شما برای موبایل بهینه است؟

Site optimization for mobile

بهینه سازی وب سایت برای موبایل چیست؟

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

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

 دلایلی که کسب و کارهای کوچک باید وب سایت بهینه سازی شده داشته باشند!

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

*کاربران گوشی های هوشمند متفاوت اند

کاربرانی که با گوشی های هوشمند به وب سایت شما مراجعه نموده اند معمولا در شرایط متفاوتی نسبت به کاربران کامپیوتری دارند.

منظور از شرایط متفاوت این ست که نیازمندند در مدت زمان کوتاه تری اطلاعات مورد نظر خود را بدست آورند.

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

در این صورت ست که رضایت مشتری را کسب نمودید.

*ترافیک بالای گوشی های هوشمند

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

” وب سایت هایی که برای گوشی های هوشمند و یا گجت های دستی طراحی نشده باشند، در طول زمان باید شاهد این باشند که رتبه شان در رنک گوگل و دیگر سایت ها را از دست میدهند!”

*نام تجاری

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

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

*افزایش نرخ تبدیل

فرقی نمیکند که شما صاحب یک فروشگاه اینترنتی هستید یا خدمات دیگری ارائه میدهید. مطمئنا شما هدفی از طراحی یک وب سایت دارید. خرید آنلاین، سفارش خدمات یا حتی پر کردن یک فرم نظر سنجی!
Call to action bottom  یک لینک یا دکمه ای است که در وب سایت ها “برای فراخواندن بازدیدکنندگان به انجام دادن کاری که هدف شما از طراحی یک وب سایت است ” در نظر گرفته شده است.
فقط در صورتی که بازدیدکنندگان عمل (اکشن) مورد نظر شما را انجام دهند به مشتری شما تبدیل میشوند. اما زمانی که وب سایت شما برای تلفن های هوشمند طراحی و بهینه سازی نشده باشد، لینک های مربوطه در دسترس نیست و یا کلیک کردن بر روی آنها دشوار است.

این امر سبب میشود که کاربر عملیات مورد نظر شما را رها کند. بنابراین در ادامه کاهش نرخ تبدیل را به همراه دارد.

 Call to action bottom یا به اختصار CTA خصوصا برای فروشگاه های آنلاین از اهمیت ویژه ای برخوردار است.

*کاهش نرخ پرش

نرخ پرش، به میزان کاربری که، وب سایت شما از دست میدهد گویند. یعنی تعداد کاربرانی که بعد از وارد شدن به وب سایت بدون انجام هیچ گونه اکشنی از وب سایت خارج میشوند.

زمانی که ظاهر وب سایت در تلفن ها هوشمند خوب بنظر نرسد (یا وب سایت واکنش گرا نباشد) و کاربران مجبور باشند برای خواندن محتوای وبسایت صفحه را zoom in  کنند خیلی زود کلافه شده و وب سایت را ترک میکند. بنابراین افزایش نرخ پرش را به همراه دارد.

برای اینکه از کاربر پسند بودن وب سایت کسب و کار خود برای تلفن های هوشمند اطمینان پیدا کنید میتوانید سوالات زیر را از خودتان بپرسید:

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

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

برای پیاده سازی یک سایت برای سازگاربودن با موبایل سه روش ارائه شده است:

ایا سایت شما برای موبایل بهینه است؟

۱- طراحی رسپانسیو یا واکنشگرا ، پذیرایی مجزا یا Dynamic Serving و طراحی یک نسخه سایت مجزا برای موبایل.

طراحی رسپانسیو یا واکنشگرا سایت برای موبایل با استفاده از تکنولوژی CSS3 محتوای یکسان و طرحی انعطاف پذیر را به طور خودکار سازگار با سایز صفحه نمایش ارائه میدهد.

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

۲- پذیرایی مجزا یا Dynamic Serving روش دومی که از طرف گوگل پیشنهاد شده است.

در این روش از یک آدرس برای نمایش دو مجموعه متفاوت از کدهای CSS و HTMLبر اساس نوع دستگاه مورد استفاده ، استفاده می شود .

این تکنولوژی از کدنویسی در هدر وب سایت (Vary HTTP header) استفاده می کند. به کاربران با توجه به نوع دستگاه مورد استفاده تفاوت میکند و شما برای انجام این کار نیازمند کدنویسی های پیشرفته و متناسب در هدر سایت خود خواهید بود.

۳- روش سوم شامل ایجاد یک نسخه کاملا مجزا و سفارشی از سایت مخصوص تلفن های همراه و هدایت کاربران به آن نسخه می باشد.

دراین روش برخی سایت ها از یک زیر دامنه برای ایجاد یک سایت موازی برای موبایل استفاده می کنند.

 نکاتی جهت بهینه سازی سایت برای موبایل: 

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

به جای Flash، روی HTML5 تمرکز کنید

مشکل فلش این است که خیلی از عناصرش توسط مرور گر های گوشی های موبایل رندر نمی شوند. یعنی اگر در وب سایت تان از Flash استفاده کنید، به احتمال زیاد رنکینگ جست و جوی موبایل (Mobile Ranking) خوبی به دست نمی آورید.

پیشنهاد ویژه
سئو یا SEO چیست ؟ سئو چه کاربرد و هدفی دارد ؟

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

ازپاپ آپ های تمام صفحه (فول اسکرین) استفاده نکنید

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

ولی در صفحات موبایل که به مراتب کوچک تر از صفحه کامپیوترند، بهتر است کلاً از پاپ آپ استفاده نکنید.

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

تعیین درست ویوپورت (Viewport)

تعیین درست ویوپورت (Viewport)

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

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

یعنی خلاصه این طور می شود که اگر ویوپورت استفاده نکنید، احتمالاً صفحه وب سایت شما به صورت به هم ریخته و با ابعاد نا متناسب برای صفحه موبایل به نمایش در می آید که نا گفته پیداست از نقطه نظر بحث بهینه سازی وب سایت برای موبایل یک اشکال اساسی محسوب می شود و برای سایت تان برچسب «نا متناسب برای موبایل» به ارمغان می آورد!

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

اگر این کار را نکنید این مقدار به طور پیش فرض ۱ گرفته می شود.

یعنی وب سایت شما تمام صفحه گوشی کاربر را بدون توجه به این که در حالت landscape است یا در حالت portrait، پر می کند.

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

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

اندازه فونت و فاصله میان خطوط

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

ولی به طور کلی بهتر است برای اطمینان از بهینه بودن وب سایت برای موبایل، فونت پیش فرض را ۱۶ پیکسل تعیین کنید، که در این صورت فاصله میان سطر ها به صورت خود کار ۱.۲em تعیین می شود.

برای این که وب سایت تان در موبایل عجیب و غریب و به هم ریخته نمایش داده نشود:

بهتر است فونت را در هیچ مقاله و هیچ بخشی از محتوای وب سایت تغییر ندهید.

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

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

ولی روی صفحات کوچک موبایل، تاچ کردن یک لینک یا یک دکمه آن هم با انگشت، چندان دقت بالایی نخواهد داشت!

نتیجه این که اگر لینک ها و دکمه ها بیش از حد کوچک باشند یا فاصله مناسبی میان آن ها وجود نداشته باشد،

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

اگر به بهینه سازی وب سایت برای موبایل اهمیت می دهید، باید خیلی خوب به این اعداد و ارقام توجه کنید.

گوگل خودش پیشنهاد می کند که دکمه ها را به هیچ وجه کوچک تر از ۷ میلی متر یا ۴۸ پیکسل درست نکنید تا از تاچ شدن بی هدف بقیه عناصر جلوگیری شود.

به علاوه فاصله میان هر دکمه هم نباید کمتر از ۵ میلی متر باشد.

بهینه سازی محتوا

 بهینه سازی محتوا

 

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

مثل همیشه، انتخاب عبارات کلیدی مهم ترین مسئله است.

البته وقتی بحث به محتوای موبایل می رسد، تفاوت هایی در استاندارد های یک محتوای بهینه شده دیده می شود.

تراکم عبارات کلیدی در موبایل با دسکتاپ متفاوت است.

در واقع تراکم عبارات کلیدی سایت هایی که رنکینگ بالایی در جست و جوی موبایل دارند (۴.۵۸)، تقریباً نصف تراکم عبارات کلیدی سایت های برتر در جست و جوی دسکتاپ است (۱۰.۲۲)!

طبق مطالعه ای که انجام شده :

بهترین تعداد کاراکتر برای موبایل ۸۶۸ و برای دسکتاپ ۱۲۸۵ است. یعنی اینکه محتوای موبایل باید به طور کلی کوتاه تر باشد، چرا که اندازه صفحه موبایل کوچک تر است و کاربر احتمالاً تمایلی به بررسی کامل و جامع یک موضوع ندارد.

وضعیت محتوای تصویری هم به همین صورت است:

یعنی تعداد متوسط تصاویری که در دسکتاپ نمایش داده می شود در حدود ۹ است در حالی که این عدد در موبایل به کمتر از ۴ می رسد. علت اصلی آن هم کاهش سرعت لود صفحات می باشد.

یادتان باشد:

هر چه صفحه کند تر لود شود، گوگل توجه کمتری به آن صفحه نشان خواهد داد.

لینک های داخلی

در مطالعه ای که بالاتر گفتیم، یک نکته جالب دیگر هم کشف شد.

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

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

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

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

وضعیت سایت شما چطور است؟ آیا این موارد را رعایت کرده اید یا اینکه این نکات برای شما جدید بود؟

 

1.7/5
این مقاله را با دوستان خود به اشتراک بگذارید اشتراک گذاری در گوگل پلاس اشتراک گذاری در فیسبوک اشتراک گذاری در توییتر اشتراک گذاری در لینکدین اشتراک گذاری در پینترست
آخرین نظرات
  • پاسخ به سوالات کاربران در اسرع وقت داده میشود.
  • دیدگاه شما پس از تایید در سایت نمایش داده می شود.
  • از ارسال متن بصورت فینگلیش خودداری نموده و فارسی تایپ کنید.
  • سوالات خود را تنها در بخش کامنت مطرح نمایید و پشتیبانی محصولات بعد از خرید را در بخش تیکت ارسال کنید.
  1. سعادتی گفت:

    با سپاس از مطالب مفید شما

  2. آفتاب گفت:

    با تشکر ازمصلاب زیبا
    سلام من یک سایت با ووردپرس دارم که در موبایل مثل نسخه ویندوز با نمیشه و میخواهم به همون ساختاری که در ویندوز باز میشه باز شود چه راهکاریپیشنهاد میکنید .

  3. fsohrabiii28 گفت:

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

دیدگاه شما در مورد fsohrabiii28
لطفا نظرات خود را با ما در میان بگذارید برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.