ללא ספק, הדבר החם הנוכחי בעולם עיצוב האתרים הוא עיצוב רספונסיבי, מגיב (Responsive Design). אתר רספונסיבי משמעו אתר המשנה את העיצוב שלו בהתאם לרזולוציית המסך של הגולש. המשמעות הוא לא קריטית במעבר ממסך 19 אינץ' ל 24 אינץ', אלא מתייחסת בעיקר לריבוי אמצעי הגלישה בעלי רזולוציות שונות ומיוחדות כגון סמארטפונים, טאבלטים בגדלים שונים, מחשבי Note ועוד. כל אלו יוצרים לנו מנעד רחב (אפילו רחב מדי) של אפשרויות תצוגה לאתר שלנו.
הרוב המכריע של האתרים היום בנויים בצורה אחת. לאחרים יש שתי גרסאות – גרסה רגילה וגרסת סמארטפונים. ואילו האתרים הרספונסיביים, הקבוצה השלישית, מסוגלים להתמודד עם כל רזולוציית מסך כלשהי. העיצוב שלהם דינמי וסתגלן.
מגמות שימוש במובייל
לפניכם אתר ישראלי בתחום התרבות והבידור. יש לו כיום כ 100,000 ביקורים בחודש. אני רוצה להראות לכם את גרף הכניסות ממובייל מינואר 2010 ועד אוקטובר 2012. כמעט שלוש שנים. הגרף מדבר בעד עצמו:
אגב, המספרים בפועל גבוהים הרבה יותר. מפאת עומס הנתונים הגרף מחושב רק על סמך 20% מהנתונים (למה?) ורוצים לשמוע עובדה מעניינת? לאתר הזה אין גרסת מובייל וכנראה גם לא תהיה בשנה הקרובה. איך זה מתבטא בנתונים?
שימו לב שהתעבורה ממובייל מהווה כ 20% מהתעבורה לאתר, ומאופיינת במחצית מזמן השהייה, מחצית מהדפים הנצפים במהלך ביקור, ועם אחוז נטישה יותר גבוה. אני חושב שהמספרים מדברים בעד עצמם. אז אם מדברים על חשיבות של גרסת מובייל, אז הנה ההוכחה. אבל מובייל זו מילה רחבה מאד…
אבל כמה סוגי סמארטפונים כבר יש?
באותו הדוח שהוצאתי, רשומים לי גם רשימת המכשירים. לאתר הזה גלשו בתקופה הזו מ 170 Mobile Devices שונים. זה נראה לכם שהמספר גבוה אבל אני מזכיר שעקב עומס הנתונים המספר בפועל גבוה יותר. כמה גבוה? צמצמתי את תקופת הדוח לשנה האחרונה וקיבלתי 280 מכשירי מובייל שונים הגולשים לאתר זה! זה מספר אדיר! אבל זה עוד כלום.
כמה רזולוציות שונות כבר יש?
אותו אתר, אותו דוח מובייל. אבל הפעם הסתכלתי ברשימת הרזולוציות של מכשירי המובייל בלבד.
תחזיקו חזק.
ואם אתם עדיין מתעקשים, כשהוצאתי את אותו הדוח על כלל ההתקנים (גם PC, גם מובייל, מקינטוש – הכל) הגעתי ל 3200 סוגי רזולוציות שונות.
נכון, חלק מהרזולוציות דומות אחת לשנייה, הבדל של 10-20 פיקסלים לפה ולשם, אבל התמונה מספיק ברורה. תם עידן ה 800 על 600 בכל בית.
יש עוד עשרות יתרונות (וגם חסרונות) לעיצוב רספונסיבי אבל זה בפעם אחרת. אז האם צריך עיצוב רספונסיבי? בעקרון כן, ויש להניח שבעוד כמה שנים זה יהיה הסטנדרט (עדיין קשה "למכור" את זה).
איך מודדים את זה?
אנו לא הולכים למדוד ולבחון את כל הרזולוציות כי זה בלתי אפשרי. רוב הרזולוציות ממילא מתחלקות לכמה משפחות, ולכן ההתמקדות שלכם במדידה כאנליסטים ובעלי אתרים, היא במשפחות הרזולוציות וגם בסוגי המכשירים. נתחיל ממדידת הרזולוציות. הפעם, במקום להסתכל ברשימה אינסופית, נפתח דוח אחר לגמרי בגוגל אנליטיקס.
תחת קטגוריית ה Content בגוגל אנליטיקס, פתחו את דוח All Pages. הקליקו על דף הבית או כל דף אחר שמעניין אתכם. לאחר בחירת הדף, גללו למעלה וחפשו "In Page". גוגל יפתחו לכם תצוגה מקדימה של הדף שבחרתם.
מעל לדף האתר יופיע לכם סרגל כלים קטן עם שלושה כפתורים. קליקו על Browser Size, וגם על Show Colors, ולאחר מכן תראו מין סרגל כלים קטן נוסף:
מה שהסרגל הזה אומר זה: "95% מהמבקרים באתר הזה, יכולים לראות את האיזור הזה". מה זה "האיזור הזה"? זה האיזור הצבוע לכם בצבע לבן. כעת תוכלו לשחק עם הגלילה ולראות איזה אזורים במסך נגלים לעין הגולש בהתאם לרזולוציות שלו. זוהי תצוגה פשטנית וקלה יותר לעיכול מרשימת רזולוציות ארוכה ומייגעת.
ומה עם סמארטפונים וטאבלטים ספציפיים?
החלק השני של המדידה הוא לא לפי רזולוציות אלא לפי סוגי מכשירים. יש לא מעט אתרים המראים לכם כיצד האתר שלכם נראה במכשירי מובייל שונים, כך שגם הם מתמקדים במכשירים ולא ברזולוציות. אחד מהם זה Screenfly, ולאחר הזנת כתובת האתר תוכלו לראות כיצד האתר נראה בהתקנים שונים.
אז אחרי שבדקנו איך נראה האתר שלנו בהתקנים שונים, אפשר להציץ באנליטיקס ולראות האם לסוג ההתקן יש השפעה על איך שהגולש מתנהג באתר. לשם כך, פתחו את דוחות ה Devices והציצו ב 20 התוצאות הראשונות המהוות בדר"כ את חלק הארי של התעבורה לאתר:
אפשר לראות בשורה השנייה איך הביצועים של אייפד הרבה יותר מוצלחים מלכל השאר (בכל היבט), וזה ברור כי יש לו מסך גדול יותר, והאתר במתכונתו הבסיסית מוצג שם היטב (סוג של). אגב, אם אתם לא בטוחים איך נראה מכשיר מסויים, הקליקו על האייקון של המצלמה ותפתח לכם תמונת הדגם.
דבר נוסף שיש לקחת בחשבון לפני שאתם צוללים לנתונים. יש לאפיקי השיווק שלכם השפעה אדירה על הנתונים שאתם רואים. אם למשל אני משווק את הפוסטים כאן דרך פייסבוק למשל, יש להניח שחלק נכבד מהכניסות יהיו ממובייל. לא רק זה, אם זה קהל שמכיר אותי, אין לו שום סיבה לקרוא תכנים ישנים ולכן מספר הדפים הנצפים יהיה נמוך למדי. אם אני עושה קמפיין פרסומי הפונה לקהל יעד רחב וחדש – הנתונים אמורים להיות אחרים. אז תמיד לקחת את הנתונים בהסתכלות רחבה ולא צרה.
