אתרי מובייל מודרניים: איך הכי נכון לבנות אותם

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

כאשר מדברים על בניית אתרים בסטנדרט של היום, קיימות כמה גישות שונות לבניית אתרים המותאמים למובייל:

1. אתר אחד שמתאים את עצמו לכל מכשיר בזמן אמת (אתר רספונסיבי).
2. אתר נפרד למובייל שיושב על כתובת אחרת (בדרך כלל סאב דומיין של הדומיין הראשי). כאן המשתמש בדרך כלל בוחר מראש לאיזה אתר הוא רוצה להיכנס.
3. אתר דינאמי שמעביר את הגולש לגרסת האתר המתאימה לו על גבי אותה הכתובת (בפועל עדיין קיימת הפרדה בין האתרים).

אתר אחד (אתר רספונסיבי)

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

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

אתר מובייל נפרד

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

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

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

אתרים דינאמיים

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

מה אומרת על זה גוגל?

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

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

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

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

בנוסף, לגוגל יש מספר דרישות נוספות מאתרי מובייל:

1. האתר חייב להיות מסומן עבור המובייל, כלומר, להתייחס לעכביש הסריקה הרלוונטי של גוגל ולהציג לו ההתאמות הדרושות בקוד
2. כל התכנים באתר צריכים להיות זמינים עבור המובייל, כולל תמונות, קבצי עיצוב (CSS) וסקריפטים של JS, ללא חסימות.
3. הימנעות הוספת תכנים שאינם נתמכים במובייל. לדוגמה, אלמנטים שעדיין עושים שימוש בפלאש. אלו לא בהכרח ימנעו מגוגל לסרוק את האתר, אבל ישפיעו לרעה על חווית השימוש.

דרכים מומלצות ליישום של אתרי מובייל

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

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

1. שימוש בתקן AMP – מדובר בתקן שמוריד מקוד המיועד למובייל חלקים לא הכרחיים ועדיין שומר על הרספונסיביות של האתר. מדובר בשיתוף פעולה של גוגל עם קבוצות פיתוח נוספות ומפתחים עצמאיים.
2. Cache – הקאש שומר חלקים מן הדף באופן מקומי וכך הופך את טעינת הדף בעתיד לפשוטה יותר. יש להבדיל בין Cache ששומר חלקים בתוך הדפדפן של המשתמש ולעיתים דורש התאמה מיוחדת ו-Cache ששומר מידע מאתרים שונים על שרת מהר אחד. למרבה המזל, כיום כרום למובייל מטפל בעצמו ב-Cache מהסוג השני אם המשתמש אישר זאת.
3. CDN – CDN יוצר גרסאות מראה של אתר ספציפי בשרתים שונים ומשתמש בשרת הקרוב ביותר למיקום הפיזי של המשתמש על מנת לשלוח לדפדפן את המידע. כיום ה-CDN נעשה קריטי מכיוון שאתרים רבים פונים לקהל במדינות שונות גם אם יש לכל קהל יעד שפה מקומית משלו. חשוב לציין שלעיתים ה-CDN הוא נפרד מחברת האחסון ולפעמיים מקבלים את שניהם בחבילה אחת.
4. טיפול בתמונות – טיפול בתמונות כולל כיווץ הממדים של התמונה, טכניקות שונות להפחתת הגודל שלה בלי לשנות את הממדים שלה או טעינת תמונות רק כשהמשתמש מגיע לחלק הרלוונטי בדף (Lazy Load). בכל מקרה, השאיפה היא שהרוב המכריע של התמונות באתר לא יעברו את ה-100KB, אלא אם כן מדובר בגרסה מוגדלת של התמונה שלא מופיעה כברירת מחדל.

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