אתר רספונסיבי? אתר מותאם? שיקולים לבחירה חכמה

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

19/03/2015

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

אז מה בכלל הבעיה?

גודל המסך והרזולוציה של מכשירים שונים כדוגמת מחשבי שולחן (Desktop), מחשבי לוח (Tablet) ומכשירי טלפון חכמים (Smart Phone) משתנה ממכשיר למכשיר, גם תכונות המכשירים שונות – חלקם מצוידים בעכבר ומקלדת וחלקם בעלי מסכי מגע (Touch Screen).

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

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

אתר רספונסיבי (Responsive), אתר מותאם, אדפטיבי – על מה מדובר?

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

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

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

יתרונות מול חסרונות

להלן טבלת השוואה החושפת את ההבדלים המרכזיים בין הגישות השונות:

נושא	אתר רספונסיבי	אתר מותאם
המרת גולשים	צרכיהם והרגלי הגלישה של גולשי המובייל למול גולשים ממחשבי שולחן שונים לעיתים באופן משמעותי אך הגישה הרספונסיבית מאפשרת הסתרה ושינוי מבנה של אלמנטים ואיננה מאפשרת מבנה שונה או	אתר מותאם מאפשר להגדיר גרסה מדויקת לצרכי הגולש שאיננה תלויה או מוגבלת בגרסה הראשית של האתר לגולשים ממחשבי שולחן. באופן זה ניתן להגדיר תכנים, פונקציונאליות, מנגנוני ניווט והתמצאות ומנגנוני הנעה לפעולה המותאמים באופן מיטבי לכל רזולוציה ולכל מכשיר ובאופן זה להשיג המרת גולשים אופטימאלית.
מיקום אורגני בגוגל	למרות שגוגל איננה חושפת את האלגוריתם שלה לקביעת דירוג האתר בתוצאות החיפוש היא בוחרת להציג בהנחיות להתאמת אתרים למובייל את הגישה הרספונסיבית ונראה כי אתרים רספונסיביים יזכו לעדיפות על פני אתרים מותאמים	בניית אתר מותאם מחייבת ביצוע הגדרות שונות ברמת הגדרות האתר וברמת Google Webmaster Tools בכדי שגוגל תבין שמדובר באתר מותאם.
ביצועים	היות ובאתר רספונסיבי נטענים כל מרכיבי העמוד בין אם הם מוצגים לגולש ובין אם לא הרי שגולשי מובייל יסבלו מביצועים נחותים לעומת אתר מותאם	באתר מותאם מוגדר בדיוק לצרכי גולשי מובייל ולכן יטענו אך ורק תכנים הנדרשים לשימוש הגולש.
משאבי אירוח	אתר רספונסיבי מאפשר אירוח של קוד אחיד לכל סוגי הגולשים ולכן גוזל פחות משאבים מסביבת האירוח	אתר מותאם הנה גרסה נפרדת של האתר ובד"כ פועלת גם ב- Sub Domain נפרד כך שמחייבת הקצאה של משאבי אירוח נוספים (למרות שהתוספת איננה משמעותית לרוב).
הקמה	הקמה של אתר רספונסיבי מהירה יותר אך מחייבת תכנון מדוקדק החל משלבי תכנון האתר, לאורך עיצוב ממשק המשתמש ולאורך שלבי הפיתוח ובדיקות הקבלה	למעשה מדובר בשני אתרים נפרדים למרות שיש ביניהם בד"כ מכנה משותף של תוכן, עיצוב ופונקציונאליות ולכן משאבי התכנון, העיצוב והפיתוח גדולים משמעותית.
תחזוקה	תחזוקת קוד אחיד תמיד קלה יותר מתחזוקה של מספר גרסאות קוד וביצוע שינויים במקום מרכזי תמיד קלה מביצוע שינויים במספר מקומות. למרות זאת כל שינוי מחייב בדיקה שלו במספר רזולוציות.	למעשה מדובר ב- 2 גרסאות קוד שונות (למרות שפיתוח נכון יעשה שימוש במקטעי קוד אחידים ובטח ברמת אחזור המידע מבסיס הנתונים). התחזוקה תתבצע בשני האתרים במקביל ובעיות שיתגלו עשויות לגרור תיקון כפול.

רספונסיבי ואדפטיבי?

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

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

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

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

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