עיצוב ובניית אתרים רספונסיביים

מה אתם יודעים על הגולשים שמגיעים לאתר שלכם: האם הם יושבים מול מסך מחשב נייח? אוחזים ביד טאבלט? משתמשים באייפון? בסמארטפון אחר?
התשובה, ברוב המקרים, היא גם וגם וגם וגם. מאחר שאין דין מסך סלולארי (שגודלו נע ברוב המקרים בין 3.5 ל- 5.5 אינץ') כדין מסך של טאבלט (שגודלו נע סביב ה- 10 אינץ'), ושניהם שונים מהותית ממסך מחשב (שגודלו הוא לרוב 20 אינץ' ומעלה), צצה שאלה נוספת: אם כך – איך מבטיחים חווית גלישה אופטימאלית בכל מסך ומסך?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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