בקצרה: עיצוב אתר בעברית דורש תכנון מימין לשמאל (RTL) מהשורה הראשונה, ולא רק תרגום של הטקסט. הטעויות הנפוצות הן טווחי מספרים שמתהפכים, פיסוק בצד הלא נכון, חיצים הפוכים, אייקונים שהתהפכו בלי צורך, תפריט בצד הלא טבעי, שדות מייל וטלפון מבולגנים, יישור לשני הצדדים, גופן עברי חלש ותנועה בכיוון ההפוך. את כולן אפשר לבדוק בעשר דקות עם הרשימה שבסוף.
למה אתרים בעברית נשברים
עברית נכתבת מימין לשמאל, וזה משפיע על כל העמוד: סדר האלמנטים, כיוון החיצים, מיקום התפריט, הטפסים ואפילו האופן שבו מספרים נראים. רוב הפלטפורמות והתבניות פותחו קודם לאנגלית, והתמיכה בעברית נוספה אחר כך. כשאתר נבנה במקור לאנגלית ו"הופך" לעברית, נשארות טעויות.
כל טעות לבד נראית קטנה. ביחד הן יוצרות תחושה של אתר "מתורגם", כזה שלא נבנה בשביל הקורא הישראלי. הגולש לא יכתוב לכם על זה, הוא פשוט יסמוך קצת פחות.
טעויות 1-4: מספרים, פיסוק וחיצים
1. מספרים וטווחים שמתהפכים
טווח כמו "5-7 ימים" יכול להופיע בטעות כ"7-5", בגלל האופן שבו הדפדפן מסדר ספרות וסימנים בתוך טקסט עברי. מניסיון, סימן מסוים כמו קו מפריד ארוך בין שני מספרים נוטה להתהפך יותר ממקף רגיל, ולכן באתרים שאני בונה טווחים נכתבים עם מקף פשוט. גם מספרי טלפון, תאריכים ומחירים עם סימן מטבע נפגעים לפעמים. צריך לבדוק כל מספר באתר בעין, במיוחד ליד מקף, לוכסן או סוגריים.
2. סוגריים וסימני פיסוק במקום הלא נכון
משפט עברי שנגמר במילה באנגלית יכול להציג את הנקודה בצד הלא נכון. סוגריים סביב מילה לועזית מתהפכים. שורה שמתחילה בשם באנגלית, כמו שם של מותג, יכולה להתיישר לצד שמאל. זה נראה קטן, אבל זה מה שגורם לאתר להרגיש מתורגם, ובכותרות זה בולט במיוחד.
3. חיצים בכיוון הלא נכון
בעברית, "הבא" הוא שמאלה ו"הקודם" ימינה. חץ "המשך" שמצביע ימינה, או סליידר שבו החיצים הפוכים, מבלבל את הגולש. גם אייקונים כמו "חזור" או "שלח" עם חץ צריכים להיות במראה.
4. אייקונים שלא צריך להפוך
מצד שני, לא כל אייקון מתהפך. סימן וי, שעון, טלפון, לוגואים של חברות, סימן הפעלה של וידאו ואייקון של וואטסאפ נשארים כמו שהם. היפוך אוטומטי של הכול יוצר טעויות חדשות: שעון שמחוגיו הפוכים או לוגו שמופיע במראה נראים מוזר מיד.
טעויות 5-9: תפריט, טפסים, גופן ותנועה
5. תפריט ולוגו בצד הלא טבעי
בעברית הלוגו נמצא בדרך כלל בצד ימין, והתפריט נקרא מימין לשמאל. גם התפריט שנפתח בטלפון צריך להיפתח מהצד הנכון. אין חוק מוחלט, אבל כשהסדר הפוך מהמצופה, הגולש מחפש. על מבנה התפריט עצמו כתבתי במדריך לתפריט וניווט באתר.
6. טפסים
בשדות טקסט רגילים הסמן צריך להתחיל מימין. אבל בשדה של מייל או מספר טלפון, הכתיבה היא משמאל לימין, ושדה שלא מוגדר נכון מציג את המייל מבולגן: הסימן @ קופץ למקום הלא נכון והנקודה נודדת. גם הודעות שגיאה, תיבות סימון וכפתור השליחה צריכים להיות מיושרים לימין, ותיבת הסימון צריכה לעמוד מימין לטקסט שלה. עוד על בניית הטופס במדריך לטופס יצירת קשר.
7. טקסט מיושר לשני הצדדים
יישור לשני הצדדים (justify) יוצר בעברית רווחים גדולים ולא אחידים בין מילים, במיוחד בטלפון, שבו כל שורה קצרה. התוצאה היא "נהרות" של רווח לבן שעוברים בפסקה. עדיף יישור לימין, עם קצה שמאלי חופשי.
8. גופן עברי חלש
תבניות רבות נבנו עם גופן לטיני יפה. כשהוא לא תומך בעברית, הדפדפן מחליף אותו בגופן ברירת המחדל של המכשיר. התוצאה: אנגלית מעוצבת ועברית רגילה ובנאלית, או שני גופנים לא תואמים באותה שורה. איך בוחרים זוג גופנים שעובד מוסבר במדריך לפונטים בעברית לאתר.
9. אנימציות וגלילה אופקית
מסילה אופקית שזזה משמאל לימין, או אנימציה שבה אלמנטים נכנסים מהצד הלא צפוי, מרגישות הפוכות בעברית. בעיצוב RTL תנועה "קדימה" היא בדרך כלל לכיוון שמאל, כמו כיוון הקריאה. גם סרגל התקדמות צריך להתמלא מימין לשמאל. עוד על תנועה עם תפקיד במדריך לאנימציות באתר.
דוגמה: שורה אחת, שלוש טעויות
נניח שבאתר של קליניקה כתוב: "זמינות: א'-ה' (8:00-16:00), תורים ב-WhatsApp." בתבנית שתורגמה, השורה יכולה להופיע עם הטווח של השעות הפוך, הסוגריים פונים החוצה, ו"WhatsApp" קופץ לתחילת השורה עם הנקודה לפניו. שלוש טעויות במשפט אחד, וכולן נובעות מאותו מקור: הדפדפן לא קיבל הוראה ברורה איך לסדר טקסט מעורב.
הפתרון בקוד הוא לסמן נכון את כיוון העמוד ואת הקטעים המעורבים, ולבדוק כל שורה כזאת בעין. בפלטפורמה סגורה לפעמים אין גישה לרמה הזאת, ואז הפתרון היחיד הוא לשנות את הניסוח עד שהוא מוצג נכון.
אתר בעברית ובשפות נוספות
אם לאתר יש גם גרסה באנגלית או בשפה אחרת, הבעיה כפולה: כל עמוד צריך לעבוד בשני הכיוונים. הלוגו, התפריט, החיצים והטפסים מתהפכים כשעוברים שפה, והטקסט בשפה השנייה צריך גופן שמתאים לגופן העברי. כדאי לבדוק כל עמוד בכל שפה, ולא להניח שאם העברית בסדר, גם השאר בסדר.
בניתי את האתר של Zusammen Leben, יוזמת מתנדבים שמלווה משפחות מאוקראינה בצפון בוואריה, כאתר רב-לשוני. באתר כזה כל רכיב נבדק בכל אחת מהשפות. סיפור הפרויקט מפרט את המבנה. גם לצד של גוגל יש השלכות, ועליהן כתבתי במדריך ל-SEO לאתר בעברית.
איך בודקים עיצוב אתר בעברית
רשימה לעשר דקות, במחשב ובטלפון:
- עברו על כל מספר, טווח, מחיר, שעה ותאריך ובדקו שהם נקראים נכון.
- חפשו כל חץ ובדקו שהוא מצביע לכיוון ההגיוני בעברית.
- בדקו שאייקונים בלי כיוון, כמו שעון, טלפון ולוגואים, לא התהפכו.
- מלאו את הטופס, כולל מייל ומספר טלפון, וראו איך הם מוצגים בשדה.
- שלחו את הטופס ריק ובדקו שהודעות השגיאה מיושרות ומובנות.
- פתחו את התפריט בטלפון ובדקו מאיזה צד הוא נפתח.
- קראו כל משפט שמשלב אנגלית ועברית ובדקו את סימני הפיסוק והסוגריים.
- גללו במסילות ובסליידרים ובדקו שהכיוון מרגיש טבעי.
הבדיקה הכי טובה היא עם עין חדשה. בקשו ממישהו שלא מכיר את האתר לעבור עליו בטלפון ולהגיד לכם כל מקום שבו הוא "נתקע" לרגע: מספר שנקרא מוזר, כפתור שלא ברור לאן הוא מוביל, שורה שנראית מבולגנת. אחרי שבועות של עבודה על האתר, העין של בעל העסק כבר מתרגלת לטעויות ומפסיקה לראות אותן.
למה זה קורה דווקא באתרי תבנית
כשבונים אתר בעברית מאפס, ההחלטות האלה נלקחות בחשבון מההתחלה ולא מתוקנות בדיעבד. בתבנית שנבנתה לאנגלית, כל תיקון הוא טלאי, ולפעמים עדכון של התבנית מחזיר את הבעיה. על ההבדלים בין הדרכים אפשר לקרוא בהשוואה בין Wix לאתר בקוד, ומי ששוקל לעבור יכול לקרוא על מעבר מ-Wix לאתר בקוד.
לסיכום
אתר בעברית צריך להיבנות לעברית, ולא להיות מתורגם אליה. רוב הטעויות קטנות, אבל יחד הן משפיעות על האמון. אני בונה אתרים מימין לשמאל מהשורה הראשונה של הקוד, ובודק מספרים, חיצים וטפסים בכל אתר לפני שהוא עולה. אם יש לכם אתר שמרגיש מתורגם, אפשר לבדוק אפשרות של חידוש אתר.
רוצים אתר שעובד בשביל העסק?
ספרו לי מה אתם צריכים, ותקבלו כיוון ברור והצעת מחיר מסודרת.