יום ראשון, 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 שונה, עונים למטרות מעט שונות, ומשתמשים ביכולות שונות של המדיות בהן הן מוצגים. ברוב המקרים, בנייה נכונה של האתרים, ובצורה אלסטית, תתן מענה מצויין לכל רוחב מסך שהוא.
הערה: אתר אלסטי הוא, במילים פשוטות, אתר בו האלמנטים משנים את גודלם ביחס לרוחב המסך בעוד שמבנה האתר אינו משתנה.

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

12 תגובות:

  1. לא אכפת לי אם תפרסם את התגובה הזו או לא, אבל חבל שאתה כותב שטויות בלי להבין את החומר.
    קודם כל, אתר רספונסיבי לא נוצר כדי שהמשתמש "ישחק" עם הגודל של הדפדפן ויגיד "וואו". זה חוסר הבנה מוחלט לכתוב דבר כזה. הרעיון הוא שהאתר יוצג בצורה מסויימת בגודל מסך שונה. בצורה אחת במסך רחב, בצורה אחרת במסך של מכשיר נייד, בצורה אחרת במכשיר נייד אחר וכן הלאה. הרעיון הוא בהחלט קיומו ותיחזוקו של אתר אחד, עם data source אחד שמותאם לסוגי מסכים משתנים.
    חוץ מזה, זה שלך האתר קשה לתחזוקה זה לא צריך לעניין את הלקוח שלך (בהנחה ואתה בונה אתרים ללקוחות). הרבה יותר יקר ללקוח לבנות אתר למובייל, אתר נפרד ל- Web ולתחזק את שניהם. שלא לדבר על זה שנמנעת מלהציג דוגמאות לאתרי מובייל, שרובם נראים פשוט זוועה. הרבה יותר זוועתיים מאתר רספונסיבי מעוצב טוב.
    כמו כן, בהערת אגב, הרבה יותר נחמד להציג במכשיר נייד "נקניק" ארוך של טקסט ברור וקריא, מאפשר כפי שקורה ברוב המקרים - אתר שאינו מותאם, כזה שהמשתמש צריך להקליק בחלקים שונים של הדף (או לעשות pinch) כדי להיות מסוגל לקרוא משהו בכלל.
    נכון שאתר רספונסיבי עולה יותר (גם אתר מובייל נפרד עולה כסף), ונכון שהוא דורש השקעה, אבל אם ללקוח יש כסף להשקיע בעיצוב נכון ובבניה נכונה של האתר, זה יצא לו זול יותר בעתיד.
    אגב, סתם לדוגמה, התבניות החדשות שמגיעות עם Wordpress הן רספוניביות out of the box. הגיעו שם למסקנה שזו הדרך המומלץ לעבוד...
    בכל מקרה - שיהיה בהצלחה.

    השבמחק
  2. אנונימוס יקר,
    א. אם רצונך לקיים דיון, יכול לעזור אם תציג את עצמך. להגיד "שטויות" ו-"לא מבין" זה קל, אבל לא תורם לכלום. זה בעיקר מלמד על חוסר הביטחון שלך.
    ב. זה שיש אתרי מובייל מחורבנים זה נכון. אז מה? איך זה קשור?
    ג. פתח את http://m.xi-md.com/ - זה אתר מובייל טוב, שאי אפשר להשיג בעיצוב רספונסיבי פר-סה.
    ד. בעניין המחירים - כל חברות בניית האתרים הרציניות גובות י ו ת ר על אתר רספונסיבי מאשר על שני אתרים. ובצדק.
    ה. תחזוקה קשה מאוד מעניניית את הלקוח (קצת הזוי להגיד אחרת), משתי סיבות - 1. היא יקרה יותר, 2. היא נותנת תוצאות פחות טובות. זאת הסיבה שתמיד, בכל תחום, בכל מקצוע, שואפים לתחזוקה קלה.
    ו. נקניק זה פתרון גרוע. כאמור, אף מעצב אתרי מובייל טוב בעולם לא יבחר באופציה הזאת. היא קיימת ברספונסיב בגלל ההיסטוריה - התחילו מווב ואילצו את המובייל להסתדר עם מה שיש. והטענה "יש אתרי מובייל יותר גרועים" היא נכונה, אבל לא רלוונטית.
    ז. ההיסטוריה מלאה בדוגמאות שבהן כולם טעו. זה לא מוכיח כלום. להזכירך, פעם כולם חשבו שהשמש סובבת את כדור הארץ. פעם גם חשבו שאתר מלא לינקים וטקסט לרובוטים הוא דבר טוב. אז חשבו.

    השבמחק
  3. מאמר מעניין.
    אני תוהה האם אין אפשר לבנות באמצעות מכלול טכניקות הרספונסיב אתר מובייל שהוא לא "נקניק". זה כמובן ידרוש הרבה עבודה ויעמיק את התחושה של המפתח ש"מדובר בשני אתרים שונים", אבל למשתמש זה עדיין יכול להראות אתר זהה מבחינת תחושה, ערכים, עיצוב ופונקציונליות (שהשינוי בשימוש כמעט "שקוף" ונובע בצורה קוהרנטית מהשינוי בפלטפורמה).
    עוד הערה/שאלה- לאתרים לא רספונסיביים במובייל יש מסך ראשון מעצבן ששואל אותי באיזו תצורה אני מעדיפה את האתר- אתר רגיל, אתר מוביל, אפליקציה. אתר רספונסיבי מונע ממני כאב ראש והקלקה מיותרת. יש לכך פתרון לא רספונסיבי?
    ובאותו הקשר שאלה טכנית לחלוטין- בניית מובייל+טאבלט ודסקטופ+טאבלט כפי שהצעת, איך זה בדיוק עובד כשאני נכנסת מהטאבלט שלי?

    השבמחק
  4. היי הילי.
    רספונסיב זו מתודת דיזיין שמתארת, בין השאר, איפה יהיו החלקים השונים של העמוד לפי רוחב המסך. וזו בדיוק הבעיה, זה מייצר חווית משתמש גרועה במובייל.
    טענתי היא שצריך לבנות שני אתרים שונים - אפשר להעמיס אותם על אותו קובץ HTML ואז לבחור מה יוצג בשאילתות Media screen או בבדיקת User agent. אבל זה פתרון לא טוב משלל סיבות, כגון פגיעה בציון העמוד בגוגל, כובד האתר וכיוב.
    את הבחירה איזה אתר להציג צריך לעשות עוד ברמת ה-Server שיושב על ה-WWW, אבל על כך ארחיב בפוסט קרוב.
    בנוגע למסך הפתיחה המעצבן - זה אכן דבר גרוע לעשות, אבל זה לא קשור ישירות לאתר המובייל, אלא לבחירה של בונה האתרים הספציפי. אני חושב שצריך לפתוח את האתר המוביילי ולאפשר לגולש לעבור בקלות לאן שהוא רוצה (כלומר, ממובייל לווב וחוזר חלילה).
    בנוגע לטאבלט, ובהנחה שהגולש יכול לעבור בקלות בין המופעים, אז האמת היא שלא ממש חשוב לאן את מכניסה אותו. אני לרוב מעביר אותו למובייל.
    את מוזמנת להיכנס לאתר שלנו, www.justdo.mobi, הוא עובד ככה.

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

    השבמחק
  6. שלום חברים, לבנות אתר רספונסיבי - זה ממש לא בעיה כבר... גוגל ממליצים על זה בחום, וכל העולם הולך לשם. המחירים יירדו בקרוב וזה הופך לסטנדרט.
    האם שמעתם על הכלי החדש (פיתוח ישראלי) להקמת אתרים רספונסיביים בקלות רבה?
    http://www.folyou.com/
    יופי של פתרון! באחלה מחיר. מה דעתכם?

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

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

      מחק
  8. שני אתרים, למובייל ולווב אינם דורשים דטהבייס כפול. אני מזמין אתכם לאתר של , ויש להביט בו מווב ומסמרטפון בשביל להבין שמדובר בשני אתרים שונים שמשתמשים באותו דטהבייס www.menagenet.co.il

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

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

    שגיא

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

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

    השבמחק