התאמת האתר לטלפונים ניידים ומסכים בגדלים שונים מנקודת מבטו של מקדם אתרים. למה זה טוב ובאיזו אופציה של התאמה לבחור? איך לבנות אתר מותאם בצורה נכונה?
למה צריך אתר מותאם?
להלן שתי עובדות הכי חשובות שמסכמות בגדול מדוע צריך להתאים את האתר למכשירים הניידים וגדלים שונים של מסכים:
- חווית הגלישה של המשתמש (הלקוח הפוטנציאלי) באתרים שמותאמים למסכים בגדלים שונים טובה יותר. נוח יותר לנווט באתר המותאם, קל יותר לקרוא את המידע המוצג וליצור קשר דרך האתר, דבר שמוריד באופן משמעותי את אחוז הגולשים שעוזבים את האתר, מעלה את זמן השהיה בו ומגביר את מספר הפניות או הלידים שמתקבלים מהאתר – מאוד משמעותי לתחום המכירות.
- גוגל כבר די מזמן הודיעה שבכוונתה בעתיד לדרג אתרים מותאמים גבוה יותר בתוצאות החיפוש במכשירים הניידים. אין עדיין עדויות חד משמעיות לגבי הביצוע של ההצהרה הזאת בפועל, ואילו די ברור שזאת הכוונתה וזה יקרה במוקדם או במאוחר.
בכל מקרה, די ברור שחווית המשתמש חייבת להיות הטובה ביותר בכל גודל מסך.
אתר ריספונסיבי או גרסת מוביל?
לפני מספר ימים קיבלתי מייל מלקוחה שלי שמעלה שאלה לגבי התאמת האתר למכשירים הניידים. בין החששות שלה היו הטיעונים הבאים. היא שמעה שיש עכשיו מגמת צמצום התוכן בגרסה הסלולרית במטרה להשאיר רק את הדברים החשובים ולהעיף את כל השאר. רוב החברות לטענתה הולכות לקראת בניית גירסת מובייל חדשה במקום גרסה ריספונסיבית של האתר.
אז דבר ראשון נתייחס בקצרה לשתי הגישות העיקריות בנושא התאמה לניידים (גרסת מובייל מול אתר ריספונסיבי) שהוויכוח ביניהן הוא לא חדש. לכל אחת מהן יש יתרונות וחסרונות.
- אתר מובייל הוא למעשה אתר נוסף, מיני גרסה של האתר המקורי. כאשר גולשים בסמארטפונים נכנסים אל האתר שלך המערכת מזהה באופן אוטומטי שהגלישה מתבצעת בטלפון נייד ומפנה את הגולש לאתר מובייל במקום לאתר המקורי. לרוב אתרי מובייל אינם מציגים את כל התכנים הקיימים באתר המקורי אלא רק את האלמנטים העיקריים החשובים ביותר לבעל האתר, מה שהופך את הבניה שלהם לקלה ומהירה.
- אתר ריספונסיבי הוא אתר שמתאים את עצמו אוטומטית בצורה חכמה למסכים בגדלים שונים, למעשה אתר גמיש שאפשר לצפות בו בנוחות בכל מכשיר ובכל רזולוציה. במקרה הזה אין פיצול לשני אתרים (אתר למחשב ואתר מובייל). מדובר באותו האתר עם אותם העמודים ואותו התוכן, רק שהתוכן מסתדר על פני המסך באופן שונה בהתאם לגודלו. בגדלים מסוימים של מסכים ניתן להעלים אלמנטים שונים באתר הריספונסיבי בהתאם לצורך, לשנות את סדר הצגתם או להוסיף אלמנטים ופונקציות.
מנקודת מבטו של מקדם האתר שעוסק בקידומו האורגני בגוגל או מנועי חיפוש אחרים, היתרון המכריע של האתרים הריספונסיביים הוא בכך שהם מאפשרים גישה לכל תוכן האתר ולכל העמודים – הדבר החשוב ביותר לקידום האורגני. גרסאות מובייל הקלות והמצומצמות עלולות לאבד מיקומים בחיפוש בניידים בגלל התוכן הדל שהן מציגות. כמו-כן לעתים קרובות האתר המקורי כולל הרבה מאוד מידע שימושי וחשוב, שאנשים מחפשים אך אינם יכולים להגיע אליו דרך גרסת המובייל.
גרסת המובייל היא לכאורה קלה יותר לבניה, כי לוקחים רק את מה שחשוב ובונים מזה אתר נוסף קטן בחשיבה רק על הניידים. פתרון זה מומלץ בדרך כלל לאתרים גדולים מאוד, מסורבלים ועמוסים, שעבודת ההתאמה שלהם מסובכת ביותר עקב ריבוי העמודים ואי אחידות של המבנה, חשש שמהירותם לא תהיה מספיק טובה וכו’.
כללי אצבע למבנה אתר ריספונסיבי
זה מאוד דומה לעולם האמתי. דמיינו שאתם צריכים לקנות נעלי ספורט. לפניכם רחוב מלא חנויות מכל מיני סוגים. יש חנויות שמוכרות רק נעלי ספורט ויש חנויות כלבו שמציעות כל מיני סוגים של הלבשה לגברים, נשים וגם ילדים, ויש להם גם נעליים. אתם צועדים ברגל ברחוב, נכנסים אל תוך החנויות ומחפשים במידת הצורך בפנים את המחלקה הרלוונטית של נעלי הספורט. יש לכם את הזמן ואתם מוכנים לבקר בהרבה חנויות כדי למצוא את הנעליים מהסוג שאתם אוהבים וגם במחיר טוב.
ועכשיו אותה הסיטואציה, רק במקום ללכת ברחוב ברגל אתם נוסעים בו במכונית. יש לכם רק כ-20 דקות כדי לקנות נעליים. אתם בוחנים את חלונות הראווה של החנויות תוך כדי נסיעה, עוצרים ונכנסים לחנות שהציגה נעלי ספורט בוויטרינה.
הנסיעה באוטו מדמה את הגלישה בטלפונים הניידים. לגולש יש מעט מאוד זמן וסבלנות לחפש באתר, הוא מסתכל רק ב”חלון הראווה” ולא רואה את ה”מחלקות” שבפנים. המטרה שלכם לשים בחלון הראווה את המוצרים החשובים ביותר שיגרמו לו לעצות את האוטו ולהיכנס לחנות.
למסך של הטלפון הנייד מקום מאוד מוגבל וצריך לחשוב טוב טוב איך לסדר את התוכן על גביו בצורה הנכונה ויעילה, להבין לעומק את התנהגות הגולשים ולענות על צורכיהם.
על מה אפשר לוותר
- באנר עליון של תמונה גדולה – תופס המון מקום (יכול להיות חצי מסך) וממלא תפקיד חווייתי ולא אינפורמטיבי. לרוב ניתן לוותר על התמונה בצפיה בטלפונים חכמים ולהשאיר לוגו קטן למיתוג בלבד.
- התפריט העליון – לרוב מעלימים את התפריט העליון בצפייה במכשירים הניידים כיוון שהוא מתכווץ והופך ללא קריא. במקום נהוג ליצור תפריט מיוחד לטלפונים ניידים.
- תפריט ימני/שמאלי – חייב לרדת כדי לאפשר הצגת תוכן האתר בכל רוחב המסך
- תפריט תחתון – אתרים רבים אינם מציגים את התפריט התחתון המפורט בצפייה בטלפונים חכמים. או שלא מראים אותו בכלל, או שמראים רק עמודי קטגוריה עיקריים. יחד עם זאת יש חשיבות להצגת התפריט התחתון המפורט כיוון שהוא יכול לסיעה לגולש להגיע לעמודים הפנימיים של האתר שאולי כוללים תוכן חשוב עבורו. בכל אופן צריך לבדוק איך להציג אותו בצורה אסתטית ולא מעמיסה יתר על המידה בסלולריים.
מה מאוד חשוב להראות
- על תוותרו על התוכן – אין שום סיבה שהגולשים בטלפונים הניידים לא יוכלו להגיע לכל עמודי האתר ולכל התכנים. אם לא תאפשרו – יש מצב שתפסידו תנועה אורגנית ואף מיקומים בגוגל.
- יצירת קשר – לגולשים בניידים אין זמן וסבלנות לחפש איך ליצור איתכם קשר, זוכרים את הנסיעה באוטו? אלמנט ויזואלי וברור של “צור קשר”, “הזמן עכשיו”, “פנה ליעוץ” וכדומה חייב להיות גלוי לעין בכל העמודים כמה שאפשר יותר גבוה. אפשר להציג אותו גם בחלק עליון וגם בחלק התחתון של העמודים ו אפשר לעשות אותו “דביק” – שלא ייגלל יחד עם תוכן האתר, אלא יישאר תמיד במקום קבוע. זהו הדבר החשוב ביותר להגברת אחוזי הפניות דרך האתר.
- תפריט ניווט – תעזרו ללקוחות שלכם למצוא את מה שהם צריכים. בצפייה בסלולר נהוג לעשות תפריט מיוחד שנפתח בלחיצה על אייקון המופיע על גבי הפס האפור בחלק העליון של המסך. פס זה איננו נגלל למטה יחד עם תוכן האתר וניתן להגיע לתפריט בכל עמוד ומכל מצב צפייה באתר.
- מוצרים/שירותים מובילים – בחלק העליון של העמודים הציגו את המוצרים או השרותים המובילים שחשוב לכם למכור או שאתם מצטיינים בהם. טעות נפוצה – להראות קודם “אודות” ואחר כך לכתוב על המוצרים. הגולשים רוצים למצוא מהר את מה שהם צריכים ואין להם סבלנות לקרוא את סיפור חייכם.
זהו על קצה המזלג. כמובן כל אתר והסיפור שלו, מלאכת מחשבת עם ההגבלות והשאיפות שאופייניות לעסק הספציפי.