התאמת אתר למובייל
במאמרים הקודמים כתבנו, כמה חשוב היום לבנות אתר עסקי, הן מבחינת "הפגנת נוכחות" באינטרנט (לרבות רשתות חברתיות) והן מבחינת יצירת רושם על לקוחות פוטנציאליים וחדשים.
במאמר זה, נסביר על חשיבות התאמת האתר העסקי למובייל – בהנחה שהאתר הנוכחי שלכם אינו רספונסיבי. במילים אחרות: נסביר מדוע כל בעל עסק שכבר השקיע מזמנו ומכספו לבניית אתר אינטרנט, צריך להשקיע מאמצים נוספים, כדי להתאים את האתר למכשירים ניידים.
נציין, כי התאמת אתר קיים אינה דורשת בהכרח מאמץ רב מצד בעל העסק, שכן בכמה צעדים פשוטים ניתן להשיג את המטרה. עם זאת, כמובן שישנן מספר אפשרויות, החל מיצירת CSS ייעודי למובייל בלבד, פיתוח אפליקציה או בניית אתר רספונסיבי.
מדוע התאמת אתר למובייל חשובה?
אם לבעל עסק מסוים כבר יש אתר, שעונה על הקריטריונים הנדרשים לאתר עסקי (כלומר, מציג את העסק בהתאם למיתוג הרצוי), מדוע עליו להתאמץ, כדי להתאים את האתר למובייל? התשובה פשוטה: מכיוון שרובנו גולשים דרך המובייל. אנו עושים זאת בזמן העבודה, בלימודים, בבית-קפה, אצל חברים, במכולת, בתור לקופת-החולים ועוד. התרגלנו להיות אונליין במשך כל שעות היממה. עצם העובדה שאנו לא יושבים מול המחשב במשרד או בבית, אינה מהווה מבחינתנו מכשול, בצורך לאתר מידע דרך המכשיר הנייד.
נשאלת השאלה: מדוע אתר אינטרנט, שנראה יפה ונוח לשימוש דרך הלפטופ, לא יעבוד באופן מושלם גם במכשיר סלולרי? התשובה היא: בשל הגדרות התצוגה השונות. מסכי הסלולר קטנים משמעותית ממסכי המחשבים. על מסכי הסלולר, ייתכן שתמונות לא יופיעו במלואן, התצוגה הראשית תופיע רק בחלקה ובמקרה הגרוע ביותר – יופיע שטח "מת", לבן וריק, בין גבולות העמוד לתחילת הטקסט. הגולש לא יבין, שעליו לגלול הצידה כדי "למצוא" את התוכן. גם אם תצוגת העמוד הראשי תופיע במלואה, היא תהיה מוקטנת. הגולש יאלץ להתאמץ ולהגדיל את המסך, כדי לקרוא את הטקסטים הזעירים.
היום, בעידן התחרותי שלנו, כבר לא ניתן לצאת מנקודת הנחה, ש"לא נורא אם הלקוחות יאלצו להתאמץ כדי לגלוש באתר דרך הסלולר." בעל עסק צריך לעשות כל מה שביכולתו, כדי "להנגיש" את המידע החשוב באתר. נפרט: יש להתאים את גודל התמונות לתצוגה בסלולר, יש להציג את הקטגוריות בסרגל הניווט כרשימה ולא ככפתורים נפרדים ועוד.
בעלי אתרים רבים מבינים את חשיבות התאמת האתר למובייל (גם אם בסופו של דבר, הגרסאות הסלולריות נראות דומות למדי). ראו לדוגמא את האתר של וויקיפדיה. על מסך המחשב, הקטגוריות השונות של הערך המבוקש מופיעות בצד ימין (בעברית). לעומת זאת, על מסך המובייל, מופיעות הקטגוריות – כרשימה. כך או כך – כל המידע מופיע.
התאמת אתרים לנייד – איך עושים זאת?
באמצעות שינוי כמה מההגדרות של קוד ה-HTML, ניתן להפוך את האתר הקיים לידידותי יותר למכשירים סלולריים. להלן, נפרט כמה מהאפשרויות:
- טופס מילוי פרטים – אם באתר שלכם מופיע טופס מילוי פרטים, מומלץ לכבות את ה- Autocorrect ולהפעיל במקומו Auto-capitalize. כלומר, לבטל את מילון התיקון האוטומטי ובמקומו לבצע רישום אותיות ראשיות אוטומטי. הסיבה לכך היא נוחות גרידא. ה- Autocorrect לא מיודע לגביי כל האפשרויות השמיות והמשתמשים ייאלצו למחוק ולרשום מחדש את השם שלהם כמה פעמים, רק מכיוון שהמילון משער כי הם מנסים לכתוב מילה אחרת. בנוסף, אם מילוי הפרטים הינו באנגלית, מיותר לחפש את ה-CapsL בתחילת כיתוב בTab חדש.
- מבנה עמוד מותאם מובייל – אם מבנה האתר שלכם הוא Adaptive/Boxed (כלומר, מבנה עם שוליים), יש להתאימו, כך שיהיה ידידותי למובייל. פתחו את האתר שלכם במסך מחשב והגדירו את רוחב העמוד למינימום האפשרי. לאחר מכן, הפכו את הרוחב הנוכחי לברירת מחדל, על ידי הוספת ה- Meta Tag הבא:< meta name=viewport content='width=700' >
פקודה זו תהפוך את מבנה העמוד לנוח לתצוגה, גם במסכי מחשב וגם במסכי סלולר. לא יופיע "שטח מת" בשוליים. אם האתר שלכם כבר בנוי על בסיס Fluid Percentages – שחקו עם הגדרות הרוחב, עד שתמצאו את המידה המתאימה.
- הגדירו תצוגת תמונות ל-100% – לאחר ששיניתם את הגדרות רוחב העמוד, חלק מהתמונות באתר יהיו רחבות מדי עבור מסך המובייל. כדי לתקן זאת, הגדירו את רוחב התמונות ל-100%, כך שיתאימו את עצמן באופן אוטומטי לגודל המסך, שעליו הן מוצגות.אם חלק מהתמונות באתר מוגדרות כתמונות רקע ולא כ-Img, פשוט שנו את ה-Background-Size ל-Contain. לאחר הקטנת התמונות, ייתכן שהן יהפכו לכהות יותר. כדי להתמודד עם כך, הגדירו בקוד ה-CSS כי ניתן יהיה להקטין ולהגדיל את המסך. בצורה זו, בהגדלת התמונה, הבהירות תתאזן.
וודאו שה-Meta tag הבא אינו מופיע בקוד: 'user-scalable=no'.
- הגדירו Input Fields ל-100% תצוגה – כדי ששדות הקלט לא יתפרשו מעבר לרוחב המסך, הגדירו אותם למקסימום, כפי שעשיתם בתמונות. כך, שדות הקלט יתאימו את עצמם למסך, שעליו מוצג האתר.
- הגדירו מאפיינים למובייל בלבד – שימו לב: כאשר אתם משנים מאפיינים ויזואליים מסוימים בהגדרות ה-CSS, הנכם מגדירים כי הם יחולו אך ורק על מסכי הסלולר. כן, הדבר אפשרי. הגדירו כי פקודה מסוימת תוחל רק במסכים הקטנים מ-500 פיקסלים. כך לא ייווצר מצב, שבו התוכן באתר יוקטן יתר על המידה, כאשר הוא יוצג על מסך מחשב. לדוגמא:@media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */ }
- הימנעו מהגדרת מצב "Fixed" – כאשר ה-Header או ה-Sidebar מוגדרים כ-Fixed, המשמעות היא שהכותרת העליונה או סרגל הכלים בצד, יגדלו או יוקטנו בהתאם, כאשר נעשה "זום-אין" או "זום-אאוט". האם הדבר קריטי? בהחלט לא סוף העולם, אך לא הייתם רוצים שכך יוצג האתר שלכם בסלולר, במיוחד לאור העובדה, שאתרים רבים מותאמים לתצוגת מובייל ומציגים את האתר שלכם באור מיושן. אתר שיש להגדילו דרך הסלולר נראה מגוחך ולא תורם למוניטין העסק שלכם.לכן, מומלץ לשנות את הגדרת ה-Fixed ב-CSS ל-Static ולהחיל פקודה זו, רק על מסכים קטנים מ-500 פיקסלים (כפי שמוסבר בסעיף הקודם).
זה הכל?
לא. ישנם פיצ'רים רבים שניתן לקבוע בהגדרות ה-CSS, לצורך שיפור תצוגת האתר במובייל. במאמר שקראתם, פירטנו על חלק קטן מהם.
לסיום: בעזרת שינוי כמה מההגדרות המופיעות בקוד, ניתן להתאים את האתר העסקי הנוכחי לתצוגה נוחה יותר, דרך המובייל. כל זאת – מבלי לבנות אתר רספונסיבי, אתר המיועד למובייל בלבד או אפליקציה.
יצוין שרוב האתרים הפופולריים (כדוגמת גוגל, גוגל "טרנסלייט", וואלה ועוד) מחזיקים "גם וגם".
חלק מהאתרים הפופולריים אף מבקשים מהמשתמשים להוריד את האפליקציה הרלוונטית, במקום לגלוש דרך דפדפן האינטרנט של הסמארטפון. למרות זאת, אפליקציה אינה מונעת את הצורך של התאמת תצוגת האתר למכשירים בעלי צג קטן מזה של מסך מחשב.
למרות פשטות התהליך, מומלץ להיעזר באיש מקצוע (אלא אם כן, אתם שולטים בקוד HTML על בוריו), כדי להבטיח את הצלחת התהליך.
אנו מקווים שהמאמר שקראתם יועיל לכם. במאמרים הבאים, נפרט גם על בניית אפליקציה לעסק.
(כתבה מומלצת נוספת: האתר שלכם אינו מותאם לסלולר? התאמת אתרים למובייל היא הכרחית!)
ליעוץ מקצועי והצעות מחיר, פנו אלינו, אביב עיצוב אתרים.
