مرورگرهای مدرن سفارشی کردن اجزای خاص مانند نمادها، رنگ نوار آدرس و حتی اضافه کردن مواردی مانند کاشی های سفارشی را آسان می کنند. این ترفندهای ساده می تواند تعامل را افزایش دهد و کاربران را به سایت شما بازگرداند.
مرورگرهای مدرن سفارشی کردن اجزای خاص مانند نمادها، رنگ نوار آدرس و حتی اضافه کردن مواردی مانند کاشی های سفارشی را آسان می کنند. این ترفندهای ساده می تواند تعامل را افزایش دهد و کاربران را به سایت شما بازگرداند.
آیکون ها و کاشی های عالی را ارائه دهید
هنگامی که کاربر از صفحه وب شما بازدید می کند، مرورگر سعی می کند یک نماد را از HTML دریافت کند. این نماد ممکن است در مکان‌های زیادی نمایش داده شود، از جمله برگه مرورگر، سوئیچ برنامه اخیر، صفحه برگه جدید (یا اخیراً بازدید شده) و موارد دیگر.
ارائه یک تصویر با کیفیت بالا باعث می شود تا سایت شما قابل تشخیص باشد و کاربران راحت تر بتوانند سایت شما را پیدا کنند.
برای پشتیبانی کامل از همه مرورگرها، باید چند تگ به عنصر <head> هر صفحه اضافه کنید.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
کروم و اپرا
کروم و اپرا از icon.png استفاده می‌کنند که توسط دستگاه به اندازه لازم مقیاس‌بندی می‌شود. برای جلوگیری از مقیاس‌بندی خودکار، می‌توانید اندازه‌های اضافی را نیز با تعیین ویژگی sizes ارائه کنید.
سافاری
سافاری همچنین از تگ <link> با ویژگی rel : apple-touch-icon برای نشان دادن نماد صفحه اصلی استفاده می کند.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
یک PNG غیر شفاف که 180 پیکسل یا 192 پیکسل مربع است، برای نماد لمسی اپل ایده آل است.
شامل چندین نسخه از طریق ویژگی sizes توصیه نمی شود. پیش از این، Safari برای iOS برای جلوگیری از افزودن جلوه‌های بصری، کلمه کلیدی -precomposed را در نظر می‌گرفت، اما از iOS 7 دیگر نیازی به آن نبود.
اینترنت اکسپلورر و ویندوز فون
تجربه جدید صفحه اصلی ویندوز 8 از چهار طرح بندی مختلف برای سایت های پین شده پشتیبانی می کند و به چهار آیکون نیاز دارد. اگر نمی‌خواهید از اندازه خاصی پشتیبانی کنید، می‌توانید متا تگ‌های مربوطه را کنار بگذارید.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
کاشی ها در اینترنت اکسپلورر
«سایت‌های پین‌شده» مایکروسافت و «کاشی‌های زنده» در حال چرخش بسیار فراتر از سایر پیاده‌سازی‌ها هستند و خارج از محدوده این راهنما هستند. می‌توانید در MSDN درباره نحوه ایجاد کاشی‌های زنده اطلاعات بیشتری کسب کنید.
عناصر مرورگر رنگی
با استفاده از عناصر meta مختلف، می توانید مرورگر و حتی عناصر پلتفرم را سفارشی کنید. به خاطر داشته باشید که برخی ممکن است فقط روی پلتفرم ها یا مرورگرهای خاصی کار کنند، اما می توانند تجربه را تا حد زیادی بهبود بخشند.
کروم، سیستم عامل فایرفاکس، سافاری، اینترنت اکسپلورر و اپرا کوست به شما اجازه می دهد تا با استفاده از متا تگ ها، رنگ ها را برای عناصر مرورگر و حتی پلتفرم تعریف کنید.
رنگ تم متا برای کروم و اپرا
برای تعیین رنگ تم برای کروم در اندروید، از رنگ تم متا استفاده کنید.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
یک ظاهر طراحی خاص سافاری
Safari به شما امکان می دهد تا به نوار وضعیت استایل دهید و تصویر راه اندازی را مشخص کنید.
تصویر راه اندازی را مشخص کنید
به‌طور پیش‌فرض، سافاری صفحه‌ای خالی در طول زمان بارگذاری و پس از بارگیری‌های متعدد، تصویری از وضعیت قبلی برنامه را نشان می‌دهد. می‌توانید با گفتن Safari برای نشان دادن یک تصویر راه‌اندازی واضح، با افزودن یک برچسب پیوند، با rel=apple-touch-startup-image از این امر جلوگیری کنید. مثلا:
<link rel="apple-touch-startup-image" href="icon.png">
تصویر باید در اندازه خاص صفحه نمایش دستگاه مورد نظر باشد وگرنه استفاده نخواهد شد. برای جزئیات بیشتر به راهنمای محتوای وب سافاری مراجعه کنید.
در حالی که اسناد اپل در مورد این موضوع پراکنده است، جامعه توسعه دهندگان راهی برای هدف قرار دادن همه دستگاه ها با استفاده از پرس و جوهای رسانه ای پیشرفته برای انتخاب دستگاه مناسب و سپس مشخص کردن تصویر صحیح پیدا کرده اند. در اینجا یک راه حل کارآمد، با حسن نیت از اصل tfausak وجود دارد
ظاهر نوار وضعیت را تغییر دهید
می‌توانید ظاهر نوار وضعیت پیش‌فرض را به black یا black-translucent تغییر دهید. با black-translucent ، نوار وضعیت به جای فشار دادن آن به پایین، در بالای محتوای تمام صفحه شناور است. این به چیدمان ارتفاع بیشتری می‌دهد، اما قسمت بالایی را مسدود می‌کند. در اینجا کد مورد نیاز است:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black