עיצוב אתרים למסכים מתקפלים ב-2026: המדריך המעשי ל-UI/UX

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

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

מ-Responsive Design ל-Fold-Aware Design

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

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

הגדרה · Fold-Aware Web Design

גישת עיצוב שבה ה-CSS וה-JavaScript מזהים את המיקום הפיזי של קפל המסך (Hinge) ומארגנים את התוכן מסביבו, במקום לתת לתוכן להיחצות במרכז.

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

הכלים הטכניים: CSS Spanning ו-Screen Fold API

איך פותרים את זה בפועל ב-2026? הדפדפנים המודרניים תומכים כיום ב-CSS Viewport Segments בצורה מלאה.

מדיה קוורי בסיסי נראה כך:

@media (horizontal-viewport-segments: 2) {
  .main-layout {
    display: grid;
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 0 1);
    gap: env(viewport-segment-gap-width 0 0);
  }
}

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

זה מונע את התופעה שבה טקסט או תמונה נחתכים באמצע.

איך לנצל מסך כפול להגדלת המרות

מסך מתקפל אינו בעיה עיצובית. הוא הזדמנות עסקית.

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

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

זה עובד מעולה. הגולש לא צריך ללחוץ 'חזור' בכל פעם. הכל מול העיניים.

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

3 טעויות ששוברות את ה-Grid

אני רואה את הטעויות האלה שוב ושוב בביקורות אתרים שאני עושה.

1. מיקום חלונות קופצים (Popups) במרכז. פופ-אפ שממורכז ב-CSS קלאסי ייפול בדיוק על הקפל הפיזי במכשיר פתוח. המשתמש לא יוכל לקרוא את כפתור הסגירה.
2. מתיחת תמונות רחבות. תמונות רחבות ללא הגדרת max-width מבוססת סגמנט ייראו מעוותות או חתוכות במרכזן.
3. התעלמות ממצב Flex. כשהמשתמש מניח את המכשיר על השולחן בצורת L, המסך התחתון צריך להפוך לאזור שליטה, והמסך העליון לאזור צפייה.

💡

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

בשורה התחתונה

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

בידקו את האתר ב-Chrome DevTools, הגדירו גריד מבוסס Segments והפרידו את הפוקוס בין שני חצאי המסך.

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