לספק למשתמשים חווית משתמש אופטימלית במספר רב ככל האפשר של סוגי מכשירים.
יתרונות אתר web רספונסיבי על גבי פיתוח אפליקציה:
אין תלות בחנות האפליקציות (אישורים / עדכונים).
פתרון "אחד" לכל סוגי המכשירים – כתיבת קוד במקום אחד שיתאים לכל סוגי המכשירים.
פתרון זול הרבה יותר מפיתוח אפליקציה.
מתאים לשימוש מזדמן.
ללא התקנה ומאמץ מהמשתמש.
רוב המשתמשים אינם מודעים להבדלים בין פתרונות הweb השונים.
פתרון אדפטיבי:
השרת מנתב את המשתמש לאתר המתאים לו לפי סוג המכשיר – האתר יכול להיות שונה לחלוטין.
עובדים על שתי מערכות שונות מבחינת התוכן. במובייל התוכן יהיה קצר יותר מבדסקטופ.
מדובר בשני אתרים – url שונה.
פתרון רספונסיבי:
כאשר הדפדפן מציג את האתר התצוגה משתנה על פי גודל ה-viewport בעזרת breakepoints. אותו url – מערכת אחת. זה אותו האתר עם הגדרות שונות בקוד css.
(יש אתרים המשלבים אדפטיבי ורספונסיבי. אדפטיבי מנקודת שבירה מסוימת).
הגלישה תהייה מהירה יותר באדפטיבי כי מדובר במערכות שונות ונפרדות למובייל ולדסקטופ.
החסרון הוא שצריך לעדכן תמיד שני אתרים שונים.
עדיף שלא להחסיר תכנים ופונקציונליות בגרסת המובייל אלא ליצור היררכיה עמוקה יותר.
יש מידע שנכון יותר לדסקטופ ויש מידע שנכון יותר למובייל.
גם בעיצוב רספונסיבי ניתן להסתיר חלונות מהדף אבל עדיף לתת אופציה למשתמש להציג אותם.
מתי נשתמש באיזו טכנולוגיה?
אדפטיבי מתאים לשירותי מידע, אינדקסים, פלטפורמת עבודה (מערכות ניהול עובדים / ניהול פרויקטים), רשתות חברתיות, מוצרי saas (אפליקצית web).
רספונסיבי מתאים לE-COMMERCE וקטלוגים, אתרי תוכן ובלוגים, אתרים תדמיתיים.
מתי אתר רספונסיבי לא מתאים?
תעדוף שונה של פיצ'רים בין מכשירים שונים.
צורך שונה במובייל.
כשיש צורך להשתמש ביכולות המובייל כמו מצלמה / GPS וכדומה – אז נעדיף אפליקציה.
קיפול עמודות:
סדר הקיפול וההיררכיה בין העמודות הוא המפתח.
לא תמיד הסדר במובייל הוא כמו בדסקטופ מבחינת חשיבות האלמנטים.
תעדוף ביחס לגלילה – איזה מהטורים פחות חשוב למשתמש ולכן יהיה הראשון "להתקפל" למטה ובאיזה מהם נעדיף "לדחות" את הקיפול.
טפסים:
בחירת picker (פקד) מתאים עבור כל שדה. כמו סליידר במקום דרופ-דאון לבחירת גיל לדוגמא.
הגדרת סדר לוגי לשדות על מנת לאפשר מעבר ללא פתיחה מחדש של המקלדת (כפתור "הבא" כבר במקלדת).
הקלדה היא פעולה לא נעימה במסך מגע קטן, עדיף להשתמש בהשלמה אוטומטית.
ברוחב מסך צר – לא יותר משני פקדים.
יש להתחשב בכך שבמסכי מגע חצי מהמסך מוסתר כשהמקלדת פתוחה. לדוגמא יש לבדוק האם בזמן מילוי שדה טקסט אחרון כפתור השליחה גלוי.
עדיף לא להשתמש בdropdown במובייל – הוא מסתיר את המסך.
אם בחרתם להסתיר פילטרים, יש להוציא החוצה את הנפוצים ביותר.
כל מה שנוגע לטפסים רלוונטי גם לרכיבי הפילטור.
מכיוון שבחירות הפילטור אינן מוצגות – יש להציג למשתמש חיווי.
אפשר לשים שני פקדים מרכזיים של טאבים ופילטורים נוספים יופיעו תחת כפתור more שבלחיצה יפתחו
יש להקפיד על סריקת (scanability).
היררכיה ו-Nesting של עמודות.
במובייל משאירים את העמודות החשובות ביותר ובלחיצה על כפתור כמו desplay יוצגו עוד עמודות ואפשר להקפיא את העמודה הראשונה החשובה ביותר.
כשיש מעט עמודות אפשר להפוך את הסדר ממאוזן למאונך.
הפתרון הקל הוא להסתיר את הניווט אך יש לזה חסרונות רבים.
ניתן לשלב במידה וההיררכיה נשמרת בין נקודות השבירה.
לכן נשתדל לדחות את המעבר לניווט נסתר למסכים הקטנים ביותר אם בכלל.
הפרדה בין ניווט ופעולות עוזרים ליצירת נקודות שבירה הגיוניות יותר.
callapsed- אפשר גם להסתיר מידע ובלחיצה על + יפתח מידע נוסף.
מספר המילים האופטימלי בשורה למובייל – 9 מילים.
מספר המילים האופטימלי בשורה לדסקטופ – 14 מילים.
