نمایش بخشی از محتوا فقط در موبایل
چند بار شنیده‌اید که امسال سال موبایل خواهد بود؟ شاید هرگز نفهمیم که “سال رسمی موبایل” دقیقاً چه سالی خواهد بود، اما می‌توانیم به شما بگوییم که ترافیک موبایل در سایت شما هر سال افزایش خواهد یافت. بنابراین باید سایت خود را طوری طراحی و تنظیم کنیم که بتوانیم به این حجم از ترافیک موبایل پاسخ دهیم. پس از کمی بررسی، متوجه شدیم که بیش از 30 درصد از ترافیک صفحات فرود ما (لندینگ پیج) از طریق تلفن همراه است. این حجم ترافیک رقمی نیست که بتوان آن را نادیده گرفت.
ما می‌دانیم که استفاده از محتوای هوشمند برای رساندن پیام مناسب به مخاطب مناسب در زمان مناسب مهم است. این مفهوم در مورد بازدیدکنندگان تلفن همراه صفحات فرود ما نیز صدق می‌کند. گام‌های کوچکی وجود دارد که می‌توانید برای افزایش تبدیل تلفن همراه انجام دهید که می‌تواند درگذر زمان تفاوت زیادی ایجاد کند. به‌عنوان‌مثال، تغییر محتوایی که این بینندگان هنگام بازدید از صفحات فرود از یک دستگاه تلفن همراه می‌بینند، در واقع ممکن است باعث افزایش سرنخ (LEAD GENERATION) شما شود.
در ادامه این مقاله از سری مقالات آموزش طراحی سایت، در چند مرحله ساده، یاد می‌گیرید که چگونه برخی از متن‌ها یا تصاویر یا هر نوع محتوایی از سایت خود را فقط در حالت موبایل نمایش دهید، یا اینکه در حالت موبایل آن را مخفی کنید و حتی بالعکس.
راهنمای مطالعه:
نمایش محتوا فقط در موبایل
حال وقت تصمیم گیری است، در صفحات فرود خود می‌خواهید چه مواردی را فقط به بازدید کنندگان موبایل نمایش دهید؟ این موضوع خیلی مهم است، بنابراین سعی کنید کمی روی آن وقت گذاشته و تمامی جوانب را بررسی کنید
بازدید کنندگان موبایل ممکن است بخواهند در صفحات فرود شما چه چیزی را ببینند که با مخاطبان دسکتاپ شما متفاوت باشد؟ برخی از ایده‌های تستی که باید در نظر گرفته شوند عبارت‌اند از:
- استفاده از کد تلفن همراه در صفحاتی که محتوایی را تبلیغ می‌کنند که برای دانلود در تلفن همراه سازگار نیست (مانند قالب‌های اکسل، کتاب‌های کار و غیره). این همچنین می‌تواند برای صفحات thank-you اعمال شود تا ناامیدی را در میان سرنخ‌هایی که نمی‌توانند محتوای شما را در دستگاه‌های تلفن همراه خود دانلود کنند (حتی پس‌ازاینکه قبلاً فرم شما را پر کرده‌اند) کاهش دهد.
- نمایش متن‌های مختلف برای مخاطبان موبایل که تایید کند که آن محتوا مخصوص مخاطبان موبایل است. این باعث شخصی‌سازی بیشتر تجربه کاربر و ارتقای تبدیل‌های تلفن همراه می‌شود.
- آزمایش برای بررسی رفتار کاربر در موبایل، هدر سایت و تصاویر با سایزهای مختلف که فقط مخاطبان موبایل می‌بینند.
هنگامی که مشخص کردید چه چیزی را می‌خواهید آزمایش کنید، یکی (یا چند مورد) از صفحات فرود خود را برای درج متن یا تصویر، فقط برای مخاطبان موبایل انتخاب کنید. صفحه فرود باید با اهداف شما برای آزمون هماهنگ باشد و باید صفحه‌ای باشد که پیش‌بینی می‌کنید حجم بالایی از ترافیک دریافت می‌کند – یا هنوز هم می‌گیرد. ترافیک موبایل به اندازه ترافیک دسکتاپ شما زیاد نخواهد بود، البته این بستگی به نوع وب‌سایت شما نیز دارد، بنابراین جمع‌آوری نتایج با حجم نمونه کوچک‌تر ممکن است بیشتر طول بکشد.
چه بخشی را می‌خواهید در موبایل مخفی / نمایش دهید؟
شما به‌سادگی می‌توانید متنی را اضافه کنید که فقط برای بینندگان تلفن همراه نشان داده می‌شود، یا می‌توانید تا آنجا پیش بروید که تصاویر یا CTA های مختلف (دکمه‌های کال تو اکشن مخصوص موبایل) اضافه کنید. به این فکر کنید که بازدیدکنندگان دستگاه‌های تلفن همراه در مقایسه با بازدیدکنندگان دسکتاپ معمولی می‌خواهند چه چیزی را ببینند.
بسته به آزمایش، ممکن است بخواهید محتوای خاصی را برای کاربران دسکتاپ حذف کنید، مانند پاراگراف‌های طولانی‌تر یا تصاویری که ممکن است برای دستگاه‌های تلفن همراه خوب کار نکنند.
نمایش محتوا فقط در موبایل
اینجاست که همه چیز فنی می‌شود. برای درج متن یا تصاویر مخصوص موبایل در صفحه فرود خود، به سادگی کد زیر را در HTML تگ <body> اضافه کنید:
<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>این div اعلام می کند که این کپی فقط زمانی پاسخ می دهد که کلاس فعال شود. با افزودن کد زیر، کلاس فقط زمانی فعال می شود که کاربر در دستگاه تلفن همراه باشد. کد زیر را در HTML صفحه و تگ <head> صفحه خود اضافه کنید:
<style type="text/css">
.mobileShow {display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}
</style>مخفی کردن محتوا فقط در موبایل
برای پنهان کردن متن یا تصاویر خاصی که در دستگاه‌های تلفن همراه نمایش داده نمی‌شوند، کد مشابهی را مانند قبل در HTML صفحه و تگ <body> خود اضافه می‌کنید:
<div class="mobileHide"> TEXT OR IMAGE NOT FOR MOBILE HERE </div>سپس، کد زیر را به HTML سایت و تگ <head> خود اضافه کنید:
<style type="text/css">
.mobileHide { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>اگر می‌خواهید این استایل در کل وب سایت شما اعمال شود، موارد زیر را به شیوه نامه CSS خود اضافه کنید:
.mobileHide{ display: none;}کدهای مخصوص موبایل خود را تست کنید
هنگامی که محتوای تست خود را تنظیم کردید، از جمله متن/تصاویری که فقط برای مخاطبان موبایل در نظر گرفته‌اید، مهم است که خودتان صفحه را در دستگاه تلفن همراه آزمایش کنید. از آنجایی که اکثر شما عزیزان برنامه نویسان حرفه‌ای نیستید، گاهی اوقات یک براکت را فراموش می‌کنید یا یک کلمه را اشتباه وارد می‌کنید که در نهایت باعث اتفاقات عجیب و غریب برای صفحه می شود. این مرحله را فراموش نکنید تا مطمئن شوید که همه چیز به درستی کار می‌کند.
جمع بندی
در این مقاله یاد گرفتیم که چگونه بخشی از محتوای سایت خود را فقط در حالت موبایل نمایش دهیم، یا در حالت موبایل آن را مخفی کنیم، و حتی اینکه برخی از محتواها را در حالت موبایل تغییر دهیم، یعنی کاربران دسکتاپ محتوای مخصوص به خودشان را ببینند و کاربران موبایل هم به همین شکل.