האמת שהתלבטתי הרבה איך לפתוח את הכותרת של הפוסט הזה.
האם לפתוח את הכותרת של הפוסט הזה במשהו כמו: “אז מה היעדים שלי ל2013?”,
או אולי “קבלו את הטרנד הלוהט של עולם ה שיווק באינטרנט ב-2013”.
בסוף החלטתי לכתוב את הכותרת בצורה הזאת כי אני רוצה ללמד אתכם בפוסט הזה כמה דברים:
1. מה זה עיצוב רספונסיבי
2. למה אתם חייבים אחד כזה לאתר שלכם
3. למה אני חושב שזה הולך להיות הלהיט של עולם ה שיווק באינטרנט ב2013
4. מה אחד מהיעדים שאני שהצבתי לעצמי לשנת 2013 (רמז: זה קשור לעיצוב רספונסיבי…)
5. ואיך כל זה קשור לגודל המסך של האייפון 5.
מוכנים?
בואו נתחיל!
1. אז מה זה בכלל עיצוב רספונסיבי?
עיצוב רספונסיבי הוא בעצם מספר שורות קוד של CSS, שמתאימות באופן אוטומטי את האתר לרזולוציות מכשירים שונות.
זה נכון ששינוי הרזולוציה לא ממש ישנה לכם כשתעברו מהלפטופ (15.6 אינטש) למחשב הפיסי הביתי (19″), אבל אם תנסו להכנס לאותו אתר דרך הסמארטפון אתם עלולים להתקל בקושי משמעותי.
ריבוי אמצעי הגלישה שקיים היום מציב את בעלי האתרים בפני בעיה משמעותית. בעבר, בעיית התאימות בין הדפדפנים דרשה מבונה האתרים להתאים את האתר לכל 5 הסוגים הנפוצים: Safari, Chrome, IE, Opera ו-Firefox.
העניין הוא שהיום הגולשים לא רק שנכנסים מדפדפנים שונים – הם גם נכנסים ממכשירים שונים מה שהופך את בעיית ההתאמה הידנית לבלתי פתירה לחלוטין.
רק כדי לסבר לכם את האוזן, שימו לב איך נראה האתר הזה בדפדפן המחשב שלי:
לעומת איך שהוא נראה כשאני נכנס אליו מהאייפון:
מבינים את ההבדל?
למישהו יש בכלל ספק איפה יותר כיף (ואפשרי) לגלוש?
כדי שתבינו מה זה אתר שכן מעוצב בצורה רספונסיבית – שימו לב לאתר הבא:
ועכשיו קבלו את ההבדל – ככה זה נראה מהאייפון שלי:
שמים לב להבדל?
האתר השני מזהה שמתבצעת גישה מדפדפן ברזולוציה שלא מאפשרת לו להציג את האתר במתכונת הרגילה, אבל מכיוון שהעיצוב שלו תוכנת להיות רספונסיבי הוא משנה את עצמו בהתאם, והופך להיות הרבה יותר נוח לגלישה!
אחרי שהבנו את זה – אפשר לעבור לחלק השני:
2. למה אני בכלל צריך את זה???
כדי לענות על השאלה הזאת אתאר לכם מקרה אמיתי של לקוח, שכעס עלי מאוד כשאמרתי לו שהוא צריך להפוך את האתר שלו לרספונסיבי.
“השתגעת?” הוא אומר לי, “בשביל מה אני צריך עיצוב רספונסיבי אם אפשר להגדיל ולהקטין את המסך עם האצבעות?”
כדי להרגיע את הלקוח הזה הראיתי לו את הגרף הבא ושאלתי אותו: “אדוני היקר. האם ידעת ש28% מהכניסות לאתר שלך מתבצעות דרך מכשיר נייד, ושיעור הנטישה שלהם גבוה ב8% מהממוצע באתר?”
המספרים עשו את שלהם, ולמרות שהטענה של הלקוח נכונה לכאורה (הרי בדיוק בשביל זה המציאו את אפשרות ההגדלה/הקטנה במסך המגע) הוא הסכים איתי שצריך לעצב את האתר מחדש כדי שיתאים גם למכשירים סלולריים.
אהה כן, שכחתי לספר לכם ש811 הביקורים הללו התבצעו מ42 רזולוציות מסך שונות.
אם זה לא מסביר לכם את הצורך בעיצוב רספונסיבי שמתאים את עצמו לרזולוציה – אתם נמצאים בבעיה.
3. למה אני חושב שזה הולך להיות הלהיט של עולם השיווק באינטרנט בשנת 2013?
נורא פשוט: הרי חלק גדול מאוד מהגלישה באינטרנט מתבצעת היום ממכשירים סלולרים, ולכן כל בעל עסק חייב לתת מענה (כלשהוא) גם ללקוחות האלה.
לפתח אפליקציה ייעודית לסלולר – נורא יקר, ובוודאי שלא מתאים לעסקים קטנים ובינוניים.
להתקין תוסף שמתאים את האתר למובייל – נראה זוועה, ולא מתאים לעסק שמכבד את עצמו ורוצה לשדר תדמית מקצועית.
הפתרון – עיצוב רספונסיבי.
כמות האתרים שקיימים ברחבי הרשת – מיליארדים.
כמות האתרים שכבר מעוצבים בצורה רספונסיבית – אולי 1%.
מזהים את הפוטנציאל? יופי.
ועכשיו נעבור לחלק הרביעי:
4. מה אחד מהיעדים שלי לשנת 2013?
בעזרת ה’, ולמרות שאני סופר את השנה לפי הלוח העברי ולא לפי הלוח הלועזי, במהלך 2013 אני רוצה לעצב מחדש את האתר שלי כדי שיתאים בצורה מקסימלית גם לטלפונים סלולרים.
אתם יכולים לרשום את זה על פתק ולשים בתוך בקבוק.
נפגש בעוד שנה ונבחן את התוצאות.
5. איך כל זה קשור לאייפון 5?
נורא פשוט: למרות שכל יצרניות הסלולר (ללא יוצא מן הכלל) הגדילו את מסכי המגע שלהם באופן משמעותי, האייפון 5 גדל רק לגובה אבל הרוחב שלו נותר זהה.
כשאפל חשפה את האייפון 5 לא ממש הבנתי את המהלך הזה. אחרי הכל – גם עם המסך הגדול של הסמסונג לא כל כך נוח לקרוא ואפשרות הpinch (הגדלה/הקטנה) זה לא הפתרון האידיאלי.
אז באפל הסבירו שמכשיר רחב יותר מסרבל את השליטה באייפון, אבל אני חושב שסטיב ג’ובס חזה את העיצוב הרספונסיבי ולכן הוא העדיף שאתרי האינטרנט יתאימו את עצמם אליו – מאשר שהוא יתאים את עצמו אליהם.
(photo credit: StephenMitchell)