בניית אתרי אינטרנט למובייל

On 2 Jul., 2020

בשנים האחרונות קימת מגמה גוברת והולכת למעבר לגלישה ברשת באמצעות המובייל. כיום, הגישה של "הצפת מידע" באתרים היא הרבה יותר מינימליסטית. הגולשים "התעייפו" מאתרים המוצפים במידע וסרטונים מרובים ונהנים יותר "ממינון עדין" של מדיה דיגיטלית. שילוב אפקטים שונים בזמן הגלילה באתרים עשוי לתרום לחוויית הגלישה ולהעשיר אותה. האתגר הוא שוב, המינון של האפקטים ומידת החשיבות שלהם.

בניית אתרי אינטרנט למובייל

תופעת "המובייליזציה " בבניית אתרים.

בשנים האחרונות קימת מגמה גוברת והולכת למעבר לגלישה ברשת באמצעות המובייל.

מאחר וכמעט כל אדם מחזיק "טלפון חכם" ומהירות הגלישה גדלה משמעותית , נראה כי ניתן להכריז על המובייל כאמצעי המועדף לצפייה במובייל.

כדי להמחיש את התופעה במספרים , במספר קמפיינים שקיימנו לאחרונה בגוגל אדס, נתברר כי ממוצע הצפייה באמצעות המובייל הגיע ל70%.

גם גוגל , מתייחסת כיום למהירות ולחווית המשתמש בגלישה בנייד באופן נפרד ומרכזי ומדרגת את האתר בהתאם.

המסקנה המתבקשת היא ,כי בניית אתרים למובייל היא היום הדבר האמתי.  במילים אחרות, כבר לא נכון להשתמש בביטוי "התאמת האתר למובייל" אלא "בהתאמת האתר לדסקטופ".

 

חשיבה "מחוץ לקופסה" באתר לניידים.

בניית אתרים למובייל דורשת מיומנות וחשיבה "מחוץ לקופסה".

ככלל, חשוב להתמקד בתיכנון האתר לגלישה במובייל ורק לאחר מכן להתאים אותו לגלישה בדסקטופ.

חווית הגלישה במובייל שונה לחלוטין מזו שאנו "המפתחים" התמקדו והתמקצענו בה בעבר.

גודל מסך נייד הוא בממוצע כחמישית מגודל מסך דסקטופ, הרזולוציה של התמונות והסרטונים משתנה וגודל הפונטים של התוכן אף הוא.

בנוסף, הרגליי ומהירות הגלישה בנייד השתנו בשנים האחרונות ומהווים אתגר אמיתי בבניית אתר מוצלח.

 

מינון נכון של תמונות וסרטונים באתר מובייל

בעבר היה נהוג לשלב תמונות וסרטונים רבים בעמוד הראשי ובעמודי המשנה באתר כדי להעשיר את התוכן ולהגדיל את זמן השהייה של הגולש באתר.

 כיום, הגישה היא הרבה יותר מינימליסטית. הגולשים "התעייפו" מאתרים המוצפים במידע וסרטונים מרובים ונהנים יותר "ממינון עדין" של מדיה דיגיטלית. 

חשוב שוב להזכיר את האתגר של ביצועי האתר בזמן הגלישה במובייל.  לקבצים של סרטונים יש משקל כבד מאד ולעתים קרובות זמן העלאה שלהם לאתר מעקב משמעותית את מהירות האתר, או את זמן הדפדוף בין עמודי האתר.

במידה והסרטונים כוללים תוכן חשוב ובעל ערך מוסף , רצוי לשלב אותם בדפים "שוליים" ולהדביק אותם עם כותרת ולינק בדף הראשי.

אפקטי תנועה ואינטראקטיביות במובייל.

שילוב אפקטים שונים בזמן הגלילה בדפים עשוי לתרום לחוויית הגלישה ולהעשיר אותה. 

האתגר הוא שוב, המינון של האפקטים ומידת החשיבות שלהם.

לצורך הדוגמה ,בעמוד הראשי של האתר שלי  שילבתי מספר אפקטים כדי להמחיש מסר של חדשנות וחווית גלישה ייחודית. בבדיקה של ביצועי האתר באמצעות כלי הבדיקה של גוגל, מקבל הדף הראשי שלי ציון של 96 בגוגל ו-70 בנייד.

למרות הציון הנמוך יותר בנייד, קיבלתי את ההחלטה כי הירידה בציון מצדיקה את המסר שרציתי להעביר לגולש דרך הנייד.

ההחלטה על מינון האפקטים באתר היא כאמור סובייקטיבית, אולם חשובה מאד בבניית אתרים למובייל.

בניית אתרים למובייל ואתר רספונסיבי .

אני שומע לעתים קרובות משפטים כמו  "בניית אתר רספונסיבי" ,והאמת רחוקה מאד מהמציאות.

המשמעות של רספונסיבי הוא משתנה באופן אוטומטי. זה נכון לטעון שבשימוש בפלטפורמת וורדפרס לפיתוח אתר תהיה התאמה מסוימת להצגת התוכן במכשירים שונים. אולם, ההתאמה היא חלקית בלבד ועדיין נדרשת עבודה רבה בהתאמת התוכן וחווית המשתמש בנייד.

לצורך הדוגמה, סרטון שמוצג בדסקטופ יראה אחרת לגמרי בנייד. חלק מהמידה שמופיע בסרטון בדסקטופ יעלם בזמן הצגתו בנייד, בשל מגבלות גודל המסך.

יש גם להתאים את גודל הפונטים והנראות של תוכן ומאמרים שמופיעים בנייד. באותה מידה, העיצוב של האתר, ו"הצבעוניות" שלו יראו אחרת במובייל ובדסקטופ. 

במילים אחרות, מאחר וגודל המסך בנייד קטן מאד, אנו חייבים לוודא כי התוכן שמוצג באתר ברור , איננו עמוס והגלישה בין הדפים "חלקה".

ולסיום, חווית המשתמש בנייד היא שונה והרבה יותר אינטראקטיבית. "בטלפון חכם" אנו משתמשים במסך מגע, וגוללים את המידע באמצעות האצבעות ולא עם המקלדת. 

בנוסף, אנו לוחצים על כפתורים או לינקים באתר באמצעות האצבעות. ולכן אופן פיזור המידע והצגתו על המסך צריך להיות מותאם לחויות הגלישה בנייד. 

 

לסיכום:

מפתחי אתרים צרכים לשנות ולהתאים את התפישה שלהם בפיתוח אתרים, ולשם דגש על גלישה לאתר מהנייד.

בגישה של פעם, השקענו את המאמצים בפיתוח אתר לדסקטופ ולאחר מכן ביצענו התאמות להצגתו בנייד או בטאבלט.

כיום עיקר מאמצי הפיתוח צרכים להיות מופנים ראשית להצגת האתר במובייל ,ובסוף הפיתוח לבצע התאמה להצגה בדסקטופ.

כתב:

אבי לבנטל

Read more...