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

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

עיצוב אתרים רספונסיביים – כיצד מיישמים?

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

1.  לימדו כיצד המבקרים שלכם משתמשים במובייל

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

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

2. תכננו את העיצוב שלכם קודם

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

   – Adobe Edge Reflow – הכלי של אדובי מאפשר לעצב חזותית אתר רספונסיבי על ידי המרת קבצי פוטושופ ל- HTML ו- CSS ומאפשר לכם להתאים את העיצוב באמצעות נקודות עצירה לנייד.
   – InVision – תודות ל- InVision אתם יכולים ליצור פרוטוטייפים אינטראקטיביים של האתר שלכם. משתמשים עם קישור יכולים לבדוק את הניווט, הכפתורים, הגלילה ועוד ולהשאיר לכם משוב. זהו כלי שימושי כדי לראות כיצד האתר שלכם יתנהג בהקשרים שונים.

   

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

3. היו זהירים עם אפשרויות הניווט באתר

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

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

4. בצעו אופטימיזציה של תמונות

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

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

   

5. שיקלו גישה ששמה קודם כל דגש על מובייל

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

6. למדו כיצד להשתמש בשאילתות מדיה

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

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

   @media screen and (min-width:500px) {
        
       your CSS rules here
    
   }

    

7. הוסיפו טריגרים של מקלדת בטפסים

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

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

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

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

   וודאו שקל לזהות את הכפתורים שלכם:

   – השתמשו בצבע כדי לגרום להם להתבלט משאר הדף.

   – השתמש במלבן או במעגל כדי לייצג את הכפתור.

   מבחינת הגודל, שקלו להשתמש ב- padding לכפתור שלכם כדי להגדיל את האזור הניתן ללחיצה. אתם יכולים גם לעקוב אחר המלצות עיצוב לנגישות כפתורים ולהבטיח שהם לפחות בגודל 36dp. (1dp = 1px).

9. אופטימיזציה של הטיפוגרפיה

   כשמדובר בטקסט, אתם רוצה לוודא שהטקסט קריא במסכים קטנים יותר. גודל טוב לגוף האתר הוא 16px או 1cm ואז התאימו את גודל הכותרות שלכם בהתאם. במקביל, תרצה להתאים את גובה השורה של הטקסט שלך ל- 1.5cm כדי להבטיח לשורות בפסקה מספיק מרווח.

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

10. השתמשו במיקרו אינטראקציות

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

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

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

    

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

    

11. אמצו Frameworks

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

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

    

12. היצמדו לעיצוב מינימליסטי

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

13. ודאו שכפתורי השיתוף שלכם לא חוסמים את התוכן שלכם

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

איך לבדוק אם האתר שלכם רספונסיבי

1. מבחן ידידיות לנייד של גוגל

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

2. Screenfly

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

   

3. MobileTest.me

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

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

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