עם דפדפנים מודרניים, קל להתאים אישית רכיבים מסוימים, כמו סמלים, הצבע של סרגל הכתובות ואפילו להוסיף פריטים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה עשויים להגביר את המעורבות ולהחזיר משתמשים לאתר שלך.
עם דפדפנים מודרניים, קל להתאים אישית רכיבים מסוימים, כמו סמלים, הצבע של סרגל הכתובות ואפילו להוסיף פריטים כמו משבצות בהתאמה אישית. השינויים הפשוטים האלה עשויים להגביר את המעורבות ולהחזיר משתמשים לאתר שלך.
ספקו סמלים ופקדים מעולים
כשמשתמש מבקר בדף האינטרנט שלכם, הדפדפן מנסה לאחזר סמל מה-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, המותאם לגודל הנדרש על ידי
במכשיר. כדי למנוע התאמה לעומס (autoscaling), ניתן גם לספק אפשרויות נוספות
גדלים באמצעות ציון המאפיין sizes.
Safari
גם ב-Safari נעשה שימוש בתג <link> עם המאפיין rel: apple-touch-icon כדי
לציין את הסמל של מסך הבית.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
קובץ PNG לא שקוף, בגודל 180 פיקסלים או 192 פיקסלים, אידיאלי לשימוש בסמלי מגע של תפוח.
לא מומלץ לכלול כמה גרסאות באמצעות המאפיין 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 חוף מאפשרים לך להגדיר צבעים לרכיבים שונים של הדפדפן, ואפילו לפלטפורמה באמצעות מטא תגים.
צבע מטא-עיצוב ל-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