התאמת אתר לדפדפנים

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

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

הבדל בולט נוסף הוא עבודה עם רווחים, הנובע מאותה סיבה בדיוק.
סימן הרווח בדפדפן אחד יכול להיות ברוחב פיקסל, בדפדפן אחד מספר פיקסלים ודפדפן שלישי יכול לבחור לא להציג יותר מרווח רצוף אחד.
יש דפדפנים בהם רווח בודד יכול להתפרש אף כקפיצת שורה. בנוסף, רווח הוא אינו תו תקין ואין לבצע הזזת טקסט עם רווחים.
כלל אצבע טוב הוא זה - לעולם לא להשתמש ביותר מרווח רצוף אחד. הזזת תכנים תתבצע על ידי כלי המרכוז, שינוי אינדנטציה ומיקום בטבלאות.
ניתן להיכנס לעריכת עמוד ולסמן את כל התוכן בלחיצה על CTRL+A (בדומה לכל מעבד תמלילים). רווחים מיותרים וקפיצות שורה יסומנו כ"בלוקים" כחולים ללא תוכן - רצוי להסירם.

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

משתמשים מתקדמים המבינים בHTML יותר ירצו גם לעבור על הקוד ולהחליף תגיות מסוג פסקה (p - paragraph) בתגיות מסוג מחלקה (div). קיים חוסר תיאום ידוע בין אופן התצוגה של תגיות p בקוד - פיירפוקס מציג קפיצות שורה היכן שאקספלורר, לדוגמא, מתעלם מהן.

מבחינת עיצוב האתר, קיימות שתי אפשרויות מובילות - עיצוב באחוזים ועיצוב בפיקסלים. עיצוב בפיקסלים פשוט יחסית ומאפשר תכנון חישובי מדוייק של כל האתר. עיצוב באחוזים יבטיח כי האתר ייראה זהה בכל רזולוציה, אך דורש הרבה השקעה בבדיקה שכל האלמנטים מתאימים אחד לשני. מעצבים, לרוב, בוחרים באפשרות של פיקסלים מכיוון שזה האלמנט שמקשר בין תוכנות העיצוב לבין מערכות בניית האתרים - וקל להגדיר, נניח, שרוחב האתר הוא 800 פיקסלים והתפריט הצדדי הוא 200 - ואז באופן מתבקש נותרים 600 פיקסלים לעבודה בגוף האתר.
שילוב של ידע זה עם הטיפ הראשון יכול להוביל לתוצאות מוצלחות מבחינת בניה ועיצוב.

מספר הערות לגבי הבדלים נקודתיים בין דפדפנים:

• באקספלורר 8 נצפתה תופעה בה טקסט עולה על טקסט. הסיבה לכך היא טיפול לקוי בתגי font בקוד. במידה וזה קורה, יש להסיר מהקוד הגדרות עיצוב של font ולהגדיר אותן באמצעות style בשפת CSS.
• פיירפוקס אינו מציג טקסט חלופי לתמונה (ALT) כשם שדפדפנים אחרים מציגים. הטקסט קיים ו"נלקח בחשבון", אך אינו מופיע בצורה ויזואלית.​אקספלורר 6 אינו תומך בשקיפות בקבצי PNG. יש לנסות להשתמש בGIF למטרה זו, במידה ומתחשבים באקספלורר 6.
• בהמשך לפסקה לגבי החלפת תגיות p בתגיות div - אקספלורר 7 מסתיר אותן, בעוד פיירפוקס על גרסאותיו ואקספלורר 8 מציגים קפיצת שורה ורווח כתוצאה משימוש בתגיות p.
• במקרים מסויימים אקספלורר על גרסאותיו סופר את פס הגלילה כחלק מהעמוד וקובע את האמצע של העמוד כולל פס הגלילה. פיירפוקס לא מחשיב את פס הגלילה במדידת אמצע העמוד.

כמה מילים על W3 Validation
לאחרונה גוברת הפופולריות של בדיקות אלו מבחינת השאיפה לתאימות מירבית. W3C הוא ארגון ששם לעצמו למטרה לקבוע סטנדרט שעל פיו יבנו אתרים במערכת. מטרה זו, מקודשת ככל שתהיה, אינה זוכה בשלב זה לאכיפה ולהתייחסות ממשית. כתוצאה מכך - על אף התקן ומנגנון הבדיקה שלהם, אין למעבר מבחן זה השפעה פרקטית על תצוגת האתר והאתר אינו "נפגע" בשום אופן אם אינו עובר. מעבר לכך, התאמה לתקן זה דורשת לרוב בניה קפדנית ויסודית של קוד לפי עקרונות מנחים קשוחים מאוד ואינה עולה בקנה אחד עם מערכות הנועדו לפשט את התהליך. כמו כן, עושה רושם שאתרים בעברית מתחילים עם "קנס" התחלתי של מספר מסויים של שגיאות - האתר הישראלי של ארגון הW3C אינו עובר את המבחן של עצמו... רצוי לבדוק ולסרוק אתרים מובילים ברשת הישראלית והעולמית בשביל לקבל פרופורציה לגבי רלוונטיות הבדיקה.
מבחינת מנוע החיפוש, לא הוכח קשר ישיר בין עמידה בתקנים לבין מיקום במנוע החיפוש (אתרי חדשות גדולים עם אלפי שגיאות הם הראיה לכך), לעומת העובדה הפשוטה והידועה שקיימים גורמים משפיעים הרבה יותר, דוגמת מילות מפתח וכתיבת טקסט נכונה.
מתוך רשימה של מאות סעיפים המשפיעים על קידום אתר והתאמה לדפדפנים, רוב המשקל נופל על מספר סעיפים עיקריים - על כן ניתן בהחלט להבדיל בין העיקר לתפל גם בנושא זה.

מהי שפת CSS?
CSS היא שפת מחשב המאפשרת יצירת הגדרות עיצוב קבועות באתר ועל ידי זה לוודא שהאתר נראה תמיד באופן זהה. איננו דוגלים בעבודה מול קוד היות והמערכת נבנתה מתוך שיקולים של פשטות וידידותיות מירבית, אך מי שמעוניין להרחיב את ידיעותיו וללמוד את הנושא מוזמן לעשות זאת באתרים רבים, דוגמת האתר הבא:
http://www.w3schools.com/css/default.asp

ביצוע בדיקות
האפשרות הטובה ביותר לביצוע הבדיקות היא בעצם להתקין מספר דפדפנים מובילים ולנסות את הגלישה לאתר במגוון תצורות, רזולוציות ועוד.
כמו כן, מומלץ הכלי IETester, שהשימוש בו הוא חינמי לכל שימוש (גם מסחרי) - לבדיקה של האתר עם גרסאות אקספלורר שונות, שכידוע אינן ניתנות להתקנה זו לצד זו:
http://www.my-debugbar.com/wiki/IETester/HomePage