בניית אתרים ופיתוח web

• נגישות

  לפי תקן WCAG 2.2 AA ותקן ישראלי 5568, תוך כדי הכתיבה.

• מהירות

  תקציב משקל וזמן שנקבע בהתחלה, ונשמר לאורך הדרך.

• שלוש שפות

  ימין לשמאל ככיוון פריסה, לא שיקוף בדיעבד.

• אנימציה

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

נגישות מהרגע הראשון

אנחנו בונים לפי תקן ישראלי 5568 ו-WCAG 2.2 AA. בישראל זו דרישה חוקית ולא העדפה, והקנסות אמיתיים. אבל הנקודה החשובה היא שאנחנו עושים את זה בזמן כתיבת הקוד, ולא בתיקון בדיעבד.

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

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

מהירות כתקציב, לא כמחשבה שנייה

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

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

רב לשוניות שהיא לא בעיה של תוסף

שלושה עצי שפה, lang ו-dir נכונים בכל עמוד, RTL כמערכת פריסה מהמעלה הראשונה ולא כשיקוף בדיעבד, ו-hreflang שמצביע על התרגומים האמיתיים של כל עמוד.

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

אנימציה שמכבדת את המבקר

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

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

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

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

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

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

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

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

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

ספרו לנו מה צריך להיבנות