לקחים מהעיצוב החדש של nrg

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

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

בכמה אתרי תוכן ישראלים גדולים יש אלמנט h1?

תשובה: שניים - nrg בעיצוב החדש, וויקיפדיה בעברית.

בשני האתרים האלו, האלמנט החשוב ביותר בעמוד מוקף בתג h1. בעמוד הראשי של nrg, הכותרת הראשית מתחת לתמונה הגדולה מוקפת בתג h1, ובעמודי כתבות מוקפת הכותרת של הכתבה בתג h1; בוויקיפדיה, הכותרת של כל עמוד מוקפת בתג h1.

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

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

גם באתרים אחרים יש תג h1 או תגים סמנטיים אחרים, אבל על תקן יוצא דופן שמוכיח את הכלל. לדוגמה, לפי המפתחים של msn, האלמנט החשוב ביותר בתוכן העמוד הראשי הוא הקישור "בחר מיקום" בתוך ווידג’ט מזג האוויר בצד שמאל למעלה. באופן כללי, אתרי התוכן הגדולים בישראל עושים שימוש כמעט בלעדי בתגים א-סמנטיים כמו span ו-div, או שימוש לא נכון בתגים סמנטיים כמו table או br. למשל, למרות שבכל האתרים יש קטעי טקסט מודגשים בתוך כתבות, באף אתר לא תמצאו את התג strong.

בכמה אתרי תוכן ישראלים גדולים יש הפרדה בין עיצוב לתוכן?

תשובה: שניים - nrg בעיצוב החדש, וויקיפדיה בעברית.

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

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

אבל גם ב-nrg יש הרבה מקום לשיפור: בתוך כתבות, כל פסקה מופרדת באמצעות צמד תגי br - שימוש שהוא ללא ספק השריד המכוער והמעוות ביותר מהרשת של שנות ה-90, ושמהווה ביתירות של שני התגים הזהים שלו דוגמה מושלמת לכל מה שפסול בגישה הזו.

תמונת קוד גדולה

כמה אתרי תוכן ישראלים גדולים פועלים כהלכה בכל הדפדפנים הנפוצים?

תשובה: רק אחד - ויקיפדיה בעברית כמובן, אבל nrg בעיצוב החדש הוא היחיד שמתקרב.

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

בעיצוב החדש, nrg הוא אתר התוכן הישראלי הגדול היחיד שלפחות מצליח להתקרב לגביע הקדוש הזה - לאותו סף איכות מינימלי שאצלנו משום מה הוא גבוה יותר מהמקסימום. פתחתי את nrg בכל דפדפן שיש לי, תחת חלונות ותחת OS X. חוץ מבאג זניח אחד בעמודי כתבה באופרה, לא זיהיתי שום הבדל ראוי להתייחסות. מלבד ויקיפדיה, אף אתר ישראלי גדול אחר לא היה עומד בכזה מבחן.

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

בעניין הלקחים

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

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

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

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

המאמר פורסם במקור בבלוג של נענע 10 והוא מובא פה - לאחר קיצוצים נרחבים - תחת רישיון Creative Commons.