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