איך אנחנו נראים בדפדפנים ה”אחרים”

28% מהביקורים בבלוג הזה מגיעים מפיירפוקס. לפחות הם מכירים על בשרם את הבעיה - יש לא מעט אתרים שמוצגים בצורה משובשת בפיירפוקס. הבעיה מונחת לפתחם של בוני האתרים, שצריכים לכתוב קוד שיוצג כראוי בכל הדפדפנים. זה רלוונטי לא רק למתכנתים ממש, אלא גם לדוגמה למי שמנהל בלוג - כמו זה - עם אפשרויות עיצוב מסוימות. שינוי של תבנית או של תמונת כותרת יכול להיראות טוב בדפדפן אחד, אבל הבלוג יוצג בצורה משובשת בדפדפן אחר.

אני לא אכנס לשאלה איך כותבים קוד שיוצג טוב בכל הדפדפנים - יש הרבה מאמרים ברשת בנושא הזה. אני אתמקד בנושא אחר: איך בודקים את התוצר הסופי (האתר / הבלוג) בדפדפנים השונים.

האפשרות הראשונה היא, כמובן, להתקין את הדפדפן ולצפות דרכו באתר.
בווינדוס, אפשר להתקין כמובן את אקספלורר 7 - הדפדפן החינמי של מיקרוסופט. עם כל הכבוד לאקספלורר 7, הדפדפן הנפוץ בעולם לפי onestat הוא דווקא אקספלורר 6 (54%). דרך האתר של טרדסופט אפשר להוריד קובץ התקנה אחד (לווינדוס XP) לגרסאות 3, 4, 5, 5.5 ו-6 של הדפדפן המיקרוסופטי. בלינק יש גם ציטוט מה-EULA (הסכם משתמש קצה) של מיקרוסופט, וחשוב לקרוא קודם כדי לוודא שאכן מותר להתקין את הדפדפנים הישנים. את גרסאות 5, 5.5 ו-6 אפשר להתקין גם בלינוקס, עם IEs4Linux. בגרסת הבטא יש גם תמיכה מסוימת באקספלורר 7. IEs4Linux היא חופשית, אבל כמובן שהדפדפנים עצמם שמותקנים אינם כאלה. בהסבר המשפטי מבהירים שכדי שזה יהיה חוקי, צריך שיהיה ברשותך רשיון חוקי של ווינדוס (אבל לא חייבים להתקין את ווינדוס בפועל).

הדפדפן השני הוא פיירפוקס, דפדפן חופשי (28% בבלוג שלי, 14% ב-onestat) , אותו אפשר להתקין בווינדוס ובלינוקס (דרך המאגרים באובונטו, או מהאתר). אפשר גם להתקין את פיירפוקס 3 (בטא).
הדפדפן אופרה הוא דפדפן חינמי (0.8% בבלוג שלי, 0.5% ב-onestat) . הוא זמין להורדה בווינדוס ובלינוקס (באובונטו - גם דרך המאגרים). דפדפן מאוד חביב, בדרך-כלל הפיצ'רים החדשים מופיעים קודם כל באופרה, אחר-כך כתוסף לפיירפוקס, אחר-כך בפיירפוקס הרשמי, ואחר-כך באקספלורר.

בספארי החינמי משתמשים 2%, לפי onestat. אפשר להתקין אותו בווינדוס, אבל עד כמה שידוע לי לא באובונטו.

איך משתמש לינוקס יבדוק אם האתר שלו נראה טוב בספארי? איך משתמש ווינדוס יבדוק אם האתר שלו נראה טוב ב-Konqueror או Epiphany?
ויש עוד דפדפנים רבים, חלקם אי-אפשר להתקין במערכות הפעלה מסוימות - וגם אלה שכן, זה מעמיס ומסרבל להתקין כל-כך הרבה דפדפנים.
אמנם אם בדקנו באקספלורר ובפיירפוקס (שזמינים בווינדוס ובלינוקס) כיסינו כבר 97% מהגולשים, אבל בכל זאת - לפעמים נרצה לדעת איך האתר נראה בדפדפנים אחרים, ולפעמים פשוט לא נרצה להתקין את אקספלורר המיקרוסופטי בצורה עקומה כזו, על מערכת הלינוקס.

