דף נחיתה בעברית: שבעה דברים שתבנית באנגלית שוברת

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

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

למה דווקא בעברית, ומה בדיוק נשבר

יש כאן שתי שכבות נפרדות שנוח לבלבל ביניהן.

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

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

ארבעת השוברים שרואים

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

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

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

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

שלושת השוברים השקטים

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

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

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

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

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

מבחן שבע הנקודות בעברית

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

שלושה בלוקים להדבקה

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

הצהרת המסמך, שממנה נגזרות כל יתר הנקודות:

<html lang="he" dir="rtl">

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

<label for="phone">טלפון</label>
<input id="phone" name="phone" type="tel" dir="ltr"
       inputmode="numeric" autocomplete="tel"
       pattern="0[2-9][0-9]{7,8}" placeholder="0501234567">

קישור וואטסאפ וקישור טלפון בפורמט שעובד מישראל:

<a href="https://wa.me/972501234567">שלחו הודעה</a>
<a href="tel:+972501234567">התקשרו</a>

ולטווח מספרים בתוך משפט עברי, בידוד הרצף מהסביבה:

עלות הקמה של <span dir="ltr">1,000-3,000</span> ₪

למה המבחן חוזר, ולא נעשה פעם אחת

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

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

הצעד הבא

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

שאלות נפוצות

למה הפיסוק בעברית קופץ לצד הלא נכון בדף הנחיתה?

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

איך בודקים אם הגופן בדף באמת נושא אותיות עבריות?

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

שדה הטלפון בטופס דוחה מספרים ישראליים. מה לעשות?

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

למה כפתור הוואטסאפ בדף לא פותח שיחה?

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

איך מונעים ממחירים ומטווחי מספרים להתהפך בעברית?

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

למה כפתור השליחה בטופס מופיע בצד הלא נכון?

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

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

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

האם תקלות כיווניות פוגעות גם בנגישות של הדף?

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

מה לתקן קודם כשכל שבע הנקודות פתוחות?

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