בדפדפנים מודרניים קל להתאים אישית רכיבים מסוימים, כמו סמלים, צבע סרגל הכתובות ואפילו להוסיף דברים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה יכולים להגביר את ההתעניינות ולהחזיר משתמשים לאתר שלכם.
בדפדפנים מודרניים קל להתאים אישית רכיבים מסוימים, כמו סמלים, צבע סרגל הכתובות ואפילו להוסיף דברים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה יכולים להגביר את ההתעניינות ולהחזיר משתמשים לאתר שלכם.
סמלים ומשבצות באיכות גבוהה
כשמשתמש נכנס לדף האינטרנט שלכם, הדפדפן מנסה לאחזר סמל מה-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 לא שקוף בגודל 180px או 192px ריבועי הוא אידיאלי ל-apple-touch-icon.
לא מומלץ לכלול כמה גרסאות באמצעות המאפיין 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
התכונות "אתרים מוצמדים" ו "אריחים חיים" של מיקרוסופט הן הרבה יותר מתקדמות מהטמעות אחרות, והן לא נכללות במדריך הזה. מידע נוסף זמין במאמר של MSDN בנושא יצירת משבצות דינמיות.
רכיבי דפדפן צבעוניים
בעזרת רכיבי meta שונים, אתם יכולים להתאים אישית את הדפדפן ואפילו רכיבים של הפלטפורמה. חשוב לזכור שחלק מהתוספים פועלים רק בפלטפורמות או בדפדפנים מסוימים, אבל הם יכולים לשפר מאוד את החוויה.
ב-Chrome, ב-Firefox OS, ב-Safari, ב-Internet Explorer וב-Opera Coast אפשר להגדיר צבעים לרכיבים של הדפדפן, ואפילו לפלטפורמה, באמצעות מטא תגים.
צבע עיצוב מטא ל-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.
למרות שהתיעוד של אפל בנושא הזה הוא דל, קהילת המפתחים מצאה דרך לטרגט את כל המכשירים באמצעות שאילתות מדיה מתקדמות כדי לבחור את המכשיר המתאים ואז לציין את התמונה הנכונה. הנה פתרון שעובד, באדיבות התמצית של tfausak
שינוי המראה של שורת הסטטוס
אתם יכולים לשנות את המראה של שורת הסטטוס שמוגדרת כברירת מחדל ל-black או ל-black-translucent. ב-black-translucent, שורת הסטטוס צפה מעל התוכן במסך המלא, במקום לדחוף אותו למטה. הפריסה הזו מוסיפה גובה, אבל מסתירה את החלק העליון. זה הקוד שצריך להוסיף:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black