חנות וירטואלית בעיצוב רספונסיבי מה זה ואיך זה עוזר לנו?

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

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

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

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

דוגמה לעיצוב רספונסיבי /Responsive‏‏  שלצידו עיצוב חנות וירטואלית מותאם לסמרטפון (העיצוב המותאם לסמרטפון יוצג גם בטבלט)
     

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

נו אז איפה עניין עיצוב רספונסיבי ???

הצורך נולד כאשר אפל פתחו עידן חדש ויצרו את המסך מגע הנייד או בשמו אייפד iPad  של אפל או טבלט בשמו של מותג כללי כאן כבר עיצוב בסמרטפון לא ממש מספיק המסך הרבה יותר גדול 10 אינצ’ ותצוגה של  גרסת סמרטפון לא נראת טוב בטבלט / אייפד והאתגר רק המשיך כי צצו מידות שונות כגון 7 אינצ 8 אינצ ועוד…

ואז החל התכנות הרספונסיבי שאגדיר אותו במשפט אחד

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

  • בחודש אוגוסט 2015 גוגל פרסם כי הוא נותן העדפה גבוהה לבעלי אתר רספונסיבי על פי אתרים אחרים

 סרטון ווידאו קצר שיסביר מהו עיצוב רספונסיבי ומה חשיבותו

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

בחנות וירטואלית שיש לה תמונות אווירה מתחלפות מה שמכונה סליידר בטבלט  10 אינצ וב-7אינצ  הם יוקטנו אך יוצגו לגולש

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

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

טבלט שמציג עיצוב רספונסיבי עמוד ראשי (עיצוב בשם פסטל + )

טבלט שמציג עיצוב רספונסיבי עמוד מוצר (עיצוב בשם פסטל + )

עיצוב רספונסיבי עמוד מוצר חנות וירטואלית

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

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

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

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

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

אייל ביטון

מומחה להגדלת מכירות לעסקים באינטרנט

 

לא ניתן להגיב.