تسهِّل المتصفّحات الحديثة تخصيص مكونات معيَّنة، مثل الرموز ولون شريط العناوين، بل وإضافة عناصر مثل "مربّعات مخصَّصة". ويمكن لهذه التعديلات البسيطة زيادة التفاعل وإعادة جذب المستخدمين إلى موقعك الإلكتروني.
تسهِّل المتصفّحات الحديثة تخصيص مكونات معيَّنة، مثل الرموز ولون شريط العناوين، بل وإضافة عناصر مثل "مربّعات مخصَّصة". ويمكن لهذه التعديلات البسيطة زيادة التفاعل وإعادة جذب المستخدمين إلى موقعك الإلكتروني.
قدِّم رموزًا ومربّعات رائعة
عندما يزور أحد المستخدمين صفحة الويب الخاصة بك، يحاول المتصفّح جلب رمز من ملف 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">
متصفّح Chrome وOpera
يستخدم Chrome وOpera القيمة icon.png، التي يمكن تغيير حجمها إلى الحجم اللازم باستخدام الجهاز. لمنع تغيير الحجم تلقائيًا، يمكنك أيضًا تقديم مقاسات
إضافية من خلال تحديد السمة sizes.
برنامج المتصفح Safari
يستخدم متصفّح Safari أيضًا العلامة <link> مع السمة rel: apple-touch-icon للإشارة إلى رمز الشاشة الرئيسية.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
يعدّ ملف PNG غير شفاف بحجم 180 بكسل أو 192 بكسل مربعًا مثاليًا لرمز apple-Touch.
ولا يُنصح بتضمين إصدارات متعددة عبر السمة sizes.
في السابق، كان متصفّح Safari لنظام التشغيل iOS يراعي استخدام الكلمة الرئيسية -precomposed لتجنّب إضافة تأثيرات بصرية، إلا أنّ ذلك لم يكن ضروريًا منذ نظام iOS 7.
Internet Explorer وWindows Phone
تتوافق تجربة الشاشة الرئيسية الجديدة في Windows 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">
المربعات في Internet Explorer
إنّ "المواقع الإلكترونية المثبّتة" و "المربّعات المباشرة التي تم تدويرها" من Microsoft تتجاوز نطاق عمليات التنفيذ الأخرى وتتجاوز نطاق هذا الدليل. يمكنك معرفة المزيد من المعلومات في كيفية إنشاء مربّعات مباشرة لدى MSDN.
ألوان عناصر المتصفح
باستخدام عناصر meta مختلفة، يمكنك تخصيص المتصفح وحتى عناصر النظام الأساسي. ضع في اعتبارك أن بعضها قد يعمل فقط على أنظمة أساسية
أو متصفحات معينة، ولكن يمكنه تحسين التجربة بشكل كبير.
يتيح لك Chrome وFirefox OS وSafari وInternet Explorer وOpera Coast تحديد ألوان لعناصر المتصفّح، وحتى بالنظام الأساسي من خلال العلامات الوصفية.
لون مظهر Meta في Chrome وOpera
لتحديد لون المظهر في Chrome على نظام التشغيل Android، استخدِم لون المظهر الوصفي.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
التصميم الخاص بمتصفّح Safari
يتيح لك Safari تصميم شريط الحالة وتحديد صورة بدء التشغيل.
تحديد صورة بدء التشغيل
يعرض متصفّح Safari تلقائيًا شاشة فارغة أثناء وقت التحميل وبعد عدة عمليات تحميل
لقطة شاشة للحالة السابقة للتطبيق. ويمكنك منع ذلك من خلال
إبلاغ Safari بعرض صورة بدء تشغيل واضحة، عن طريق إضافة علامة رابط باستخدام
rel=apple-touch-startup-image. مثال:
<link rel="apple-touch-startup-image" href="icon.png">
يجب أن تكون الصورة بالحجم المحدد لشاشة الجهاز المستهدف وإلا لن يتم استخدامها. راجِع إرشادات محتوى الويب في Safari للاطّلاع على مزيد من التفاصيل.
وعلى الرغم من أنّ وثائق Apple حول هذا الموضوع متفرقة، توصّل منتدى المطوّرين إلى طريقة لاستهداف جميع الأجهزة باستخدام الاستعلامات المتقدّمة عن الوسائط لاختيار الجهاز المناسب ثم تحديد الصورة الصحيحة. إليك حلّ عملي، شكرًا على tfausak's gist
تغيير مظهر شريط الحالة
يمكنك تغيير مظهر شريط الحالة التلقائي إلى black أو black-translucent. مع black-translucent، يطفو شريط الحالة فوق المحتوى بملء الشاشة، بدلاً من دفعه لأسفل. يمنح هذا التخطيط مزيدًا من الارتفاع،
لكنه يعيق الجزء العلوي. ها هو الرمز المطلوب:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black