איך מעצבים אתר וויקס במובייל? ולמה זה כל כך חשוב?
הסטטיסטיקה הזאת, שלקוחה מאחד האתרים שבניתי, מייצגת בדיוק את המציאות:
80% מהמשתמשים באתר מסוים, גולשים מהנייד. הנייד שלנו איתנו תמיד, וכבר מזמן הפך לכלי עבודה לכל דבר.
לכן ברור שכשבונים אתר, יש חשיבות עליונה לרספונסיביות שלו - התאמה למסכים שונים ובמיוחד לנייד.
האתרים של וויקס לא רספונסיביים באופן אוטומטי, ולכן אחרי שבונים אתר בגירסת הדסקטופ שלו, ממש ממש חשוב לעדכן ולהתאים אותו גם בתצוגת המובייל.
במאמר אתן כמה טיפים לעריכה ובנייה נכונה של האתר בגירסת המובייל שלו.
ראשית, כדי לגשת אל עריכת האתר בנייד נבחר באפשרות Switch to Mobile, שנמצאת בחלק העליון השמאלי של המסך.
החלפתם לגירסת המובייל וחשכו עיניכם? יש מה לעשות!
1. הדבר הכי חשוב הוא להתחיל דווקא מבנייה נכונה של גירסת הדסקטופ. עבודה עם סטריפים, שמירה על הכנסת כל הטקסטים והאלמנטים בתוך ה gridlines של הסטריפ (קווים מקווקים על גבי הסטריפ), עבודה עם רפיטרים - כל אלו יהפכו את נראות האתר במובייל לטובה יותר ויחסכו לכם עבודה.
2. ועדיין, אין מנוס מלעבור עמוד עמוד באתר ולשנות את מה שצריך: גודל פונטים, מיקום תמונות וכו'
3. אפשר להוריד אלמנטים בנייד, וזה לא ישפיע בגירסת הדסקטופ - לפעמים יש אלמנטים שבנייד נראים פחות טוב או מעמיסים, ועדיף פשוט להסתיר אותם - לעמוד על האלמנט וללחוץ על delete. אם אתם מתחרטים ורוצים להחזיר את האלמנט, בחרו באפשרות הזו של Hidden on Mobile:
אגב, אולי תמצאו שם אלמנטים שהעורך בחר להסתיר אותם בלי שנגעתם, ותרצו להחזיר.
4. יש גם מצבים הפוכים: לפעמים תרצו דווקא להוסיף משהו רק לגירסת הנייד - זה אפשרי! לדוגמא, באתר הזה שבניתי עבור סיון יתום - אדריכלית ומעצבת פנים, בגירסת הדסקטופ בעמוד הבית יש רק תמונות מתחלפות. בגירסת הנייד זה לא הספיק, והחלטנו להוסיף טקסט. איך עושים את זה? לוחצים על ה + מצד שמאל ובוחרים באלמנט שרוצים להוסיף. זה יכול להיות טקסט, תמונה, אלמנט דקורטיבי ועוד.
5. באפשרות שנקראת Mobile Tools אפשר להוסיף כמה אפשרויות נחמדות:
למשל Quick Action Bar המאפשר הוספת שורה תפריט בתחתית המסך עם אפשרות מהירה ליצירת קשר:
6. אפשר גם להוסיף Welcome Screen - מסך כניסה לאתר שאפשר לעצב ע"פ המותג שלכם - צבעים, לוגו וכו'.
יש עוד המון אפשרויות איך לשפר את הנראות של האתר בנייד. מאוד חשוב לעבור בסבלנות רבה על כל העמודים באתר, ולוודא שהכל במקום.
אחרי שהאתר באוויר, חשוב לראות אותו בכמה סוגים של טלפונים ניידים ולראות שהכל מסודר.
בהצלחה!