הפתרון הוא BrowserShots, שירות חינמי וחופשי שמציג צילומי מסך של האתר בדפדפנים שונים. אפשר לבחור את הדפדפנים הרצויים (בלינוקס, ווינדוס, מק ו-BSD) - והאתר ישלח את הבקשה למחשבים שונים שיפתחו את האתר בדפדפנים הנבחרים, יבצעו צילום מסך ויעלו את התמונות לשרת. צילומי המסך נמחקים אחרי חצי שעה מהשרת, אבל אפשר לדחות את מועד המחיקה - ואפשר להוריד למחשב בבת אחת את כל צילומי המסך. צריך להאזר בסבלנות - לוקח די הרבה זמן עד שמגיעים צילומי המסך.
באתר יש אפשרויות נוספות, חשובות מאוד: רזולוציית מסך, עומק צבע, ג'אווה סקריפט, ג'אווה ופלאש. חשוב לזכור שלא כל הגולשים רואים את האתר כפי שאנחנו רואים אותו.

כך לדוגמה נראה הטאמבלר שלי, בו אני מלקט קישורים לתמונות שאני צילמתי והוצגו באתרים אחרים (שלא על ידי).
המסך צולם ב: Kazehakase 0.4.3 / Ubuntu 7.10 Gutsy Gibbon

מסתבר שהכותרת (שהיא השם שלי בעברית ובאנגלית בשורה אחת) נראית אחרת בדפדפן כזהכזה: מופיע חצי שם בעברית, אחריו השם באנגלית, ובשורה מתחת החצי השני של השם בעברית. גם המילים " ויקיפדיה | Wikipedia" שמוצגות בדפדפנים המותקנים אצלי בשורה אחת, בכזהכזה פוצלו לשתי שורות; ועוד כמה שינויים קטנים.

שווה לנסות ולראות איך אנחנו נראים בדפדפנים ה"אחרים"

16 תבניות בבלוגלי

בחרתי 16 תבניות - כולן חופשיות - מהמבחר המוצע בבלוגלי. ניסיתי אותן, כדי לבדוק מי הכי מתאימה לי (או מי הכי פחות לא-מתאימה). הסקירה לפניכם, ובסופה גם טבלה קטנה.
הסתייגויות והבהרות: ייתכן וחלק מהתקלות נובעות מבעיות בשרתים של בלוגלי ולא בתבניות עצמן; הסקירה נכתבה במהלך כמה שבועות, והסקירה של כל תבנית נכונה ליום בדיקתה; הבדיקות נעשו בפיירפוקס 2 ובאקספלורר 7 ב-win xp; צילומי המסך צולמו זמן מסוים לאחר הסקירה, ולכן לפעמים יש אי-התאמות בין התמונה לסקירה הכתובה.

• אנדריאס-01 - לבנה מאוד. אפשר להוסיף תמונת כותרת בגודל 760x175. אין שליטה על הצבעים. יש כותרת בלוג וכותרת משנה, ושתיהן מוצגות מעל התמונה. יש שני סרגלים צידיים (ימין ושמאל), תמיכה טובה בתבליטים, אבל רעה במספור. מינוס עיקרי: הקישורים בפוסטים מודגשים מדי ושונים מהטקסט הרגיל (בפיירפוקס הם מודגשים, באקספלורר מודגשים ומוגדלים). הגלישה של התמונות משובשת, התמונות מוצגות במקביל לטקסט במקום מתחתיו או מעליו.
  
• הדשא של השכן - עיצוב נחמד. יש תמונת כותרת קבועה, אין שליטה על הצבעים, אין כותרת משנה, אין ווידג'טים, אין קטגוריות בבלוגרול, כתב קטן יחסית, אין תבליטים, אין מספור. סרגל ימני עם חיפוש, קטגוריות, ארכיון וקישורים.
  
• זרם חלש - יותר לבן מלבן. אפשר להוסיף תמונת כותרת בגודל 786x130. יש שליטה על הצבעים של חלק מהפונטים, אבל לא כולם (לדוגמה - כותרת הבלוג תמיד שחורה). אין כותרת משנה. יש סרגל שמאלי אחד. תמיכה טובה בתבליטים ומספור. מינוסים: ווידג'ט הרסס מוצג בצורה גרועה ומשובשת. באקספלורר, כל הסרגל השמאלי מוצג בצורה משובשת.
  
• חמניות - עיצוב נחמד מינוס. תמונת כותרת קבועה, בלי שליטה על הצבעים, בלי ווידג'טים. יש כותרת וכותרת משנה, וסרגל שמאלי בלי שליטה על הווידג'טים. יש גם סרגל עילי עם הדפים. תמיכה טובה במספור, בינונית בתבליטים.
  
