יום שבת, 30 במרץ 2013

אתר רספונסיבי - גוגל טועה

לא מעט לקוחות שואלים על אתר רספונסיבי, כמעט תמיד בסוג של חשש - אפשר להרגיש שהם לא באמת רוצים כזה, אבל לכולם יש, וחוצמזה בגוגל אוהבים את זה
ובכן, גוגל טועה.
ראשית, בואו נבין את המוטבציה שגרמה לגוגל לטעות:
בשלב מסויים גוגל הבינה שהרשתות החברתיות מהוות קרקע רחבה ופורייה להמלצות על אתרים. אם 4000 איש מצייצים על אתר מסויים, או 1780 איש עושים לייק על פוסט, כנראה שהמנוע של גוגל צריך להתחשב במידע הזה ולקדם אותם. נהדר.
רק שכאן צצו שתי בעיות:הבעיה הראשונה היא איזה לינק לפרסם ברשת החברתית. פעם לא היתה בעיה - היה רק אתר ווב. היום יש גם אתר מובייל, אולי גם אתר נוסף - מתחילים כבר לדבר על אתרים לטלוויזיה לדוגמא, בקרוב בטח נשמע על אתרי משקפיים. נניח שבטוויטר כולם מצייצים על אתר הווב שלך. מה קורה כשגולש מובייל לוחץ על הלינק? הוא יקבל את אתר הווב? זוועה.
הבעיה השניה - איך גוגל אמורה לדעת שהכתבה הספציפית נמצאת בכל מופעי האתר, ולא רק, נניח, במובייל?
את שתי הבעיות האלו פותר הדיזיין הרספונסיבי. לכל האתרים תוכן אחיד (נניח, זה לא תמיד נכון), ולכולם לינק אחיד. אוה! פרובלם סולבד.
כלומר, גוגל עשו לעצמם את העבודה לקלה. הם לא צריכים לבדוק את האתרים, ובטח שלא לוודא שהם מספקים למשתמשים חווית משתמש ראויה. וכאן בדיוק הם טועים.
כל בונה אתרים ראוי יודע לדקלם שגוגל, קודם כל, מקדמת אתרים טובים. טובים באיזה מובן? חווית המשתמש. איך הם יודעים את זה? תשאלו אותם (אני מהמר שזה קשור בזמן שהגולשים נשארים באתר). גוגל מצהירה על זה על כל צעד ושעל, זה הדבר החשוב ביותר. אל תבנה אתר לרובוטים, בנה אתר שמשתמשים רגילים ישתמשו בו ויהנו מכך.
וכאן בדיוק טמונה הטעות: אתרים רספונסיביים, כפי שציינו כאן, נותנים חווית משתמש גרועה במובייל. בשל המבנה הרספונסיבי נוצר במובייל נקניק ארוך ולא נעים לקריאה או ניווט. זה לא אתר מובייל, זה משהו כמו.  אם נודה על האמת, זה חרא.
בקיצור, על מנת לעשות לעצמה את החיים יותר קלים ולחסוך את הצורך לוודא שמופעי האתר השונים מסונכרנים, גוגל ירתה במשתמשי המובייל. 
עכשיו לפני שאתם קופצים להגן על הבחירה ברספונסיב, הרשו לי להציע פתרון חילופי, מעט יותר מסובך מבחינת תשתית, אבל בהחלט בר ביצוע וטומן בחובו הרבה יתרונות:
  1. הפיכת ה-WWW לרכזת תעבורה. היום כתובת ה-WWW משוייכת לאתר הווב. מכיוון שלשם מנותבת כל התעבורה בצורה דיפולטיבית, נוצרת בעיה בנתינת כתובת דיפולטיבית אמיתית (בעברית הכוונה היא שבמבנה הנפוץ היום, קשה להראות לבוטים של גוגל איפה נמצא המובייל). ההצעה היא כזאת: WWW אינה כתובת של מופע מסויים כי אם של נתב שיושב על השרת. ולפי היוזר אייג'נט המשתמש ינותב למופע המתאים. נניח ל-m.mysite.com או web.mysite.com.
    מה זה פותר? את בעיית הלינק האחיד. לינקים מבחוץ תמיד מגיעים עם ה-WWW.
    וכשעושים את זה נכון, גם הרובוט של גוגל יכול להגיע לכל המופעים (אם זה באמת חשוב לכם איך, תשאלו בתגובות).
  2. אתרים מסונכרנים בעזרת מערכת ניהול ועדכון תוכן אחידה לכל המופעים. אתרי הבלוגים הגדולים כבר נותנים את זה. יש גם כמה חברות בניית אתרים שנותנות את זה. הנה אחת (גילוי נאות: אני אחד הבעלים של החברה).
אז מה קיבלנו:
  1. הגישה לכל המופעים של האתר מבחוץ נעשית עם אותו לינק (WWW).
  2. ניהול תוכן במקום אחד.
  3. אתרים קלים לטעינה.
  4. ונוחים לתחזוקה.
  5. חווית מובייל מצויינת (בתנאי שאתר המובייל מצויין, כמובן).
  6. צ'ופר נוסף: כל השפות יושבות גם הן על אותה כתובת ראשית. תחשבו על המשמעות של זה. נחמד, לא?
