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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

לסיכום

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

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

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

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

ספריות ומודולים

להתנסות ב AutoGPT

הטרנד החם בעולם ה-GPT וה-AI – הפעלת אייג׳נטים בקלות עם Auto GPT.

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

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

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

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

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