אתר CDS, שנבנה ביוזמתנו על ידי פול לואיס, הראה כיצד ליצור חוויית אינטרנט מעולה לנייד עבור המבקרים בוועידות.
מאחורי הקלעים
מדהימה היא מידת הרגישות שבה האתר פועל בדפדפנים שונים לנייד. השימוש בפריסה ובמחזורי הצבעים של הדפדפן בצורה הטובה ביותר שאפשר.
נעשה שימוש בתכונות חדשות של פלטפורמת האינטרנט
- קובץ שירות (service worker)
- מניפסט
- צבע עיצוב
דפוסים
- כרטיסים בהמתנה
- רשת רספונסיבית
- Material Design
קוד מקור
הריאיון
פיתוח
כשפול החליט לבנות את האתר, בראש סדר העדיפויות שלו היה אימוץ התכונה Progressive Enhancement (שיפור מתקדם). במקום לעצב עבור מחשבים שולחניים, הוא יצר את העיצוב עבור מסכים קטנים תחילה, ולאחר מכן התפתח למסכים גדולים יותר - תוך שיפור הדרגתי במקום להשפיל אותו בחינניות. כדי לעשות זאת היה צורך בכמות גדולה של שאילתות מדיה, אבל גם קצת חופש לנפות שינויים קטנים בין נקודות העצירה (breakpoint) העיקריות. המעקב הלוך ושוב בין גודלי המסכים עזר לו להבין איפה התוכן עלול להשתבש, כדי שהוא יוכל לפתור את הבעיה במהירות.
היבט חשוב נוסף של מומחי מוצרים הוא שמירה על תאימות לאחור עד כמה שניתן. פול בחר להשתמש בצפים מעל Flexbox מפני שהוא חש שהדבר יגדיל את מספר הדפדפנים שהאתר יפעל בהם. לפריסה הספציפית של האתר, גיליתי שלא הייתה בעיה בכלל. אם הוא היה צריך Flexbox, הוא היה משתמש ב-PE כדי להוסיף אותו.
אחד האתגרים המרכזיים של האתר היה התכונה של הרחבה וכיווץ, שדרשה חשיבה על דרך חדשה לגמרי ליצור את האנימציות. פול הגה אסטרטגיה שמכונה FLIP, שכוללת הגדרת אלמנטים של אנימציה למצב הסופי. לאחר מכן, תוכלו להחיל מאפיינים ידידותיים למרכיב, כמו טרנספורמציות ואטימות, כדי להפוך את השינויים ולהחזיר את הרכיב למיקום ההתחלה שלו. לבסוף, לאחר הסיום, מפעילים מעברים של טרנספורמציות ושקיפות ומסירים את השינויים. כתוצאה מכך, הרכיבים עוברים למיקום הסופי שלהם פעם נוספת. פול מודה שזה קצת לא צפוי, אבל הוא עובד ממש טוב ומשפר את הביצועים.
ביצועים
מאחר שהכרתי את פול לואיס כגורו הביצועים, לא הופתעתי לגלות שאיכות הביצועים הייתה שיקול חשוב ביותר בבניית האתר. הוא הסתמך במידה רבה על WebPageTest כדי להוריד ככל האפשר את הערך של מדד המהירות. בלי ההטמעה של YouTube, פול הצליח להגיע למספר פחות מ-1,000 בכבל, כך שרוב המשתמשים יקבלו רינדור ראשוני תוך פחות משנייה.
רוב העבודה שעשינו כדי לעשות את זה הייתה לשרשר, להקטין ולדחוס את התמונות כמה שיותר. האתר גם דוחה תמונות לא חיוניות לאחר טעינת הדף כדי שהתוכן בפועל יעובד לסינון מהר יותר.
כדי לשפר עוד יותר את זמן הטעינה של הדף, פול הפסיק להשתמש ב-Service Worker. באמצעותה, בין אם אתם מחוברים לאינטרנט ובין אם לא, ניתן להציג ביקור בדף מתוך המטמון, וכך להבטיח שתגיעו לתוכן גם בחיבור לא יציב (חשוב מאוד בזמן שיחת ועידה ב-Wi-Fi!). האתר של CDS הוא אחד מאתרי ההפקה הראשונים שהשתמשו בתכונה החדשה, ופול נתקל בה בכמה "בעיות ראשוניות", אבל הוא סיפר לי שהשיפור המשמעותי בביצועים המצה אותו. למעשה, עכשיו הוא מגיע לכל אתר שהוא בונה!
כמובן שהביצועים לא נמדדים רק לפי איכות הטעינה של האתר, אלא גם לגבי איכות ההפעלה. פול ידע שהאנימציות יהיו אתגר, ולכן הוא חשב על FLIP. חוץ מזה, הוא יצא בדרכו כדי לוודא ששום דבר לא יפריע לקלט מגע או לגלילה. למרות העובדה שהאתר לא מורכב מאוד, הוא השתמש במתודולוגיית RAIL ששונתה לבניית ה-build (לא היה לו צורך בזמני פעילות ארוכים) וזה עזר מאוד!
עיצוב
מכיוון שהאתר זויף על ידי אדם אחד, פול היה גם המעצב וגם המפתח בפרויקט, וכתוצאה מכך התקבלה רמת הבנה חסרת תקדים בנוגע לבעיות אחד של השני בשני 'הצוותים'. הוא אוהב לתכנן את המחשב השולחני (ההיפך מ'שיפור מתקדם', שבו השתמש במהלך הפיתוח), כי זה עוזר לו להבין מה צריך להשקיע בפרויקט. לאחר מכן פול יורד לתצוגה לנייד, וכך הוא משפר את הדברים באופן משמעותי ולהבטיח שהדברים החשובים ביותר מקבלים את תשומת הלב הרבה ביותר. לאחר מכן, נעדכן את הגרסה למחשב, כי יהיה צורך לעדכן את ארכיטקטורת המידע והעדיפות.
לא הכול היה חלק. ההנחיות של Material Design בזמנו לא היו ברורות בנוגע לאופן שבו ניתן ליצור אתר תוכן, ולכן היו תחומים שבהם הוא לא הספיק לעשות זאת. גם העיצוב לא הביא בחשבון את הקשר בין לוח הזמנים לבין המידע על הסשן, ובסופו של דבר חוויית המשתמש גרמה לכך שאנשים ייכנסו ללוח הזמנים ויהיו מתוסכלים שלא ניתן היה להגיע ישירות לפרטי הפעילות.
עם זאת, אני חושב שפול עשה עבודה אדירה בהעברת המפרט של עיצוב חדשני תלת-ממדי לאתר תוכן. אני ממש מרוצה מהרכיבים החזותיים ומהתנועה. יש לו תחושה ייחודית של Material Design, והמידע והמראה מעודדים אינטראקציה והיררכיה.
הפעולה הצליחה
- השקנו בהצלחה את האתר כולו ב-GitHub (יותר מ-200 כוכבים) כדי שישמש תבנית סטנדרטית והשראה למפתחי אתרים.
- שילבנו את הגרסאות העדכניות והטובות ביותר של פלטפורמת האינטרנט: service worker, מניפסט אינטרנט וצבעי עיצוב דינמיים. כשמריצים את מכשירי Android, ההשפעה נטו היא בשילוב עם הפלטפורמה. אם מוסיפים אותו למסך הבית של המשתמשים, זה מאוד דומה לאפליקציה שבה הם משתמשים, וזה ממש מגניב.
- ~73.7k צפיות בדפים, ~73.7k קליקים למעבר אל קטעי משנה באתר הובילו לכך שאנשים השתמשו בפועל בתוכן והתחברו אליו, הרבה יותר מהצפוי.
בסך הכל, זוהי השראה נהדרת למפתחי האינטרנט של היום ואתר כנסים מצליח.