היום לבנות אתר רספונסיבי הוא טרנדי, לא רק בארץ אלא גם בחו"ל אך הוא טרנדי מסיבה פשוטה אחת, זה פותר שני בעיות במכה אחת. אתר למחשבים שולחניים ואתר למכשירים ניידים וטאבלטים. אתר רספונסיבי מביא יתרון אחד מובהק, במקום לבנות אתר נפרד למכשירים שונים כמו למשל לסמארטפון כמו אייפון או אתר נפרד לטאבלטים ומסכים בגדלים השונים, בונים אתר רספונסיבי אחד שיודעת להתאים את עצמו למספר גדלים של המסך.
נשמע מעניין? גם לי אבל בואו תיראו הסתכלות שונה על הנושא.
(מזהיר, יש פה חפירה רצינית וגם תגובות פה יוצאים מפרופורציה לכן תכינו קפה)
מדובר בשיטה שכל העולם עבר אליה. יש את אלו שטוענים שאתרים רספונסיביים מקודמים טוב יותר בגוגל ויש את המתנגדים. אתר רספונסיבי הוא לא פחות ולא יותר אותו הדבר כמו אתר רגיל מהסיבה הפשוטה, שהתאמה לא נעשת בקוד וזה לא נחשב לאתר מותאם למובייל מבחינת מנועי החיפוש. (הכוונתי מפורט בהמשך)
חסרון המשמעותי של אתר רספונסיבי לדעתי הוא שלא מדובר באתר מותאם מובייל מבחינה ממשק משתמש וחוויית משתמש (UX/UI). אתר רספונסיבי אפשר להתיחס אליו כרק מתיחת פנים של העיצוב ולא יותר מזה. רספונסיבי אינו אתר מובייל וחשוב להבין זאת. לדוגמה אם ניקח רכב מאזדה 3 ונשאים לו גלגלים של ג'יפ, הוא לא יהפוך להיות ג'יפ אמארוק של פולטסווגן 4X4 נכון? כנ"ל גם באתרי האינטרנט.
Seo – אתר רספונסיבי זה לא אתר מותאם למובייל
כדי להבין למה אתר רספונסיבי זה הדבר פחות רצוי ביחס לאתר מותאם מובייל במיוחד, צריך להבין מה המשמעות שלו מבחינת חווית משתמש וגם כן seo למרות שברצוני פחות להתיחס לנושא של קידום אתרים כי כנראה יהיו כאן קליק בייט. אתר מותאם סלולר הוא אתר שדליל בקוד ודליל במשקל באופן משמעותי. הדף והקבצים והתמונות שיורדות למכשיר שלך בעת כניסה לאתר, לכל האינפורמציה הזאת יש משקל. קבצים שנטענים בסלולר צריכים לשקול הרבה פחות ממחשב הביתי – desktop. אם למשל כל תמונה שוקלת 100kb (קילובייט), זה אינו משמעותי עבור מחשבים שולחניים עם מהירות אינטרנט של 100MB אבל אכן מדובר בדבר מאוד משמעותי כאשר אנחנו מדברים במובייל מכיוון שמהירות האינטרנט של רשתות סלולריות אינם משתוות למהירויות האינטרנט הביתיות ויכולת רינדור (web rendering) איטית יותר ולכן חשוב לקבץ את קבצי המדיה והתמונה בדחיסה ברמה מאוד גבוהה כדי להגיע למשקל דל של האתר בעת הטעינה.
הרי בסה"כ גוגל אומרת דבר אחד פשוט. "Speed Matters".
מהירות הטעינה היא דבר משמעותי בכל הנוגע ביחס של גוגל לאתרים באופן כללי ובאתרי מובייל בפרט. אתר רספונסיבי רחוקה מאוד מלהחשב לאתר שהוא מהיר. כמובן ואני מבין שאני מדבר על מקרים בהם מדובר באתרים שלמים ופורטלים גדולים ולא אתר של איזו חברה או עסק שעיצוב מסתכם רק ב css.
אתר רספונסיבי לא נחשב לאתר שנטען מהר במובייל איך שלא נהפוך את זה והסיבה היא לא עיצוב עצמו שהוא רספונסיבי אלא התכנים והכובד שמגיע יחד איתו.
לפני שנתחיל לומר שאתרכם ניטען מהר, המהירות לא נמדד לפי זמן תגובה בלבד אלא לפי האופטימיזציה של הקוד וקבצי מדיה של האתר, רינדור העמוד בדפדפן ועוד. חלק מהדברים שנלקחים בחשבון הוא כמות הבקשות שנשלחות מדפדפן, את גודל קבצי תמונה, גודל ומספר קבצי css, גודל קבצי js ורשימה ארוכה מאוד של דברים אחרים שנלקחים בחשבון בעת ביצוע חישוב של מהירות הטעינה כגון reflow / re-rendering וכו'
והשאלה המתבקשת היא, אז מה בעצם עושה אתר רספונסיבי?
ברוב המקרים אתר רספונסיבי הוא בסה"כ התאמה של Css. אתר מובייל הוא עיצוב ובניה ייחודית וממוקדת למובייל. השוני בינהם שאתר רספונסיבי טוען את כל קבצי ה JS, התמונות, תוכן ומדיה, קובץ css מנופח במיוחד או מספר קבצי css וכו'. קבצים אלו נטענים גם אם צריכים אותם וגם אם לא באתר מובייל וברוב המקרים התשובה היא לא. כי למה לטעון אשרות ומאות שורות קוד ולקרוא לקבצים השונים שכלל לא צריכים אותם גם בתצוגה הרגילה וגם בתצוגה הסלולרית?
חשוב להדגיש, שיש אנשים מוכשרים שיודעים להפריד ולהשתמש היום בטכניקות שמאפשרות לזהות באמצעות media query ולהפעיל את ה css המתאים אבל גם אז יש בעיה. אני אמשיך.
אני לא נגד אתר רספונסיב, זה פיתרון מעולה להרבה אתרים, אבל… ואבל הגדול כאן היא שאם אפשר לבנות עיצוב נפרד שממוקד במכירות ויחסי המרה, אז עדיף לתת לגולש את החוויה הממוקדת לזו שבמובייל ולא משהו שנועד לתצוגה רגילה שהותאמה איכשהו לתצוגה בניידים. אני לגמרי מתיחס כרגע לחווית משתמש.
ניקח דוגמה פשוטה אחת כדי להמחיש את הטיעון: לא צריך לטעון קבצי js של סליידר (גלריית תמונות זזה) באתר במידה ובתצוגה סלולרית הסליידר כלל לא מוצג. אז למה לטעון את קבצי עיצוב של css, קבצי קוד של js או תמונות בגודל המלא במידה ואנחנו מסתירים את התצוגה של סליידר באתר מותאם לסלולר וזו רק דוגמה הפשוטה.
צריך להבין, שכל הקבצים וכל הקוד ניטען בדפדפן גם אם רוצים וגם אם לא כאשר מדובר באתר רספונסיבי. ולכן מבחינת גוגל כלל לא מדובר באתר שהוא "מותאם לסלולר" ולכן הפרק הזה של יתרון יחסי של אתר מותאם סלולר עבור קידום אתרים ו seo כלל אינו רלוונטי לדעתי אבל צריך למדוד כמובן כל מקרה לגופו ואיני טוען שנאמר נכון עבור כל אתר.
בואו נדבר עם דוגמאות:
אם אתם רוצים להעביר חפץ לדוגמה שולחן מהבית של ההורים לבית שלכם, אתם לא תעמיסו את כל הארונות, שולחנות ובגדים באוטו כדי להעביר את השולחן האישי , נכון? הבנתם את הנקודה? זה בדיוק המצב עם אתרים רספונסיביים. אם הדוגמה לא מובנת, אשמח להרחיב עליו בתגובות {זה בהומור כמובן}
אז אתה אומר שרספונסיב זה לא טוב?
לא. בוא נדבר על רספונסיב. עיצוב רספונסיבי זה פתרון מעולה אבל לא מתאים לכל דבר ובטח ובטח לא לאתרים בצורה גורפת שכל אתר אמור להיות רספונסיבי כפי שמנסים למכור היום. המשפט "אתר הזה אוטומטי מותאם לסלולר". זה משפט שצריך להזהר ממנו או להפך, הייתי אומר לברוח מהדבר הזה או לפחות לבדוק לעומק את ההשלכות. למשל, עיצוב שהוא עיצוב ללא אימג'ים אלא מבוסס כולו ב Css ואלמנטים גרפיים שמיוצרים מקוד, אז זה מצב אידיאלי שעיניין הרספונסיב יכול להצדיק את עצמו. לא בכל מקום ובכל מצב מוצדק להשתמש בזה ויתרה מזאת, ברוב המקרים זה לא מוצדק.
אגב אמרתי שאני מחזיר במספר אתרים רספונסיביים?
בוא נסדר את הנושא הרספונסיב על פי יתרונות וחסרונות
יתרונות:
- מתאים במספר גדלים אוטומטית
- הרגשה של תפיסת 2 ציפורים במכה אחת
- תקווה שזה יתרום בקידום ושיווק האתר
חסרונות:
- עלות ופיתוח של עיצוב ייעודי למובייל פחותה יותר מזו של רספונסיב
- קוד עמוס מאוד שיש לו השלכות ישירות לטעינת עמודים
- קבצי תמונה גדולים נטענים גם בסלולר במקום קבצים קטנים
- בדרך כלל קבצי מדיה לא רלוונטיים נטענים מאחורי הקלעים בכל מצב (גם אם לא צריכים אותם)
- טעינה איטית של הדף בסלולר במידה וקבצי מדיה לא מיועדים לגדלים של סלולר.
- מבחינת מנועי החיפוש, המשמעות של התאמה רספונסיבית היא לא יותר ממתיחת פנים טובה. זה אינו אתר סלולר וגוגל בפרט אומר שאינה נותנת כל משקל נוסף לאתר רספונסיבי. להל״ן הקישור לנאמר ע״י גוגל:
http://www.seroundtable.com/google-responsive-design-ranking-17536.html - על פי בדיקת מהירות טעינת אתרי האינטרנט של גוגל, אתר רספונסיבי שאינו ערוך כראוי מקבל ניקוד נמוך.
לסיכום:
אתר רספונסיבי הוא טרנדי, הוא כאן כרגע והולך לרוץ איתנו כמה שנים קדימה עד שלא יהיה שינוי ״הבא״ ונראה מה יהיה אז, אבל חשוב לי לציין שמדובר בטרנד מוצדק עקב רבוי מסכים אבל לפעמים זה אכן משמש את בונה האתרים או בעלי אתרים בצורה מטעה את המטרה, כי לפעמים ובהרבה מאוד מקרים אתר רספונסיבי לא כל כך מתאים ומומלץ עיצוב מותאם לסלולר (הכוונה לא לאתר נפרד אלא לעיצוב מותאם לסלולר). אני לא שולל כלל שימוש בשיטת רספונסיב במקרים רבים ובפרויקטים שמתאימים לכך. יש אתרי תדמית בעיצוב מאוד מינימליסטי עד כדי כך שאין בהם אלמנטים עיצוביים כגון אתר הבא: http://moderngreenhome.com. אלו אתרים קלאסיים שאולי מצדיקים שימוש של responsive אך ברוב המקרים זה לא המצב. תארו לעצמכם אתר Mako רספונסיבי. מקווה מאוד שזה לא יהיה והם ישארו עם אתר ממוקד מובייל גם בעתיד. הרבה יותר נוח.
רוב האתרים לא נראים כך ועיצובם אינם תואמים למבנה שבדוגמה ולכן הם בפירוש לא מתאימים לקטגוריה שמתאים למבנה אתר רספונסיבי.
אני חייב להבהיר, אני לא נגד עיצובים רספונסיבים, אני פשוט רואה שימוש לא מוצדק בו במצבים רבים שהיה אפשר לעשות דברים אחרת בצורה טובה יותר. (פרפקציוניזם לא מזיק ״נראה לי״)
אתרים שמתאימים לעיצוב רספונסיבי אך מקבלים ניקוד נמוך על פי בדיקת מהירות של גוגל
ניקוד מובייל: 42 נק'
ניקוד רגיל: 58 נק'
פער: 16 נק'
מסקנה: באופן כללי הניקוד 58 כבר מצביע על כך שלא נעשתה כאן אופטימיזציה כמו שצריך אם בכלל, אך זאת לא הנקודה. הניקוד של מובייל נמוכה בגלל הסיבה שמדובר בעיצוב רספונסיבי ואינו מתאים להגדרות של אתר סלולר. הפער רק מצדיק את הנאמר. אפשר להגיע בסלולר לניקוד גבוהה יותר מזו של אתר הרגיל.
ניקוד מובייל: 55 נק'
ניקוד רגיל: 70 נק'
פער: 15 נק'
סיבה ותוצאה: אתר שבאמת מתאים להיות רספונסיבי אבל משלם את המחיר על כך בניקוד וגם במהירות הטעינה בדפדפן ובמובייל. הטעינה הרבה יותר איטית בסלולר לעומת בדפדפן של מחשב נייח. שוב אנחנו רואים כאן גם את הפער בניקוד ובנוסף מבחינה טכנית יש בעיות רבות כגון קבצים שלא דחוסים מספיק עבור מובייל, מספר רב של בקשות שנשלחות לדפדפן, קבצים שנטענים במלואם ללא הצורך וכו'.
ניקוד מובייל: 67 נק'
ניקוד רגיל: 79 נק'
פער: 12 נק'
כנ"ל.
העיצוב של אתרים אלו, מבוססי מבנה (layout) וללא עיצוב גרפי. יש פה קרייטיב ואין פה עיצוב גרפי וצריך להבין זאת. הכל כמעט באתרים כאלו מבוסס על css, js ותמונות תוכן (הכוונה היא ללא אלמנט העיצובי בעצמו). לכן במקרה זה אפשר לומר שכן מוצדק עיצוב רספונסיבי. אבל נעשה כאן עבודה לא רעה כי פרויקט כזה מתאים להגדרות שניתן לאשר בבניה רספונסיבית.
המלצות:
אם החלטתם לבנות אתר שמתאים למכשירי סלולר השונים, מומלץ לבנות אתר מותאם במיוחד למובייל אבל אם תרצו לתפוס שני ציפורים במכה אחת אז כמובן רספונסיב ושיטה אחת לא נוגדת בשיטה שניה או זה לא אומר שאחד טוב יותר והשני פחות. החלטה נובעת מהיבט מקצועי ושיווקי, מה אנחנו רוצים להשיג בסופו של דבר מהגולש (נכנסנו לפילוסופיה לכן נעצור כאן).
אתרים עם התאמה נפרדת לסלולר שלא משתמשים בעיצוב רספונסיבי
אתר www.Cnn.com מחזיקה באתר מותאם מובייל במיוחד ולא רספונסיבי.
www.Apple.com אינה מחזיקה כלל אתר מותאם של סלולר.
היא משתמש באתר הרגיל שלה באמצעות pixelperfect דיזיין שנראה אותו הדבר כמו במחשב שולחני.
http://www.chevrolet.com – מחזיק באתר מותאם מובייל נפרד והוא לא משתמש בהתאמה רספונסיבית.
http://www.whitehouse.gov – יש אתר מותאם לסלולר. לא משתמשים ב responsive
http://www.facebook.com – כנ"ל אתר נפרד למובייל
דעה אישית
תשקלו לעשות אתר נייטיב או עיצוב ממוקד מובייל ולא ישר לקפוץ על רספונסיבי במידה ויש באפשרותכם יכולת ותקציב לבנות אתר מובייל נפרד או להפעיל עיצוב נפרד על אתר קיים.
זה לא נפוץ בארץ, אבל מומלץ לקחת יועץ בתחום לפני שבונים אתר כדי שיכוון אותכם.
"מתכנת שלי אמר לי שזה פתרון מושלם לבנות אתר רספונסיב, מה אתה אומר?"
חשוב להבין שמתכנת לא בהכרח וברוב המקרים לא אופטימייזר או איש שיווק שמתמחה בשיווק באינטרנט, מנגד מקדם אתרים לא מתכנת, בונה אתרים יכול לא לדעת מה זה Reflow בדפדפן, re-rendering, מה זה render-blocking javaScripts וניהול זמני קאש בדפדפן אצל היוזר וכו'. כדי להסביר זאת היטב מדובר בשני סוגי אנשים.
- בונה אתרים הוא לא בהכרח מתכנת. להתקין וורדפרס או להתקין תוספים בשרת זה לא נקרא להיות מתכנת.
- מתכנת / מפתח זה מישהו שיודע שפת פיתוח אחת לפחות כמו למשל php שיודע לפתח כמינימום משהו עצמאי.
קחו לדוגמה, למשל קורס בניית אתרים השונים בארץ. הלימודים הם בסביב התוצאה הסופית ולא בהכרח מדובר בפיתוח ישיר ונכון. קורס בניית אתרים בוורדפרס לדוגמה, הלימודים ברוב המקומות הם בסיסיים בסביב המערכת ולא פיתוח עצמו והסיבה היא שבשביל פיתוח, קודם כל צריך ללמוד שפת פיתוח או לבוא עם רקע מוכן מה שאינו דבר הכרחי ברוב מוסדות ההשכלה הנוכחיים. ההפך, מציגים זאת כיתרון: "אתה לא צריך להיות מתכנת כדי לבנות אתרים". יפ… 🙂 זאת האמת…
להתקין מערכת כמו ג'ומלה או וורדפרס או דרופל בשרת אינו עושה את אף אחד לבעלי תואר הזה. פיתוח הוא דבר שמורכב יחסית ודורש הרבה ניסיון מעבר ללימודי שפת תכנות וכמובן מעבר להתקנה של מערכות מוכנות. יתרה מזאת, זה הופך להיות מורכב יותר ברגע שמדברים על אופטימיזציה במיוחד למטרות קיצור זמני הטעינה של דפי האינטרנט.
אז למה סיפרתי את זה? בכדי להמחיש את הנושא וההבדל בין מפתח לבין בונה אתרים. זה בדיוק ההבדל שלא ברור ללקוח ולמשתמש הסופי. אולי אתייחס לנושא הזה בפוסט נפרד בעתיד הקרוב.
אופטימיזציה לזמני טעינה לא נגמרת רק בצד הטכני של המערכת והקוד של האתר אלא תלויה גם בשרת. אפשר לעשות מספר דברים בשרת שיכולים להאיץ את טעינת האתר שמצריך שוב, אדם שמתמחה או יש לו ניסיון עבודה עם שרת עצמאי כמו Vps או Dedicated.
ולסיום
צריך להבין שהתחום כולו מורכב מאוד והדברים משתנים כל הזמן. יכול להיות שבזמן שאני כותב את השורות אלו, מחר אני אחשוב אחרת, לפעמים דבר פשוט ומהיר הוא לא בהכרח הדבר הנכון לעשות. כמו בכל דבר בחיים, גם בעולם האינטרנט יש דברים שאפשר לעשות אותם טוב יותר. אתר רספונסיבי לדעתי מוצר מצוין שמתאים להרבה מקרים אבל לא באופן גורף לכל דבר. הדבר הנכון לעשות ברוב המקרים וכדי מאוד להתיעץ עם מישהו שיכול להציג טיעון והסבר גם אם הפרויקט אותו אתם רוצים להקים מתאים לזה.
זהו בגדול, רציתי לתת אור והסתכלות שלי על הנושא של אתרים רספונסיביים ואיך אני רואה את כל העיניין הזה ולנסות להסביר את עצמי בצורה מפורטת יותר גם לשאר בעלי אתרים או בוני אתרים שאינם מודעים לנקודת מבט הזו.
עדכון והרחבה:
הקטע הזה התווסף לכתבה במיוחד לאחר תגובות דיונים רבים בנושא שזה עירר ברשת.
הרבה טענו שהקייס שלי מבחינת המאמר זה Seo והועלו נקודות שכלל לא הרחבתי עליהם אחרת יכלתי לכתוב פוסט ארוך מאוד (שהוא גם כך ארוך). לאחר תגובות רבות, רציתי לתת אור לנושא כדי להרחיב בכל מה שנוגע על Seo ואתרי אינטרנט לניידים ועל מה מדובר כאן. הקייס אינו מבט Seo בלבד אלא חוויית משתמש. זאת הייתה אחת הדוגמאות בלבד מהטענה שהיא מתבססת . אני רוצה להמחיש עוד יותר את הטענה שלי על ידי עדכון והרחבה נוספת לפוסט. (מבטיח שזה לא יהיה ארוך מדי)
גוגל אומר את הדבר הבא ואני מצטט (מתורגם):
אם עיצוב רספונסיבי הוא לא האפשרות הטובה ביותר כדי לשרת את הגולשים שלך, גוגל תתמוך בסריקת התוכן מהאתר שיוגש לה באמצעות מבנה HTML שונה. המבנה ה-html החדש יכול להיות באותה הכתובת או בכתובת שונה, ו- Googlebot תתמודד עם שני המערכים כראוי אם תעקבו אחר המלצותינו.
https://developers.google.com/webmasters/smartphone-sites/?hl=en
הדבר החשוב ביותר בציטוט שהצגתי כאן, הוא חלק הראשון. אם אתר רספונסיבי לא משרת את הגולשים שלך בצורה הטובה ביותר, גוגל תתמוך בתוכן שיוגש לה (מדובר במבנה שונה הנקרא Layout), ותסרוק את התוכן בצורה מלאה.
עכשיו זאת נקודת המשבר המעלה את השאלה, מתי אתר לא משרת את הגולשים בצורה הטובה ביותר?
התשובה היא: כאשר אתר שלך לא מציג את מה שגולש חיפש. אתר רספונסיבי, בדרך כלל לא תמצאו חוויית שימוש גבוהה לעומת אתר שנוצר במיוחד למובייל אבל זה לא הופך אותו לפסול. חוויית משתמש זה נושא מאוד מורכב שמעורר מהומה בכל מקום ולמרות זאת אני רוצה לומר את זה שוב, עיצוב ממוקד למובייל יכול לספק את החוויה גבוהה יותר למשתמש לעומת responsive. השאלה האם מדובר בהבדל כה משמעותי? זאת כבר שאלה שכל אחד צריך לענות עליה לבד.
בשורה תחתונה וכאן נסיים:
- אתר רספונסיבי פתרון מעולה!
- עיצוב מותאם לסלולר יכול לספק תוצאות טובות יותר בחלק מהמקרים
יש לך מה לומר בנושא? אשמח אם תשאירו תגובה ונמשיך את הדיון