• לטו-פריים - עיצוב קצת עגלגל (מלבני עם פינות מעוגלות). אפשר להוסיף תמונת כותרת בגודל 764x116 בערך. אין שליטה על הצבעים. יש כותרת וכותרת משנה (אפשר לוותר על כותרת המשנה או על שתיהן). יש סרגל שמאלי, וסרגל עילי עם דפים. תמיכה טובה בתבליטים ומספור. מינוסים: הכותרות של הפוסטים ושל הווידג'טים לא מוצגות (לבן על לבן), אולי זה היה משהו זמני. השורה הראשונה מציגה את התאריך והשם, בצורה משובשת: יום בחודש, שם הכותב, חודש, שנה.
  
• מייפל - עיצוב חום אדמדם, עם תמונת כותרת קבועה ובלי שליטה על צבעים. יש כותרת וכותרת משנה, סרגל שמאלי וסרגל עילי עם דפים. אין תמיכה בתבליטים (מראה רק הזחות) אבל יש תמיכה במספור. מינוסים: יש תצוגה משובשת בסרגל הצדדי. בפיירפוקס, לא רואים את התוכן (לבן על לבן) אלא רק את הכותרות. באקספלורר, חלק מהלינקים בבלוגרול הפכו לטקסט רגיל שאינו לינק; הכותרות של ווידג'טי רסס לא מוצגות (לבן על לבן), וכך גם לינקים בתוך ווידג'ט טקסט.
  
• מלא מיץ - מה זה ירוק בצדדים עם תמונה של אבטיח למעלה? בלי שליטה על התמונה, על הצבעים, או על תוכן הסרגל השמאלי. אין כותרת משנה. תמיכה סבירה בתבליטים וטובה במספור.
  
• מפוספס - תבנית גדולה ואפורה. אפשר להוסיף תמונת כותרת וגם תמונת רקע. אפשר להגדיר את גודל תמונת הכותרת, ואת הרוחב של הבלוג. יש הרבה שליטה בצבעי הפונטים. כותרת הבלוג מוצגת פעמיים, וכותרת המשנה לא מוצגת בכלל. יש 4 סרגלים, שניים למעלה ושניים למטה. הסרגלים למעלה סגורים כברירת מחדל, ומוצגים רק עם מעבר עכבר. תמיכה לא משהו במספור, ורעה בתבליטים.
  
• סימפלה - מינימליסטית ונקייה, די יפה. אפשר להוסיף תמונת כותרת בגודל 760x150, ואפשר לשלוט על צבעי הגופנים בבלוג. מציגה כותרת בלוג וכותרת משנה, וסרגל אחד (שמאלי). תמיכה יפה בתבליטים ובמספור. המינוס הגדול ביותר: תצוגה משובשת מאוד באקספלורר, עד כדי כך שהתבנית הופכת ללא שמישה (הסרגל השמאלי מוצג מתחת לחלק המרכזי של הפוסטים).
  
• פשוט ונקי - עיצוב נחמד ותכול. יש תמונת כותרת קבועה, אין שליטה על צבעים. הכותרת של הבלוג מוצגת, ויש סרגל שמאלי. תמיכה בתבליטים ומספור. כותרות של ווידג'ט רסס לא מוצגות טוב, משום שהן כחולות (לינק) על רקע כחול.
  
• קובריק רוואמפ - תבנית נקייה, עם אפשרות לקבוע תמונת כותרת בגודל 820x138. אין שליטה על הצבעים, יש כותרת וכותרת משנה. יש שני סרגלים ימניים, והפוסטים מוצגים בצד שמאל. בפיירפוקס יש תמיכה לא טובה בתבליטים, אבל טובה במספור. באקספולרר יש תמיכה טובה בתבליטים, אבל אין בכלל תמיכה במספור.
  
• רענן - תבנית יפה, שחורה ועגלגלה. אפשר להגדיר תמונת כותרת בגודל 780x95, ומוצגות הכותרת של הבלוג וכותרת המשנה. יש סרגל שמאלי וסרגל עילי עם הדפים. יש גם שליטה על חלק מהצבעים של הפונטים והרקעים. התמיכה בתבליטים לא כל-כך טובה. מספור בתבנית הזו הופך לתבליטים. בסרגל העילי מופיע תמיד, אבל תמיד, קישור של "צרו קשר".
  
