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