אותה עבודה, מסך אחר: מה חייב להשתנות בין מובייל למחשב?

לא מקטינים אתר. עורכים חוויה.

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

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

מה חייב להישאר מוכר

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

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

דוגמה שאפשר לבחון

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

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

שלוש שאלות לפני שעולים לאוויר

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

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

גלילה לצד אינה תמיד טעות

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

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

איכות היא גם מה שלא מחכים לו

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

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

המבחן הפשוט

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

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