אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » נגישות אינטרנט » עיצוב טבלאי של אתרי אינטרנט הוא לא נגיש

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

רן בר-זיק דצמבר 26, 2008 10:54 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

לסיכום

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
אתר אינטרנט נגישות אינטרנט
ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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