עיצוב מגיב / עיצוב גמיש מה זה? ואיך משתמשים בזה?
הטכנולוגיה של היום מחייבת אותנו המעצבים והמתכנתים כאחד לבצע התאמה ללקוחות שלנו להתקנים השונים, מה שמצריך מאיתנו לפתח ולעצב אתר שמותאם לאייפון ואתר שמותאם לאייפד, אנדרואיד,לפטופים,קינדל,מחשבים,טלווזיות וכד', אני חושב שמעולם סביבות העבודה שלנו לא היו מורכבת ומחולקת לכ"כ הרבה התקנים כמו היום (בעתיד זה בטח יהיה יותר מורכב).
אני מאמין שהמגמה תמשיך ותתפתח בשנים הקרובות לכיוון של התקנים נוספים וחדשים עם רזולוציות שונות ומגוונות, דבר שיחייב אותנו המעצבים והמפתחים לתלוש שערות ולהמשיך להתאים את האתרים לכ"כ הרבה רזולוציות והתקנים עד שבסופו של דבר אנחנו לא באמת נוכל להשתלט על כולם (דבר שקורה היום בקושי רב)
קודם כל לפני שנצלול למושגים ופילוסופיות, אז מה זה בעצם עיצוב מגיב או עיצוב גמיש?
עיצוב מגיב או עיצוב גמיש (Responsive Design) – עד היום לא בחרו שם רשמי בשפה העברית למונח הזה, מדובר בעיצוב שמגיב בהתאם לסביבה ורזולוציה שבה הגולש נמצא, לצורך העניין הרזולוציה במסך מחשב בגודל 22 אינץ שונה מהרזולוציה שיש באייפון / באייפד כנ"ל גם אם נטה את האייפון / אייפד לרוחב נקבל רזולוציה נוספת ולכן יש צורך לבצע התאמה של האתר להתקנים אלו כדי שאנחנו ההגולשים נוכל לנווט ולגלוש בקלות באתר מהתקנים השונים, את הזיהוי של ההתקנים מבצעים באמצעות שורת קוד ב-CSS, שיודעת לזהות מאיזה התקן ורזולוציה הגולש הגיע ובהתאם לכך לבחור את תצוגת האתר המתאימה ביותר.
קוד CSS לדוגמא:
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }
השאלה המתבקשת כעת היא מדוע שאנחנו נהיה מחוייבים ליצור תצוגה מותאמת אישית לכל קבוצת משתמשים שנכנסת לאתר שלנו מהתקן זה או אחר? למה לא להסתכל על האתרים שלנו בגישה של ארכיטקט שלא בונה בניין מותאם אישית לכל קבוצה של אנשים, אלא בונה אותו פעם אחת וזהו.
אז זהו שבמקרה שלנו הגישה היא קצת שונה, מפני שאנחנו לא רוצים להפסיד את הגולשים שלנו, ליצור עיצוב מגיב זה לא רק לבצע התאמה של התמונות , והטקסטים זה ליצור ממש סביבה חדשה שתתאים להתקן שממנו הגולש ניגש, לכל התקן יש את ההתנהגות והמבנה האופיינו לו, לדוגמא באייפון הכפתורים חייבים להיות עד גודל מינימלי מסויים כדי שהמשתמש יוכל להקליק עליהם.
שוחחו איתי אונליין
שימושון
תגיות
קישורים
- flashoo – קמפוס הפלאש הישראלי
- newsgeek
- אייל שחר מול המכונה
- אינטרנט ישראל
- אנטייטלד
- אסטרטגיה באינטרנט
- ארגון חווית משתמש הישראלי
- בלוג תוצרת הארץ – של נופר
- בניית אתרים
- בקופסא
- הבלוג של אלכסנדר יודייב
- הבלוג של אמיר דותן
- הבלוג של ארז וולף
- הבלוג של גיא בורשטיין
- הבלוג של ויטלי מיז’יריצקי
- הבלוג של חברת נטקראפט
- הבלוג של יוניש
- הבלוג של יוסי ג'אנה
- הבלוג של יעל קריידרמן
- הבלוג של מאור ברזני
- הבלוג של מורד שטרן
- הבלוג של ניר טובר
- הבלוג של רוני אורבך
- הבלוג של רן לירון
- הבלוג שעושה כבוד לקונספט
- המזלג
- המעצב בתחתונים
- וובמאסטר
- ויראליקס
- טיפים וטריקים לוורדפרס
- טיפים לחיפוש עבודה
- מברשות לפוטושופ
- מזבלה
- פיקסל פרפקט מגזין
- פרסי העיצוב וחווית משתמש
- פשוט שימושי – ברק דנין