איפיון האתר במובייל כולו ולאחר מכן הרחבה לנקודות שבירה של מסכים גדולים יותר.
מקובל ליצור שלוש נקודות שבירה:
מובייל 320 פיקסלים.
טאבלט 768 פיקסלים.
דסקטופ (בהתאם לתוכן) 960 או 1200 פיקסלים.
הרעיון הוא להתחיל בלחשוב קטן ואז להוסיף אלמנטים.
מתאים לאתרים קטנים ולא למערכות גדולות.
כיום מומלץ לעצב עבור רוחב מסך מובייל 360 פיקסלים כיוון שהמסכים של היום מתחילים מגודל זה. בעבר היו מעצבים לגודל מסך 320 פיקסלים (כמו אייפון 3 לדוגמא).
יתרון – קל ומהיר.
חסרון – לא מנצל את גודל המסך בדסקטופ.
מתאים לאתרים פשוטים יחסית המבוססים על ויז’ואלים.
עבודה עם גריד רספונסיבי מוכן הכולל נקודות שבירה קבועות מראש לכל האתר.
מתחילים מהדסקטופ – הגריד “דואג” לסידור במובייל (Stacked columns).
השיטה הנפוצה ביותר היא Twitter Bootstrap (מבוסס על 12 טורים).
יתרון – קל לפיתוח.
חסרון – חוסר גמישות, עיצוב לא מושלם בגדלי ביניים.
חלוקה לשורות, שבירה ע”י Stacked columns.
יש לשים לב לאורך כל אחד מהרכיבים ומצד שני להימנע מיצירת עמוד ארוך מידיי במובייל.
כדי לנצל נכון את הגריד, גודל הרכיבים עצמם בדר”כ לא משנה. רכיבים התופסים מספר רב של עמודות יצטרכו להיות כאלה שיוכלו להצטמצם לרוחב של מכשיר נייד בעזרת Nesting או מראש ללא תוכן רב.
ניתן לעבוד עם Mobile First או הפוך – אך חובה לתכנן מראש כיצד תראה נקודת השבירה הקיצונית השניה.
הרעיון הוא לחשוב על כל רכיב בנפרד ואיך הוא יתנהג בכל מסך ולא על כלל הרכיבים יחד. ואז יהיה קל יותר להרכיב אותם ביחד בכל מסך.
למשל לחשוב על ה-Header איך הוא יראה בכל מסך ואז לחבר אותו לשאר הרכיבים.
כלומר לכל נקודת שבירה לבנות תבנית משלה.
כל אלמנט הוא אטום.
רכיב screen שמכיל בתוכו שדה input וכפתור הוא מולקולה כי הוא מכיל שני אטומים שדה + כפתור.
טופס זה אורגניזם, header זה אורגניזם.
אטום -> מולקולה -> אורגניזם -> תבנית -> עמוד.
