מקרה בוחן
Destins de Femmes: אתר של עמותה לזכויות נשים, פרס Edgar Faure 2024
האתר של עמותה צרפתית שנותנת קול לנשים: סיפורים מעוררי השראה, סדרת ראיונות ביוטיוב, הביוגרפיה של המייסדת, הצוות והמשימה. Destins de Femmes זכתה בפרס Edgar Faure 2024.
המצב
עמותה צרפתית שנוסדה כדי לתת קול לנשים ולקדם פמיניזם חיובי והומניסטי הייתה צריכה מקום אחד שבו הסיפורים, הראיונות והמשימה שלה ייקראו, ייצפו ויניעו לפעולה.
האילוץ
האילוץ היה עריכתי, לא טכני. האתר עוסק באנשים ובמה שקרה להם, ולכן העיצוב היה צריך לפנות את הבמה: טקסט ארוך שנוח לקרוא, וידאו שמתנגן במקום שבו הסיפור מסופר, ושום דבר שמתחרה בפנים או במשפט. האמינות של עמותה נבנית במסך הראשון, ונאבדת באותה מהירות עם דף שנראה כמו השקת מוצר.
הוא גם היה צריך להיות בשפה אחת, צרפתית, עשויה כמו שצריך לקהל צרפתי, עם טופס יצירת קשר שעובד בלי שרת להפעיל, כי אף אחד בצוות של עמותה לא אמור להיות בכוננות בשביל שרת.
אתר כזה נשפט על ידי שני אנשים שלעולם לא נפגשים: קוראת שמגיעה מקישור ששותף איתה בטלפון, ושותף או חבר ועדה שפותח אותו במחשב כדי לבדוק שהארגון אמיתי. שניהם צריכים את אותם הדברים בשניות הראשונות: שם, פנים, מטרה, ודרך להגיע למישהו.
מה בניתי
אתר React בעמוד אחד, בצרפתית, חי בכתובת destinsdefemmes.com:
- מדור סיפורים מעוררי השראה, הלב של האתר, מעומד לקריאה ולא לרפרוף.
- סדרת ראיונות ביוטיוב מוטמעת בדף, כך שהסרטונים מתנגנים במקום שבו הסיפור מסופר במקום לשלוח את הגולש החוצה.
- הביוגרפיה של המייסדת והצגת המשימה, לכל אחת מדור משלה וקצב משלה.
- גלריית צוות.
- טופס יצירת קשר ששולח דרך EmailJS עם אישור על המסך, כך שהעמותה מקבלת הודעות לתיבת המייל בלי backend.
- גלילה חלקה בין המדורים, גריד של Bootstrap, אחסון ב-Firebase.
מסרתי אותו מקצה לקצה, מבנה, עימוד, שילוב הסרטונים, הטופס והפריסה, בלי סוכנות באמצע. ככה אתר בגודל כזה נשאר קוהרנטי: אדם אחד מחזיק את התמונה המלאה וכל החלטה מתקבלת מול התוכן, לא במסמך אפיון.
המספרים
- 2024Prix Edgar Faure
- 5מדורי תוכן
- FRשפה אחת, עשויה כמו שצריך
- 0שרתים לתחזק
פרס Edgar Faure 2024 הוענק ל-Destins de Femmes. אני בניתי את האתר; העבודה שהפרס מכיר בה היא של העמותה. לא אקשט את זה בנתוני תנועה או תרומות שאין לי, ולא ביקשתי מאף אחד המלצה.
מה הייתי עושה אחרת
האתר הוא אפליקציית React בעמוד אחד. לצוות קטן ולתאריך השקה זו הייתה הבחירה המהירה והנכונה: פריסה אחת, בלי שרת, טופס שפשוט עובד. יש לה מחיר אמיתי אחד שהיום לא הייתי מקבל: ה-HTML שמוגש מכיל כותרת, תיאור והסקריפט שטוען את האפליקציה, ושום דבר מעבר לזה. הסיפורים חיים בתוך ה-JavaScript.
מנוע חיפוש או תצוגה מקדימה של קישור בוואטסאפ שקוראים את הדף הגולמי כמעט לא רואים מהתוכן. לאתר שכל מטרתו היא שסיפורים יימצאו, זו העסקה הלא נכונה. היום הייתי בונה אותו כאתר Next.js מיוצא סטטית, דף HTML אמיתי לכל מדור, בדיוק כמו הדף שאתם קוראים עכשיו.
כל השאר מחזיק: העימוד העריכתי, הראיונות המוטמעים, טופס הקשר בלי שרת. אם העמותה תרצה אי פעם לעשות את המעבר, זו בנייה מחדש של המעטפת, לא של התוכן.
הסטאק
- React.js
- EmailJS
- Firebase
- Bootstrap
- React-Toastify
- Smooth-Scroll
לראות
רוצים משהו כזה?
ספרו לי מה אתם בונים, או מה אתם עדיין עושים ידנית, ואני אגיד לכם איך הייתי ניגש לזה. בלי התחייבות.