آموزش تغییر رنگ مرورگر موبایل در سایت شما بدون نیاز به نصب افزونه
امروزه، بیش از نیمی از ترافیک وب از طریق دستگاههای موبایل انجام میشود. به همین دلیل، توجه به تجربه کاربری در موبایل برای وبسایتها از اهمیت بالایی برخوردار است. یکی از راههای ساده برای جذابتر کردن تجربه کاربری در موبایل، تغییر رنگ نوار مرورگر هنگام مشاهده سایت با موبایل است.
به تصویر زیر نگاه کنید، اگر به بخش نوار مرورگر دقت کنید متوجه میشید که رنگ آن قسمت تغییر کرده و آبی شده است :
کد تغییر رنگ نوار مرورگر :
تغییر رنگ نوار مرورگر کارِ بسیار آسانی است، کافی است. با استفاده از تگ meta با نام theme-color میتوانید رنگ مورد نظر خود را برای نوار مرورگر مشخص کنید. برای این کار کد زیر را در بخش هدر سایت خود قبل از تگ </head> قرار دهید :
( راهنما : اگر سایت شما وردپرسی است، از بخش ویرایشگر فایل قالب، فایل header.php را باز کرده و کد زیر را قبل از تگ </head> قرار دهید )
راهنمای کد تغییر رنگ نوار مرورگر :
جهت تغییر رنگ، کافیست کد رنگ دلخواه خود را به جای مقدار #0075FF وارد کنید.
در وردپرس مطابق تصویر زیر میتوانید از بخش مدیریت فایل پوسته و انتخاب header.php کد بالا را در سایت وردپرسی خود اعمال کنید :
دریافت کد رنگ :
اگر نمیدانید کد رنگ دلخواه شما چیست، به راحتی میتوانید با کمک ابزار های آنلاین، کد رنگ دلخواه خود را پیدا کنید؛ به طور مثال با وب سایت imagecolorpicker میتوانید کد رنگ دلخواه خود را دریافت کنید، کافیست از طریق دکمه زیر وارد سایت شده و از بخش انتخاب گر رنگ، رنگ دلخواه خود را انتخاب کنید تا کد آن را برای شما تولید کند
مزایای تغییر رنگ مرورگر موبایل :
جذابیت بصری: رنگآمیزی متناسب با تم سایت شما، ظاهری حرفهای و جذاب به آن میبخشد و تجربه کاربری را ارتقا میدهد.
افزایش برندینگ: استفاده از رنگهای برند شما در نوار مرورگر، به افزایش آگاهی از برند و تمایز شما از رقبا کمک میکند.
ایجاد تمایز: با انتخاب رنگهای خاص و منحصر به فرد، میتوانید سایت خود را از سایر وبسایتها متمایز کنید.
بهبود UX موبایل: تغییر رنگ مرورگر میتواند به بهبود UX موبایل کمک کند.
جذب نظر کاربران: رنگهای جذاب میتوانند نظر کاربران را جلب کنند و آنها را به ماندن در وبسایت شما ترغیب کنند.
نکاتی در مورد تغییر رنگ مرورگر موبایل:
- از رنگهای برند خود استفاده کنید: از رنگهایی استفاده کنید که با برند شما همخوانی داشته باشند.
- از رنگهای متضاد استفاده کنید: از رنگهایی استفاده کنید که به راحتی قابل خواندن باشند.
- از رنگهای تند و زننده استفاده نکنید: از رنگهایی استفاده کنید که چشم کاربران را اذیت نکنند.
مثالهایی از وبسایتهایی که از رنگهای مختلف برای مرورگر موبایل استفاده میکنند:
- وبسایت Airbnb: از رنگ نارنجی استفاده میکند که رنگی گرم و جذاب است.
- وبسایت Spotify: از رنگ سبز استفاده میکند که رنگی آرامشبخش است.
- وبسایت Twitter: از رنگ آبی استفاده میکند که رنگی خنک و آرامشبخش است.
تغییر رنگ مرورگر هنگام مشاهده با موبایل، راهی ساده برای بهبود UX موبایل و جذب نظر کاربران است. در این آموزش یاد گرفتیم چطور میتوان بدون نیاز به نصب افزونه و فقط با یک کد ساده رنگ مرورگر موبایل را تغییر دهیم و زیبایی بیشتری به سایت خود اضافه کنیم