אתר רספונסיבי או אדפטיבי? דקויות שכדאי להכיר

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

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

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

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

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

העקרונות הבסיסיים של עיצוב רספונסיבי:

• עיצוב דינמי המשתנה בצורה רציפה.
• קביעה מראש של ערכי אורך ורוחב – מינימום ומקסימום.
• יחידות עוגן יחסיות ולא אבסולוטיות (Relative / Static Units – אחוזים במקום פיקסלים).
• נקודות שבירה (Breakpoints) המחלקות את התוכן לכמות משתנה של עמודות.
• שימוש בקונטיינרים (Nested Objects) כדי להזיז קבוצת אובייקטים שלמה בו-זמנית.
• עדיפות לעיצוב מותאם-מובייל ורק לאחר מכן לעיצוב מותאם-דסקטופ.
• שימוש מושכל בתמונות רגילות ו/או וקטוריות, בהתאם לצורך.

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

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

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

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

• הקמת גרסאות מובייל על כתובות URL שונות או נפרדות לגמרי. במצב זה גם כתובות ה-URL שונות וגם התוכן והקוד שונים. גם פה, במידה שהאתר עובר תהליך של SEO, יש לתייג כל עמוד דסקטופ באמצעות תגית rel=alternate וכל עמוד מובייל מקביל באמצעות תגית rel=canonical.