בדפדפנים מודרניים קל להתאים אישית רכיבים מסוימים, כמו סמלים, צבע סרגל הכתובות ואפילו להוסיף דברים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה יכולים להגביר את ההתעניינות של המשתמשים באתר ולעודד אותם לחזור אליו.
בדפדפנים מודרניים קל להתאים אישית רכיבים מסוימים, כמו סמלים, צבע סרגל הכתובות ואפילו להוסיף דברים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה יכולים להגביר את ההתעניינות של המשתמשים באתר ולעודד אותם לחזור אליו.
להשתמש בסמלים ובכרטיסי מידע איכותיים
כשמשתמש מבקר בדף האינטרנט שלכם, הדפדפן מנסה לאחזר סמל מה-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 אפשר להגדיר צבעים לרכיבים של הדפדפן ואפילו לפלטפורמה באמצעות תגי מטא.
צבע מטא-עיצוב ל-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