• שמיים עצובים - לא מבייש את השם, אכן תבנית עצובה. יש תמונת כותרת קבועה ועגומה, הרקע הוא אפור כהה והכיתוב אפור כהה יותר או שחור. קשה לקרוא את הכתב. יש סרגל שמאלי אחד עם שליטה על ווידג'טים. תמיכה טובה בתבליטים ובמספור. הכתב, כאמור, מאוד לא בולט - לעומת הלינקים שבולטים מאוד על הרקע הכהה. יש כותרת וכותרת משנה.
  
• מדבר - עיצוב מדברי בגוני הבז' הצהבהב. אפשר להגדיר תמונת כותרת בגודל 798x262 (תמונה גדולה מאוד יחסית), ועל גביה מוצגת הכותרת - בלי כותרת משנה. אין שליטה על הצבעים. יש סרגל שמאלי עם שליטה בווידג'טים. יש תמיכה במספור, אך לא בתבליטים (הזחה בלבד). הכתב עצמו קטן יחסית.
  
• wpd מורחבת - תבנית לבנה ונקייה, בלי תמונת כותרת. יש שליטה על הצבעים, וכותרת - אבל לא כותרת משנה. יש סרגל ימני וסרגל שמאלי, הכתוב ברור, יש תמיכה בתבליטים ובמספור. התבנית נראית קצת חסרה, בגלל חוסר העיצוב שבה...
  
• connections - תבנית יפה, עם תמונת כותרת נחמדה ולא ניתנת לשינוי. יש סרגל עילי (מעל הכותרת) עם הדפים, כותרת וכותרת ומשנה, סרגל שמאלי, ותמיכה טובה במספור וסבירה בתבליטים. יש גם תצוגה נחמדה של התאריך, אבל הכתב לא קריא. הגופן הוא גופן חד ולא נוח לקריאה, והטקסט מוצג על גבי רקע מפוספס שמקשה עוד יותר על הקריאה.
  
• red train - תבנית אדומה-חומה עם כתב צהוב בהיר. לא השילוב הכי נוח לקריאה. יש תמונת כותרת קבועה, ועליה הכותרת של הבלוג בלי כותרת משנה. אין שליטה על צבעי גופנים. יש סרגל שמאלי ויש תמיכה בתבליטים. התבנית נראית מאוד דחוסה, ולא ממש נעים לקרוא בה.
  
  
  

  תבנית	תמונה	שינוי תמונה	צבעים	כותרת	כותרת משנה	סרגל
  אנדריאס-01	V	V	X	V	V	2
  הדשא של השכן	V	X	X	V	X	1
  זרם חלש	V	V	V	V	X	1
  חמניות	V	X	X	V	V	1
  לטו-פריים	V	V	X	V	V	1
  מייפל	V	X	X	V	V	1
  מלא מיץ	V	X	X	V	X	1
  מפוספס	V	V	V	V	X	4
  סימפלה	V	V	V	V	V	1
  פשוט ונקי	V	X	X	V	X	1
  קובריק רוואמפ	V	V	X	V	V	2
  רענן	V	V	V	V	V	1
  שמיים עצובים	V	X	X	V	V	1
  מדבר	V	V	X	V	V	1
  wpd מורחבת	X	X	V	V	X	2
  connections	V	X	X	V	V	1
  red train	V	X	X	V	X	1

  
  
  

  תבנית	שליטה בווידג'טים	תבליטים	מספור	כתב קריא	תצוגה בפיירפוקס	תצוגה באקספלורר
  אנדריאס-01	V	V	X	X	V	V
  הדשא של השכן	X	X	X	V	V	V
  זרם חלש	V	V	V	V	X	X
  חמניות	X	X	V	V	V	V
  לטו-פריים	V	V	V	V	X	X
  מייפל	V	X	V	V	X	X
  מלא מיץ	X	V	V	V	V	V
  מפוספס	V	X	X	V	V	V
  סימפלה	V	V	V	V	V	X
  פשוט ונקי	V	V	V	V	V	V
  קובריק רוואמפ	V	X	X	V	V	V
  רענן	V	X	X	V	V	V
  שמיים עצובים	V	V	V	X	V	V
  מדבר	V	X	V	X	V	V
  wpd מורחבת	V	V	V	V	V	V
  connections	V	V	V	X	V	V
  red train	V	V	X	X	V	V

  
  מהניסיון שלי בגלישה בבלוגלי, התבנית הכי נפוצה היא כנראה זו: