™DEZIONלפני מספר חודשיים גוגל ביצעו מהלך חשוב מאוד בכל הנוגע לאתרים מותאמים לנייד (אתרים סלולריים) והחלו לדרג אותם באופן שונה כאשר מישהו גולש בגרסה הניידת של גוגל : אתרים שלא מותאמים לנייד עשויים מעתה למצוא את עצמם במקומות נמוכים יותר מאשר אתרים אשר כן מותאמים לנייד מתוך מטרה לספק לגולשים את חווית הגלישה הטובה ביותר ולדאוג לכך שהם יוכלו לגלוש בנוחות בתוצאות המובילות. זאת בניגוד למצב הקודם בו לא היה הבדל קריטי בדירוגים בין שני סוגי האתרים, למעט התווית של אתר מותאם אשר הוצמדה לאתרים שגוגל מצא כמותאמים.
בדיקות שבוצעו על ידי אנשים שמנתחים את תוצאות החיפוש של גוגל, הראו שכמעט חצי מהאתרים הלא מותאמים אכן ספגו ירידה בדירוגים, ואילו בין האתרים המתואמים, היו בסך הכול יותר עליות מאשר ירידות.
המשמעות היא שמי שרוצה שימצאו את האתר שלו גם כאשר גולשים מן הנייד, חייב להתאים אותו לנייד. אם פעם היה מדובר בפריבילגיה שהייתה נותנת עוד פלוס לאתר, היום כבר מדובר במשהו שחובה לעשות אותו כדי שהאתר ימשיך להיות רלוונטי.
מה הכוונה באתר סלולרי?
מבחינת גוגל, אתר סלולרי הוא אתר שהגודל שלו מותאם למסכים הקטנים של המכשירים הסלולאריים ושהוגדר כאתר כזה באמצעות פקודות מיוחדות. לדוגמה, אם יש טופס שצריך למלא אותו, השדות השונים בטופס צריכים להיות מספיק גדולים כדי שיהיה אפשר לגעת בהם מבלי ללחוץ בטעות על השדה הלא נכון. הם גם צריכים להיות מספיק מרווחים למטרה זו, כלומר, שהמרחק ביניהם יהיה מספיק גדול.
בנוסף לזאת, חשוב שגודל הפונט יהיה מתאים : פונט קטן מדי הופך להיות בלתי קריא על מסך קטן ואז צריך להגדיל אותו באופן ידני והשורות מתרחבות בצורה כזו שצריך לגלול את המסך ימינה ושמאלה, מה שמקשה עוד יותר על הקריאה.
לסיום, התפריטים באתרי נייד הם בדרך כלל לא תפריטים קבועים, אלא תפריטים שנפתחים מהצד, וזאת על מנת לחסוך במקום בשטח התצוגה המצומצם בלאו הכי. יש גם תפריטים "מרחפים" שאפשר לגרור ולפתוח בכל מקום במסך, למרות שאלו פחות נוחים לשימוש.
איך ממירים אתר קיים אל אתר סלולרי?
המרת אתר רגיל לאתר סלולרי היא אחת מן הבקשות הכי נפוצות אותה אנחנו מקבלים בסטודיו, ויש שתי גישות עיקריות להתמודד איתה :
1.בניית אתר נפרד – בשיטה זו לוקחים את האתר הקיים ובונים לו גרסה נפרדת לנייד. שיטה זו עדיפה כאשר האתר הקיים מורכב מאוד ולכן קשה יותר להמיר אותו כפי שהוא. לדוגמה, אם יש חלקים שלמים באתר שאינם רלוונטיים לנייד. כך בעצם אפשר לתכנן אתר חדש מן הייסוד מבלי לדאוג למגבלות של האתר הקיים. החיסרון של שיטה זו הוא שיש צורך לתכנן בנפרד גם מנגנון שיעדכן את שני האתרים בו זמנית (לרוב הם משתמשים באותו מסד נתונים).
2.בניית אתר רספונסיבי – כאן כבר מדובר באתר אחד שמזהה את המכשיר שעליו הוא רץ ומתאים את עצמו אליו, בין אם מדובר במחשב רגיל (מחשב Desktop), טאבלט או מכשיר נייד. זוהי השיטה המועדפת מכיוון שהיא מאפשרת לעדכן את האתר פעם אחת בלבד ולראות את השינויים מתבצעים בכל הגרסאות השונות שלו בו זמנית. מצד שני, המרת אתר קיים לאתר רספונסיבי עלולה להיות מורכבת יחסית במקרים מסוימים.
בשל ההבדלים בין שתי השיטות, לרוב כאשר מתכננים אתר חדש ומתאימים אותו לנייד מלכתחילה, עושים זאת בשיטה הרספונסיבית מכיוון שאין שום מבנה קיים שצריך להיצמד אליו וחופש הפעולה הוא מוחלט.
בנוסף, אם בעבר בניית אתר נייד או אתר רספונסיבי הייתה משימה מאתגרת שרק מעטים היו יכולים לבצע אותה כמו שצריך, היום יש סביבות פיתוח נוחות מאוד שהופכות את המלאכה להרבה יותר פשוטה, כך שגם מי שיש לו ידע סביר בבניית אתרים, יכול לבצע אותה. אחת מסביבות הפיתוח הפופולאריות ביותר כיום נקראת בשם Bootstrap והיא מיועדת בעיקר עבור אתרים שנבנים מלכתחילה עבור הנייד, כלומר, אתרים רספונסיבים.
דוגמאות לאתרים ידידותיים לנייד שפיתחנו בסטודיו
(לחצו על התמונות לגודל מלא)
אתר דן גורמה : אתר רספונסיבי של דן לרשת בתי הספר ללימוד בישול שלהם (בשיתוף עם אורט) – כמו שאפשר לראות, כאשר גולשים לאתר ממכשיר נייד, הוא מתאים את עצמו לרוחב של המכשיר, כך שהפריטים השונים במסך מופיעים אחד מתחת לשני ולא בהכרח אחד לצד השני כמו בגרסה הרגילה. גם התפריט של האתר הופך לתפריט נפתח עליון במקום תפריט אופקי.
BawaKawa – אתר סלולארי נפרד לחנות אופנה מקוונת – כמו שאפשר לראות, האתר נראה שונה למדי בגרסה הרגילה והגרסה הניידת : לדוגמה, באתר הנייד אין גלריית תמונות מאינסטגרם ומהבלוג, אלא רק קישור לחשבון האינסטגרם של האתר על מנת לחסוך ברוחב פס.
אתר מכירות לחברת התיירות בליק – אתר סלולארי נפרד, דף הבית של האתר הנייד למעשה בנוי מתפריט גדול שכל לחיצה עליו מפנה אל הדף הרלוונטי.
רשת מלונות דן – גרסת נייד נפרדת נמצאת בשלבי הקמה. האתר הנייד בנוי מגלריית תמונות ומתחתיה תפריט גדול שכל פריט בו מפנה אל הדף הרלוונטי שיכול להיות טופס או דף מידע לפני מכירה.
