לדף הכניסה של ישרא-בלוג
לדף הראשי של nana10
לחצו לחיפוש
חפש שם בלוג/בלוגר
חפש בכל הבלוגים
חפש בבלוג זה

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

כינוי:  צוות nana10





מלאו כאן את כתובת האימייל
שלכם ותקבלו עדכון בכל פעם שיעודכן הבלוג שלי:

הצטרף כמנוי
בטל מנוי
שלח

RSS: לקטעים  לתגובות 
ארכיון:


5/2008

לקחים מהעיצוב החדש של 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, שהם ללא ספק מהמוכשרים שפועלים באתרי התוכן בארץ, אציע את האפשרות שהכתבות של nrg שמורות כך בבסיס הנתונים - תמיד עדיף להאשים את הממשל הקודם. מצד שני, כשנכשלים בפתרון בעיה שפונקציית Search and Replace ב-Notepad מסוגלת להתמודד איתה, יש מקום להרמת גבה.

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

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

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

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

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

חידה: בכמה אתרי תוכן ישראלים גדולים ה-HTML של העמוד הראשי שוקל *פחות* מכל שאר רכיבי העמוד ביחד?

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

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

משקל ה-HTML של העמוד הראשי הוא תוצאה ישירה של הפרדת התוכן מהעיצוב, או אי הפרדה שלהם. לדוגמה, למרות שעמוד הבית החדש של nrg מציג כמות מידע מקבילה לזו המוצגת בעמוד הבית של נענע 10, ה-HTML שמרכיב אותו שוקל רק 48KB, לעומת 143KB (!!) בנענע 10.

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

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

את השיא שוברים בדה-מרקר: הם מצליחים לשפוך לאסלה ולהוריד אחרי את זה המים על פי 6 יותר כסף ממה ש-nrg משקיעים על אותו דבר בדיוק. בסך הכל, ה-HTML של העמוד הראשי שלהם שוקל בערך 240KB (אם כי יש לציין שדה-מרקר דוחסים בעמוד הראשי שלהם כמות לא-סבירה בעליל של מידע, הרבה יותר מאשר ב-nrg, אז ההשוואה לא לגמרי הוגנת)

מי שמכירים את הסיפור על עטיפת הסינגל Blue Monday, יכולים בוודאי להבין את האירוניה כאן.

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

מכיוון שמידע עובר ברשת דרך הרבה יותר מאשר שתי נקודות, ההשפעה המצטברת של קוד הספגטי באתרים כמו גלובס (כ-200KB) והארץ (183KB) היא בזבוז אדיר של משאבים מתכלים. אכן, פליטת הפחמן לה אחראי ה-HTML בעמוד הראשי של הארץ גדולה פי ארבע מפליטת החמצן ב-nrg; או במילים אחרות, nrg ירוקה פי ארבע יותר מהארץ.

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

(כל הנתונים הנ"ל נאספו באמצעות FireBug, למי שסקרנים)

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

תשובה: כל הזקנים שקמו לפני שהיו אלטרנטיבות ללינוקס+Apache (היום יש?), וגם nrg וויקיפדיה בעברית.

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

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

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

אם כל האתרים הכי גדולים ומצליחים ברשת עושים הכל בדיוק ההיפך מכם, אולי אפשר ללמוד מהם משהו.

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

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

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

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

 

נכתב על ידי:רן יניב הרטשטיין

נכתב על ידי צוות nana10 , 13/5/2008 02:22   בקטגוריות אינטרנט אקספלורר, nana10, תקנים, אינטרנט  
150 תגובות   הצג תגובות    הוסף תגובה   2 הפניות לכאן   קישור ישיר   שתף   המלץ   הצע ציטוט
תגובה אחרונה של 8rc4pf ב-24/6/2017 15:30



הבלוג משוייך לקטגוריות: אינטרנט , עבודה
© הזכויות לתכנים בעמוד זה שייכות לצוות nana10 אלא אם צויין אחרת
האחריות לתכנים בעמוד זה חלה על צוות nana10 ועליו/ה בלבד
כל הזכויות שמורות 2018 © נענע 10 בע"מ