עיצוב רספונסיבי: כיצד להגיע נכון לראשונה

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


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

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

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

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

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

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

עיצוב מנצח

עיצוב רספונסיבי: מיצוי נכון

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

מדוע עיצוב רספונסיבי כל כך חשוב?

ישנם 2.1 מיליארד מנויים בפס רחב נייד.

87% מהמבוגרים האמריקנים מחזיקים טלפון סלולרי.

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

45% מהמבוגרים האמריקנים יש סמארטפון, 90% משתמשים בטלפון שלהם כדי להיכנס לרשת.

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

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

60% ממשתמשי הטאבלט מעדיפים לקרוא חדשות באינטרנט הנייד מאשר באמצעות אפליקציה.

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

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

74% מהמבקרים במובייל נוטשים אתר אם ייקח יותר מחמש שניות להורדה.

האנטומיה של אתר מגיב

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

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

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

The Masthead

כותרת עליונה

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

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

הלוגו

צריך להיות גדול יותר ולגדול עד לממדים הסופיים.

ניווט ראשוני

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

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

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

תיבת חיפוש

תיבת חיפוש מאפשרת למבקרים לקפוץ ישירות למה שהם מחפשים.

גלריית התמונות

ניווט תמונות

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

תמונות צריכות לקשר לעמיתיהם הגדולים יותר.

תמונת מוצר

הפוך את תמונת המוצר שלך למוקד הדף.

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

תיאור המוצר

סקירת מוצר

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

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

סקירת ספירה

ספירת הביקורת קופצת לביקורות שמתחת לפרטי המוצר.

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

שדה כמות, נפתחת גודל, והוספת כפתור לסל

כפתור השיתוף

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

הכותרת התחתונה

ניווט תחתונה

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

מספר שירות לקוחות ודוא”ל

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

חזרה לקישור העליון

שוב, הכל קשור לחוויית משתמש ונוחות!

מקורות

  • גיליון עובדות לטכנולוגיה ניידת – pewinternet.org
  • מגמות של שימוש באינטרנט נייד והתנהגות משתמשים – madmobilenews.com
  • MobiForge – mobithinking.com
  • מדוע 2013 היא השנה של עיצוב אתרים רספונסיבי – mashable.com
  • אנטומיה של עיצוב אינטרנט בעל תגובה ראשונה ניידת – bradfrostweb.com
  • כיצד רשתות נוזלים עובדות בעיצוב אתרים רספונסיבי – 1stwebdesigner.com
  • מעבר לשאילתות מדיה: אנטומיה של עיצוב אינטרנט אדפטיבי – slideshare.net
  • מה לעזאזל זה עיצוב רספונסיבי? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map