עיצוב Mobile-First מוסבר - למה מתחילים מהמסך הקטן

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

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

מה זה בעצם אומר בפועל

בגישת Mobile-First, ה-CSS הבסיסי (בלי media query בכלל) מיועד לטלפון. משם, משתמשים ב-min-width כדי להוסיף שינויים ככל שהמסך גדל:

.card {
  display: block;
}

@media (min-width: 768px) {
  .card {
    display: flex;
  }
}

זה הפוך מהגישה הישנה של Desktop-First, שם הבסיס הוא למסך גדול ומשתמשים ב-max-width כדי "לכווץ" לטלפון. שתי הגישות עובדות טכנית, אבל Mobile-First חוסכת קוד מיותר ומכריחה אתכם לחשוב נכון מההתחלה.

למה זה חשוב יותר ממה שחושבים

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

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

אלמנטים שצריך לחשוב עליהם מחדש

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

תג ה-viewport שבלעדיו כלום לא עובד

אחת הטעויות הנפוצות של מתחילים היא לשכוח את תג ה-viewport ב-head של הדף:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

איך בודקים שזה באמת עובד

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

מאיפה מתחילים ללמוד את זה נכון

Mobile-First הוא רק חלק אחד מהתמונה הרחבה יותר של פיתוח פרונטאנד מודרני. אם אתם רוצים ללמוד את זה יחד עם CSS, JavaScript ובניית ממשקים אמיתיים מאפס, יש לנו קורס צד לקוח מלא ובחינם שמלמד את כל היסודות בצורה מסודרת.

לסיכום

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

יש לכם שאלות על CSS, media queries או עיצוב responsive? בואו לדבר על זה בקהילה.

הצטרפו לקהילה בדיסקורד