ווב ופרונטאנד · מתחילים

עיצוב רספונסיבי בלי כאב

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

קודם קטן

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

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

נקודות שבירה לפי תוכן

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

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

מה נשבר בפועל

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

לעומק

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