ומה הפסדנו?
כלום.

יום ראשון, 10 במרץ 2013

אתר רספונסיבי - לא כזה גליק

אתרים רספונסיביים הם טרנד לוהט היום בבניית אתרים.
יש לכך כמה סיבות טובות:
  1. הפתרון הזה הוא סקסי.
    תעיפו מבט על אתר רספונסיבי מעוצב טוב, כגון זה או זה. עכשיו כווצו את רוחב הבראוזר שלכם. וואו! קסם! כן, טוב, בשביל זה בדיוק יצרו את HTML5 - כדי שלבוני אתרים תהיה אפשרות לייצר וואו! בקלות.
  2. מתקבל אתר שבו "מקום אחד לעדכון תוכן". הכוונה היא שעדכון תוכן יחיד מעדכן גם את מופע המובייל וגם את מופע הווב של האתר.
  3. גוגל אוהבת את זה. ארחיב על כך בפוסט אחר.
  4. הפתרון הזה הוא סקסי.
 העניין הוא שיש גם לא מעט סיבות למה לא להשתמש בעיצוב רספונסיבי לאתר שלך. והן יותר חזקות:
  1. אתרים כנ"ל מאוד קשים לתחזוקה. קבצי העיצוב (CSS) מכילים את כל מופעי האתר ולכן הם, פחות או יותר, אינסופיים. בנוסף, שינוי במבנה (Layout) של מופע אחד יגרור שינוי במופע אחר - וזאת עבודה קשה ביותר לסנכרן בין כולם.
  2. מנקודת מבט מוביילית, האתר מחורבן. זאת דעתי, כמובן, אבל בינינו, מי בדיוק אוהב עיצוב שבו האתר הוא נקניק ארוך של טקסט, שצריך לגלול בו למעלה ולמטה בלי להבין איפה אתה? אני לא מכיר מעצב אחד שזאת הצורה שבה הוא חושב שצריך לייצר אתר מובייל - אז למה ברספונסיב זה מתקבל?
  3. האתר "כבד" לגלישה. הוא גם תופס יותר מקום - כי כל מופעי האתר יושבים על אותו קובץ - וגם הפיענוח בברואזר כבד. מנקודת מבט מוביילית, זה מחורבן.
  4. מכיוון שבחירת סידור האתר נעשית לפי רוחב המסך ואינה רציפה - כלומר, בוחרים 3-5 רזולוציות לפיהן משנים את הסידור - יש קפיצות באתר. נניח שבחרתי לשנות את הסידור ב-800 וב-970 פיקסלים. בתחום בין שתי נקודות אלה הריווחים והרוחב האלמנטים משתנים, גודל הפונט נשאר זהה, תהליך שמייצר עיוותים במראה האתר ומחייב התפשרות על מראהו.
  5. הסקסיות של הפתרון חסרת כל משמעות, פרט ליכולת למכור כזה אתר ללקוח. בסופו של יום, מרבית המשתמשים לא ישחקו עם רוחב הבראוזר כדי לראות את האתר משתנה. הם פשוט יפתחו אותו ויראו את המופע הרלוונטי. 
  6. בוא נניח שיש לכם אתר רספונסיבי. עברו שנתיים,אתרי האינטרנט נראים שונה היום. אתם רוצים לשנות את עיצוב הווב, ולהשאיר את המובייל על כנו. נחשו מה? אי אפשר.
  7. יצירת אתר רספונסיבי מוצלח זאת משימה כמעט בלתי אפשרית. כמות העבודה כל כך גדולה, שבסופו של יום תקבל: א. אתר בינוני, ב. יקר להחריד. 
אני רוצה להרחיב בעניין "מתקבל אתר בינוני". בואו ונסתכל לדוגמא על האתר הבא. במבט ראשון האתר נראה נהדר. אז בואו נסתכל קצת יותר לעומק:
  1. הקוד, בעיקר קבצי ה-CSS, עצומים. אין סופיים. אין שום סיכוי סביר לנהל קבצים כאלה.
  2. כשהבראוזר רחב מ-750 פיקסל האתר נראה טוב. כשהבראוזר צר מ-750 פיקסל האתר נראה טוב, אבל אחרת לגמרי. יש כאן, בינתיים, שני אתרים שונים לגמרי שנטענים ביחד, בכל פעם שהאתר נטען. זה גורם לבראוזר לעבוד יותר קשה, ללא צורך.
  3.  
    >750
    <750
  4.  חדי העין ביניכם בטח שמו לב שחסר =750. בואו נבדוק את נקודת הקצה הזו.
    רואים? נעלם התפריט. יופי.


  5. 750


  6. ועכשיו להפתעה המיוחדת: קחו את הבראוזר לרוחב של ~300 פיקסל. WTF?
~300

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

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

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

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