עיצוב רספונסיבי : טעויות נפוצות ואיך להימנע מהן

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

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

יש הבדל בין אתר מותאם גלישה (אתרי מובייל, Mobile web) לבין אתר רספונסיבי. אני אשמח לעשות לכם סדר בבלאגן וגם לשתף אתכם בכמה טעויות בסיסיות שכדאי להימנע מהן כשמעצבים ומאפיינים מוצרים רספונסיביים.

עיצוב רספונסיבי: הגדרה ועקרונות מנחים

עיצוב רספונסיבי, ידוע גם כ-RWD) Responsive web design), הוא למעשה גישה לפיתוח מערכות web שיוצרת שינויים דינמיים למבנה האתר (או כל מוצר web) כתלות בגודל המסך והשימוש בו. מה שהתחיל כדרך נכונה יותר לכתוב קוד הפך לפתרון קונבנציונלי בתהליכי העבודה היום. למרות שיש שיטות עבודה שונות ותוצרים רספונסיביים שונים, יש כמה עקרונות שמייחדים את העיצוב הרספונסיבי:

דף אחד לכל הפלטפורמות

קובץ HTML אחד לכל המכשירים. כלומר, אין פיצול בקבצים בין המסכים. ההבחנה מתבצעת דרך קובץ ה- CSS, כך שאין עיצוב למכשיר ספציפי, מה שמאפשר לאתר להיות מותאם לכל מכשיר שקיים בשוק היום ויהיה קיים בעתיד (במגבלות ההגיון).

תוכן 

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

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

בנייה לפי יחס

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

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

לדוגמה, הבלוג של Create שעובר מיחס חצי לפריסת מסך מלאה:

נקודות שבירה

הנקודה שבה אנו עושים שינוי משמעותי בקוד האתר. בדרך כלל מדובר בנקודה שבה אנו מחליפים את התפריט המלא בתפריט המובייל. בעבר היו בין 2-4 נקודות שבירה באתרים הרספונסיביים אך מכיוון שכל נקודת שבירה מוסיפה סיבוכיות ועבודת פיתוח, ננסה לעבוד עם מינימום נקודות שבירה. לרוב נסתפק בנקודת שבירה אחת באיזור רוחב 700 פיקסלים במעבר בין הדסקטופ למובייל.

בדוגמה: אתר עם נקודת שבירה אחת

גודל מקסימלי ומינימלי

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

בדוגמה: אורך שורה קבוע ללא הבדל בין דסקטופ למובייל

האם בכל מצב נבחר בעיצוב רספונסיבי?

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

כאשר הפלטפורמות דומות מאוד

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

כאשר אין לנו צורך בפלטפורמה נוספת
אם אנו יכולים לדעת מראש (ברמה גבוהה של סבירות) שאין לנו צורך בעוד פלטפורמות, לדוגמה: מערכת web שמשתמשים בה ככלי עבודה רק ממסכי דסקטופ או אתר שגולשים אליו אך ורק דברך המובייל.

למה לא כדאי לוותר על עיצוב רספונסיבי

חשוב לציין תחילה שגוגל החלו לתת עדיפות בחיפוש לאתרים שהם Mobile friendly. כלומר אתר לא רספונסיבי פוגע במאמצי הקידום שלו. גם אם מדובר באתר מובייל נוסף, כלומר- אתר נוסף המותאם למובייל שאליו יגיעו המשתמשים שגולשים דרך מכשירי המובייל (בדרך כלל בתצורת: m.website.com) .

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

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

טעויות נפוצות בעיצוב רספונסיבי

1# עיצוב Desktop First

אולי אחת הטעויות הנפוצות ביותר בתכנון אתרי אינטרנט.

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

אם התכנון של האתר יתחיל להתקדם מהסביבה הקטנה וממנה למסכים גדולים יותר, ניתן יהיה לייצר בסופו של דבר מוצר מדויק ומצומצם יותר שסביר להניח שישיג את המטרות טוב יותר. למה? רק בגלל העובדה שבתור בני אדם קשה לנו לוותר על תוכן (אבל מאוד קל להוסיף), וכאשר נתחיל בגרסה המצומצמת נוכל לייצר מוצר חד שלא נאלץ לדחוס אליו תוכן שהיה כבר בפלטפורמות הרחבות יותר.

2# להסתפק בלהקטין ולמקם מחדש

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

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

3# לא להתחשב במגבלות וביכולות של מכשירי המובייל

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

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

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

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

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

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

4# לא להתחשב ביכולות גלישה

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

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

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

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

בנוסף, גוגל החלו ב-2010 לדרג אתרים לפי מהירות עליית האתר. קיים שפע של כלים ברשת שבודקים מהירות טעינה. גם לגוגל יש כלי בשם PageSpeed Insights שמיועד לבחון ביצועים באתרי דסקטופ וגם במובייל. אם האתר שלך עובד טוב בדסקטופ, זה לא אומר בהכרח שהוא יעבוד באותה צורה בסביבה של המובייל. בכלי של גוגל אגב, השאיפה היא לציון של 85 לפחות. 

5# הסתרת תוכן

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

בנוסף, הסתרת תוכן יכולה להשפיע על הנושאים הבאים:

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

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

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

6# להתעקש על ניווט אחיד בכל המסכים

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

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

לדוגמה: ההבדל בהתנהגות ובאפיון התפריט באתר זאפ – גרסת המובייל אל מול גרסת הדסקטופ

לסיכום

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

אהבתם את הפוסט? אולי תאהבו גם את עמוד הפייסבוק שלנו, אנחנו מעלים טיפים יומיים על נושאים שמרגשים אותנו.

• mobile first
• responsive design
• עיצוב רספונסיבי