עיצוב רספונסיבי הוא עיצוב שמתאים עצמו [אוטומטית] למסך ממנו נכנסים הגולשים. האדיטור X החדשני של וויקס הוא כזה, אבל ... גם כאן נדרשת לעיתים התאמה ידנית.
התאמת האתר למובייל
למה חשוב שהעיצוב שלנו יהיה רספונסיבי?
ראשית – כי אנחנו לעולם לא נדע באיזה מכשיר משתמש הגולש שלנו. רובם הגדול [כ-66% מסך הגולשים ברשת, נכון ל-2020] משתמשים באלפי מכשירי סמארטפונים שונים ומשונים, בעלי מסכים מגוונים ולא סטנדרטים בעליל, [שמידותיהם נעים בין 4 ל– 8 אינץ'].
שנית – מנועי החיפוש ברשת, ובראשם – גוגל, מייחסים חשיבות יתר להתאמה [ידידותית] של האתר למובייל, [שמעניקה חוויית שירות מיטבית לגולשים באשר הם], ו"מדרגים" אותו כאיכותי יותר.
במילים אחרות
מנועי החיפוש החליטו לתעדף את העיצוב הידידותי למובייל, כיוון שתעבורת האינטרנט כוללת קרוב ל-70% גולשים מניידים.
כלומר: רב המשתמשים שלנו מבצעים פעולות בנייד.
השימוש הנרחב בניידים, אינו מפתיע. הטלפונים שלנו כבר מזמן הפכו חלק מרכזי ומשמעותי בחיינו. הם מזהים אותנו. את המיקום בו אנו נמצאים. כומסים בחובם את הסיסמאות, חשבונות הבנק שלנו והסודות של חיינו. הם מצלמים עבורנו, מתקשרים ומקליטים. הם מנגנים ורוטטים לנו. ובעצם - מאפשרים לנו לעשות [ללא דיחוי] ככל העולה על רוחנו - החל מלימודים, משחקים, שעשועונים, שמיעת פודקסטים, הקלטת תוכניות, צפיה בסרטונים, המשך במציאת אהבה, חברים, תחביבים, מוצרים ושירותים שאנחנו כמהים להם, ועד לביצוע תשלומים, ובתוך כל זה - הם דואגים לעדכן אותנו און-ליין בכל מה שקורה בעולם וסביבנו בכל רגע נתון.
אלא שלדאבון הלב -
לא כל הרכיבים באתר פועלים היטב במסכים קטנים, וכאן אנחנו נכנסים לעבודה.
1. בראש ובראשונה -
העיצוב במובייל חייב להתחשב באיפיון המרחב - ברוחב [הצר] של המסך, ובהרגלי הגלישה של המשתמשים.
כלומר: הפריסה של האלמנטים והטקסט לא תהיה רוחבית, אלא אורכית. מתוך הבנה והתחשבות בכך שמשתמשי הסמארטפונים גוללים את העמוד מלמעלה למטה [ו... גם ההיפך].
2. האלמנטים המוצגים באתר -
חייבים להיות פלקסביליים. כלומר: כאלה המאפשרים להגדיל ולהקטין אותם בעזרת האצבעות.
3. טקסטים במובייל -
א. הטקסטים באתר יהיו מאווררים ככל האפשר, ולא צפופים. נשמור על רווחים נעימים וסבירים בין האלמנטים השונים בעמוד.
ב. את המסרים המהותיים והחשובים ביותר נמקם בחלק העליון של הקנבס, כדי שלא יחמקו מעיני הגולשים.
ג. הפונטים בהם נשתמש יהיו פונטים מרובעים, לא מעוטרים ולא עגולים, בגודל סביר של 14 – 17 פיקסל.
ד. נוסיף כותרות ברורות ונחלק לפסקאות, כדי להקל על הקריאה.
4. שימוש בכלי המובייל -
השימוש באלה מקצר את הדרך לגולשים ממכשירי הסמארטפון שלהם, ומשפר מאד את חוויית המשתמשים.
א. תפריט ההמבורגר – מקצר משמעותית את הדרך לגולשים, והופך אותה לנגישה עבורם.
ב. שימוש בפאנל ה- Action Bar הופך את הקשר איתנו קל, נגיש ומאד ברור לגולשים.
ג. שימוש ב-Welcome screen – החביב, מרתק אליו את הגולש, עד שאינו "חש" בזבוז זמן בעת שהדפדפן מעלה את האתר.
ד. שימוש בכפתור Back to top - מסייע לגולשים לגלול ולמצוא את דרכם במהירות ובבטחה לראש העמוד.
5. גלילה מתמשכת -
נעדיף שהאלמנטים השונים [מוצרי חנות, בלוג, תיק עבודות, סל שירותים וכד'] יעלו בגלילה מתמשכת [Infinite loading]. כלומר: בכל גלילה יעלה הדפדפן רק מספר מצומצם של אלמנטים [3 פוסטים, 4 מוצרים, וכן הלאה], כדי "להקליל" את טעינת העמוד.
6. שימוש בצבע -
נמעיט את השימוש בצבעים בטקסטים, וברקע של האתר.
האתר בנייד חייב להיות נקי וסולידי ככל האפשר, כדי לא להסיח את דעתם של הגולשים.
7. נאפשר שימוש בנווט קולי באתר
איך עושים את זה?
היופי בזה הוא שאנחנו לא צריכים לעשות יותר מדי, רק להקפיד על:
ביצוע אופטימיזציה לאתר.
שימוש בביטויים "טבעיים" עם זנב ארוך [הוספת בלוג, שאלות ותשובות, עמוד שירותים מפורט, תיאורי מוצר מפורטים לחנות, מיקום העסק, שעות הפעילות, אמצעי התקשורת וכד'].
הטמעת סכימה בעמודי האתר.
8. מהירות הטעינה בנייד -
היא עקב אכילס באתרים, גוגל אגב "מתחשב" בכך בדירוג האתר, אבל ... הגולשים שלנו, לדאבון הלב, אינם נוטים להתחשב בכך.
אפשר להתגבר על בעיית המהירות [יותר נכון – האיטיות] באמצעות ה-Welcome screen, כאמור. אבל לא רק.
כדי להקל על מהירות הטעינה - מוכרחים להסיר את האלמנטים המכבידים, ולדלל [ככל האפשר] את הצגתם במובייל. למשל – סרטונים, אנימציות ותמונות.
רצוי להשתמש בעמודים דינמיים להצגת תמונות וסרטונים.
אבל לא רק אנימציות - גם טפסים ובאנרים - כדאי להמנע מאלה בניידים ככל האפשר.
בעניין הטפסים – כדאי להקפיד על שדות קצרים, ובעיקר נוחים למילוי [רוחב השדה 42 פיקסל ואורך של כ-180 פיקסל לפחות] חייב להתחשב, בהעדר עכבר, וב"אצבע השמנה" של הגולשים.
כדאי להשאיר במובייל רק טופס הרשמה לדיוור [בעל שדה או שניים], וטופס יצירת קשר.
את התמונות כדאי לעלות בפורמט WebP – ניתן לקנוורט תמונות באתר הזה בחינם.
9. שימוש ב-Hover -
כדאי להסיר אלמנטים שעושים שימוש ב-Hover, כיוון שלאלה אין שום משמעות במובייל [באין לנו עכבר].
10. שימוש בכפתורים -
שימוש בכפתורים ובאלמנטים קליקביליים גדולים, המותאמים ל"אצבע השמנה" של בני האדם – כפתורי הקלקה ברוחב של 42 פיקסל מינימום ואורך של לא פחות מ- 160 פיקסל.
11. קוד ותוספים -
כדאי לשקול הסתרה של קבצי קוד ותוספים למיניהם במובייל.
לסיום -
כדאי מאד לבדוק אם האתר שלנו מותאם למובייל, באמצעות כלי הבדיקה של גוגל כאן.
בהצלחה רבה