עיצוב טבלאי של אתרי אינטרנט הוא לא נגיש

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

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

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

נשאלת השאלה, למה לא?

עיצוב טבלאי זה קוד מכוער וקוד מכוער זו בעיה בקידום אתרים

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

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

עיצוב טבלאי לא נראה טוב על מסכים קטנים/ללא CSS

אם יש לכם מכשיר טלפון מתקדם, אתם יכולים לנסות ולגלוש לאתר אינטרנט ישראל – האם הוא ייראה טוב? התשובה היא כן. האם אתר טבלאי ייראה טוב? ממש לא. אני לא יכול להרשות לעצמי לוותר על הקהל ההולך וגדל שמשתמש בטלפון סלולארי לגלישה, ואתם?

עיצוב טבלאי קשה יותר לשינוי ויקר הרבה יותר

כשאני רוצה להוסיף פריט לאחד התפריטים הרבים שיש באתר אינטרנט ישראל, כל מה שאני צריך לעשות זה להוסיף פריט אחד לרשימה, כלומר li וזה הכל. כאשר יש צורך לעדכן אתר טבלאי באותו אפן, צריך להסתבך עם td, tr וכמובן colspan ו-rowspan. אם היה לי מתכנת, שהיה צריך להכניס למערכת את כל השינויים בטבלאות בכל פעם שבא לי להוסיף קטגוריה, הוא היה צריך הרבה יותר זמן. לעומת זאת, במערכת שהפלט שלה הוא עיצוב לא טבלאי, כל מה שהמתכנת (במקרה הזה הוא אני) צריך לעשות זה לדאוג להוספת li – פריט לרשימה. אם אני רוצה להזיז בלוק של מידע או תפריט ממקום למקום, לבצע שינוי בעיצוב – אז בעיצוב טבלאי אני צריך זמן מתכנתים יקר בעוד שבעיצוב לא טבלאי כל מה שצריך לעשות זה שינוי ב-CSS, הרבה יותר זול.

יש דברים שאי אפשר לעשות בעיצוב טבלאי

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

אתרי אינטרנט שבנויים בעיצוב טבלאי הם לא נגישים

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

לסיכום

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

פוסטים נוספים שכדאי לקרוא

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

פרק מיוחד, לצד הקלטה של פרק של עושים תוכנה על אחת התקינות החשובות ביותר עבור חברות שסביר להניח שלא הכרתם

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

גלילה לראש העמוד