איך להתאים אתר Wix Studio למובייל בלי להרוס את הדסקטופ

התאמת אתר למובייל ב-Wix Studio לא אמורה לשנות את גרסת הדסקטופ - כל עוד נדע אילו פעולות משפיעות רק על נקודת השבירה הנוכחית, ואילו פעולות משנות את מבנה האתר כולו.

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

המדריך מתייחס ל-Wix Studio Editor ולא לעורך Wix הישן.

קודם כול נדבר על איך נקודות השבירה עובדות ב-Wix Studio

ב-Wix Studio העיצוב עובד בשיטת Cascade, כלומר שינויים שנעשים בנקודת שבירה גדולה משפיעים גם על נקודות השבירה הקטנות יותר.

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

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

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

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

אילו שינויים אפשר לבצע במובייל בלי לפגוע בדסקטופ?

ברוב המקרים אפשר לבצע במובייל התאמות של גודל, מיקום ועיצוב:

בדרך כלל משפיע רק על המובייל	עשוי להשפיע על כל נקודות השבירה
שינוי גודל של אלמנט	מחיקת אלמנט
שינוי גודל טקסט	החלפת תמונה
שינוי צבע, מסגרת או רקע	שינוי טקסט או קישור
שינוי שוליים ורווחים	העברת אלמנט ל-Container אחר
שינוי מיקום בתוך אותו Parent	העברת אלמנט לתא אחר ב-Grid
הסתרת אלמנט במובייל	יצירת Stack שמשנה את מבנה האלמנטים
שינוי ה-Responsive Behavior	שינוי מבני ביחסי Parent-Child

האדיטור של Wix מגדיר שינויים בגודל, במיקום ובעיצוב שנעשים בנקודת שבירה מסוימת כ-Overrides. השינויים האלה מאפשרים ליצור גרסת מובייל מותאמת בלי לשנות את העיצוב המקורי בדסקטופ.

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

הדרך הנכונה להתאים את האתר למובייל

1. נתחיל מהדסקטופ

גם אם רוב הכניסות לאתר צפויות להגיע מהטלפון, ב-Wix Studio נקודת השבירה הראשית היא הדסקטופ. לכן כדאי לבנות בה קודם את המבנה הנכון של העמוד: Sections, Containers, Grids, Stacks ויחסי הגודל בין האלמנטים.

רק אחרי שהמבנה בדסקטופ יציב נעבור לטאבלט ולמובייל.

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

2. נעבור לנקודת השבירה של המובייל

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

בשלב הראשון נחפש:

• טקסטים שנשברים בצורה לא מוצלחת

• אלמנטים שעולים זה על זה

• רווחים גדולים מדי

• תמונות שנחתכות במקום הלא נכון

• כפתורים קטנים או צפופים

• אלמנטים שיוצאים מגבולות המסך

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

3. נתקן את הטיפוגרפיה

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

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

הגדרת Max-Min שנעשית בדסקטופ עוברת אוטומטית לנקודות השבירה הקטנות. במידת הצורך עדיין אפשר ליצור התאמה ייחודית במובייל. פתרון בעיות רספונסיביות ב-Wix Studio.

4. נבדוק את ה-Stack וה־Grid לפני שנזיז אלמנטים

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

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

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

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

5. נטפל ברווחים דרך ה-Inspector

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

במקום לגרור את גובה ה-Section עד שהרווח נעלם, כדאי לבחור את ה-Section ואת האלמנטים שבתוכו ולבדוק ב-Inspector:

• האם יש Padding עליון או תחתון גדול מדי?

• האם אחד האלמנטים מחובר ב-Docking לתחתית?

• האם הוגדר Margin באחוזים שמייצר תוצאה קיצונית במסך צר?

• האם קיים אלמנט מוסתר או שקוף שתופס מקום?

• האם גובה ה-Section מוגדר באופן שמתאים לתוכן?

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

המדריך הרשמי לעבודה עם Docking, Margins ו-Padding.

6. יש להסתיר במקום למחוק

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

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

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

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

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

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

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

אם ההודעה מופיעה בזמן העבודה על המובייל, כדאי לעצור ולבדוק:

1. האם האלמנט מועבר ל-Container או לתא אחר?

2. האם מדובר בשינוי של הטקסט, התמונה או הקישור?

3. האם האלמנט עומד להימחק?

4. האם אפשר להשיג את אותה תוצאה באמצעות שינוי גודל, מיקום או הסתרה?

איך נתקן גלילה אופקית במובייל?

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

אפשר לבחור את שכבת העמוד, לפתוח את ה-Inspector ולהגדיר את Overflow Content כ-Hide בנקודת השבירה של המובייל. ההגדרה תמנע את הופעת פס הגלילה, אבל היא אינה מחליפה את איתור האלמנט הבעייתי.

הגדרת Overflow Content מאפשרת להסתיר תוכן שחורג מגבולות העמוד. מקור: Wix.

לאחר הפעלת Hide כדאי לעבור על השוליים של העמוד ולחפש את האלמנט שחורג מה-Viewport. המדריך של Wix לעבודה עם Overflow Content.

אין להסתפק בתצוגת המובייל הקבועה

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

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

לפני הפרסום מומלץ לבדוק את האתר גם ב-Preview וגם במכשיר אמיתי. כדאי לעבור לפחות על:

• תפריט הניווט

• אזור הפתיחה של כל עמוד

• טפסים ושדות קלט

• כפתורים וקישורים

• סליידרים ורפיטרים

• חלונות קופצים

• אזורי ה-Header ו-Footer

• עמודים דינמיים

• 
  

טעויות נפוצות בהתאמת Wix Studio למובייל

הזזת כל אלמנט בנפרד

התוצאה יכולה להיראות תקינה ברוחב מסוים ולהתפרק ברוחב אחר. עדיף להשתמש ב־Stacks, ב-Grid וב-Responsive Behavior.

מחיקת אלמנט שלא נחוץ במובייל

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

יצירה של כל המבנה מחדש במובייל

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

הסתרה של הגלילה האופקית בלי למצוא את הסיבה

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

בדיקת רוחב מסך אחד בלבד

“מובייל” הוא טווח רחב של מסכים. העיצוב צריך לעבוד גם במכשירים צרים וגם במסכים גדולים יותר.

ואם המובייל כבר שינה משהו שלא התכוונתי לשנות?

אם מדובר בשינוי עיצוב או Layout שנעשה בנקודת שבירה קטנה, אפשר לבחור את האלמנט, לפתוח את More Actions ולבחור Remove Overrides. הפעולה מחזירה את האלמנט להגדרות שהתקבלו מנקודת השבירה הגדולה יותר.

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

לסיכום

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

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

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