מדריך לעיצוב אתרים רספונסיבי ושיטות עבודה מומלצות

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


תכנון לעיצוב אתרים רספונסיבי

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

מהו עיצוב רספונסיבי?

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

דוגמה לעיצוב אתרים מגיב

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

השוואה RWD של מסך שולחן עבודה וטלפון חכם

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

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

שימוש בעיצוב אתרים מגיב למלוא הפוטנציאל שלו

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

  • אל תציע למשתמשים ניידים גרסה מופשטת של אתר שולחן העבודה שלך, שם הם מוגבלים לשימוש. טיפ: המשך לעקוב אחר הפעולות של המשתמשים הסלולריים באתר שלך. אם אתה מבחין שמשתמשים נוחתים באתר שלך אך כמעט ואינם צורכים את התוכן שלך או לא מבזבזים עליו זמן, רוב הסיכויים שהם יתקלו בסוג של חסימת דרך.
  • אל תספק למשתמש הנייד בדיוק באותו אופן שמשתמש בשולחן העבודה. נצלו את מלוא הפוטנציאל שמציע מכשיר נייד. לדוגמה, אם אתה הבעלים של מסעדה, הקל על לקוחות ניידים באופן קל מאוד לאתר את העסק שלך או לבצע הזמנה על ידי מינוף העוצמה של טכנולוגיות כמו מיקום גיאוגרפי HTML5 ו כניסות מספר טלפון באתר שלך.
  • להיות מודע אליו מהירות העמוד. על פי מחקר של ה- קבוצת נילסן נורמן, יועצי חוויית משתמש מובילים, 47% מהמבקרים צופים כי אתר אינטרנט יטען בפחות משתי שניות, ו -40% מהמבקרים יעזבו את האתר אם תהליך הטעינה יימשך יותר משלוש שניות. זה ביתר שאת כשמדובר במשתמשי מובייל, הנמצאים בתנועה ולעתים קרובות יש מגבלות רוחב פס.
  • להיות מודע ל תוכן שאינו ניתן להפעלה. טכנולוגיות מסוימות כמו נגני Flash אינן נהנות מתמיכה רחבה במכשירים ניידים. לכן מומלץ שלא להשתמש בהם באתר האינטרנט שלך ולהימנע מקישור אליהם מהדפים שלך. וידאו ושמע HTML5 הם ללא ספק אפשרות טובה בהרבה על פני טכנולוגיות קנייניות. כדאי להוסיף תעתיק של תוכן הווידיאו שלך. למעשה, מספר משתמשים עשויים להעדיף תוכן כתוב על פני וידאו או שמע, טכנולוגיות מסייעות מסוימות יכולות לעבוד רק על חומר כתוב וגוגל יכולה להשיג טוב יותר נתונים על תוכן הווידיאו או האודיו שלך..
  • להימנע מלהשתמש דיאלוגים וקופצים שמונעים ממשתמשים לראות או לתקשר עם התוכן שלך. לעתים קשה גם לסגור את אלה במכשירים ניידים שבהם הנדל”ן למסך מוגבל, מה שגורם לתסכול עבור הלקוחות שלך.
  • שלם תשומת לב למגע! אם האתר שלך מסתמך על אירועי ריחוף עם העכבר כדי לחשוף תוכן מוסתר, פונקציונליות זו לא תפעל בנייד. מכשירים ניידים אינם פועלים עם עכבר. במקום זאת, משתמשים מתקשרים עם תוכן באמצעות תנועות מגע כמו הקשה והחלקה. לכן בחר לחשוף תוכן מוסתר על ידי לחיצה במקום על ריחוף על העכבר. כמו כן, וודא שעיצוב אתר האינטרנט שלך אחראי לעובדה שקצות האצבעות גדולים יותר ממצביע עכבר על ידי כך שתאפשר מספיק מקום לקיים אינטראקציה עם קישורים בדף שלך בנוחות וחלק.

היתרונות של אתר RWD

ראשית כל, גוגל ממליץ במפורש על גישת ה- RWD לאתר ידידותי לנייד. יתרונות נוספים של RWD הם:

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

האם האתר שלך מגיב? תבחן את זה!

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

סיכום

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map