בדפדפנים מודרניים קל להתאים אישית רכיבים מסוימים, כמו סמלים, צבע סרגל הכתובות ואפילו להוסיף דברים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה יכולים להגביר את ההתעניינות של המשתמשים באתר ולעודד אותם לחזור אליו.
בדפדפנים מודרניים קל להתאים אישית רכיבים מסוימים, כמו סמלים, צבע סרגל הכתובות ואפילו להוסיף דברים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה יכולים להגביר את ההתעניינות של המשתמשים באתר ולעודד אותם לחזור אליו.
הצגת סמלים וכרטיסי מידע איכותיים
כשמשתמש נכנס לדף האינטרנט שלכם, הדפדפן מנסה לאחזר סמל מה-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-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
התכונות 'אתרים מוצמדים' ו'משבצות פעילות' של 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 מוצג מסך ריק במהלך זמן הטעינה, ואחרי כמה טעינות מוצג צילום מסך של המצב הקודם של האפליקציה. כדי למנוע זאת, אפשר להוסיף תג קישור עם הערך rel=apple-touch-startup-image כדי להורות ל-Safari להציג תמונה מפורשת של הפעלה. לדוגמה:
<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