עיצוב Mobile-First בגובה העיניים (למה האתר חייב לעבוד מצוין בנייד קודם)

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

מה עיצוב mobile-first באמת אומר

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

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

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

למה האתר חייב לעבוד מצוין בנייד קודם

שני כוחות הופכים את זה לחובה: המבקרים וגוגל.

רוב התנועה מגיעה מטלפון

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

גוגל מדרג את גרסת הנייד של האתר

גוגל משתמש במה שהוא מכנה mobile-first indexing - כלומר בוחן בעיקר את גרסת הנייד של הדף כדי לקבוע את הדירוג, גם בתוצאות חיפוש בדסקטופ. אם אתר הנייד איטי, שבור או מקוצץ, הדירוג נפגע בכל מקום. אתר שעובד נהדר בטלפונים הוא לא רק נוח יותר למבקרים - זה גם מה שמנועי חיפוש מתגמלים. החפיפה הזו היא הסיבה ש-mobile-first יושב בלב SEO לעסקים קטנים.

Desktop-first מול mobile-first במבט חטוף

איך לעצב mobile-first בפועל

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

מתחילים ב-360 פיקסל רוחב

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

מובילים עם פעולת מפתח אחת

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

מסדרים בעמודה אחת

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

ואז משדרגים כלפי מעלה

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

בודקים על טלפון אמיתי

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

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

מהירות היא חלק מ-mobile-first

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

מאיפה להתחיל עם האתר שלכם

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

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