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

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

1. עובדים רק עם 3 Breakpoints

תדבקו בשלושה ברייקפוינטס בלבד:

דסקטופ (1200~1400px)
טאבלט (810px)
מובייל (390px)

ואם אתם ממש פדנטים כמוני, בסוף כל העבודה על האתר תוסיפו נקודה נוספת למובייל של 429 פיקסל, שהיא נוגעת בדיוק באייפונים הגדולים (Pro max editions)

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

2. תמיד לעבוד עם Stacks

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

3. כלל ה-90% Relative ו-10% Absolute

הרוב המוחלט (90%) של האלמנטים באתר שלכם צריך להיות מסודרים בקונטיינרים על מצב (Relative).
ולהשתמש ב-Absolute רק לאלמנטים מיוחדים כמו אנימציות, אפקטים ספציפיים או תמונות/גרפיקות מיוחדות שצריכות לשבת בצורה שמנותקת מהגריד.

4. קנבס וסקשנים בגובה אוטומטי (Fit)

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

5. לשקול להשתמש ביחדות VH (Viewport Height) בהירו

השתמשו בזהירות ב-VH לסקשנים הגדולים באתר (כמו Hero Sections). אני ממליץ על בין 90-100VH, תלוי בכמות התוכן – כדי לקבל יותר שליטה על ה"תמונה הראשונית" שהלקוח רואה כשהוא נכנס לאתר.

6. שילוב בין Fill Width & Max Width

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

7. להשתמש ב-Layout Templates לתפריט ופוטר

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

8. מבנה סמנטי של התוכן

היררכיית המבנה של כל עמוד צריך להיראות ככה:
Breakpoint > Main > Section > Content
זו הדרך הכי טובה לשמור על סדר, שגם תאפשר לכם להגדיר Padding, Min, Max Width במקומות הנכונים, ותעזור לבוטים של גוגל להבין יותר טוב את המבנה הסמנטי של האתר.

9. פאדינג וסקשנים

ה-Padding העליון ותחתון (ריווח בין סקשנים) מוגדר ברמת הסקשן, ו-Padding מימין ושמאל מוגדר ברמת התוכן (Content).

10. גודל מקסימלי לגריד

בהנחה שאתם עובדים לפי גריד (כדאי לכם!), אנחנו רוצים שהטווח עליון שבו התוכן יוכל להתפרס יהיה קבוע ואחיד לכל הדפים באתר ולכל התוכן, איך עושים את זה? מגדירים Max Width כטווח עליון לתוכן שלנו ברמת הסקשן — כן, לכל סקשן בנפרד, כדי לשמר שליטה מלאה על העמוד, תמיד נרצה להימנע מ-Padding או Max Width ברמת ה-Main.. כי ברגע שאנחנו נפגשים באלמנט יוצא דופן.. נצטרך לשנות את כל האתר כדי להתאים אותו מחדש.

11. בדיקת רספונסיביות ידנית

בודקים את כל הטווח הרספונסיבי של נקודת שבירה דרך ה- Preview Mode של פריימר, שמאפשר Dynamic Resizing.