מה זה עיצוב רספונסיבי? (וידאו מסביר ואינפוגרפיקה)
זה לקח עשור עד עיצוב אתרים מגיב (RWD) ללכת למיינסטרים מאז קמרון אדמס הציג לראשונה הרעיון ב-2010. הרעיון היה גאוני – למה אנחנו לא יכולים לעצב אתרים שיתאימו לנקודת התצוגה של המכשיר שבו הוא נצפה?
מה זה עיצוב רספונסיבי?
עיצוב אתרים רספונסיבי הוא גישה עיצובית המבטיחה שאתר אינטרנט מספק חווית צפייה מיטבית בכל מכשיר, ללא קשר לגודל המסך או הרזולוציה. זה כרוך בשימוש בפריסות גמישות, בפריסות מבוססות רשת ושאילתות מדיה כדי ליצור אתר שמתאים לגודל המסך שבו הוא נצפה. המשמעות היא שאתר המעוצב בעיצוב אתרים רספונסיבי ייראה ויתפקד היטב במחשב שולחני, טאבלט או סמארטפון.
במילים אחרות, ניתן להתאים אלמנטים כמו תמונות כמו גם את הפריסה של אותם אלמנטים. הנה סרטון שמסביר מהו עיצוב רספונסיבי ומדוע החברה שלך צריכה ליישם אותו. אם אתה מפתח עיצוב אתר חדש או אפליקציית אינטרנט, עיצוב אתרים רספונסיבי הוא חובה, לא אופציה, בהתחשב בכך שלמעלה ממחצית מכלל תעבורת האינטרנט מגיעה ממכשירים ניידים בעלי רוחב וגבהים משתנים של יציאות התצוגה.
עיצוב רספונסיבי הוא אופטימלי גם עבור מעצבי אתרים, שאינם צריכים לבנות חוויות עצמאיות שהן ייחודיות על בסיס המכשיר או התצוגה. ניתן לבצע עיצוב אתרים רספונסיבי באמצעות CSS.
עיצוב רספונסיבי CSS Viewport שאילתות
הנה דוגמה לגיליון סגנונות שמתאים את גודל הגופן על סמך נקודת התצוגה באמצעות שאילתת מדיה:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
הדפדפנים מודעים לגודלם והם טוענים את גיליון הסגנונות מלמעלה למטה. על ידי שאילתת הסגנונות הרלוונטיים לגודל המסך, תוכל להגדיר אלמנטים עיצוביים ספציפיים עבור כל רוחב מכשיר מינימלי ומקסימלי. זה לא אומר שאתה צריך לעצב אתרים שונים עבור כל מסך בגודל, אתה רק צריך לשנות את האלמנטים הדרושים באמצעות שאילתות המדיה.
הפעלה עם מנטליות ראשונה לנייד היא הסטנדרט הבסיסי כיום. המותגים הטובים ביותר חושבים לא רק אם האתר שלהם ידידותי לנייד אלא על חווית הלקוח המלאה.
לוסינדה דאנקלף, מנכ"לית מונטייט
הנה אינפוגרפיקה מאת מונטייט הממחיש את היתרונות הפוטנציאליים של יצירת עיצוב מגיב אחד עבור מכשירים מרובים:
האם האתר שלך רספונסיבי?
דרך פשוטה אחת לראות אם האתר שלך רספונסיבי היא פשוט להגדיל או לכווץ את חלון הדפדפן שלך כדי לראות אם האלמנטים זזים בהתבסס על רוחב הדפדפן.
ליתר דיוק, כוון את שלך Google Chrome דפדפן לאתר שלך. בחר צפה> מפתח> כלי מפתח מהתפריט. פעולה זו תטען חבורה של כלים בחלונית או בחלון חדש. לחץ על הסמל הקטן משמאל לשורת התפריטים של כלי המפתחים שנראה כמו סמל נייד וטאבלט. אתה יכול לבחור כמה מכשירים סטנדרטיים ואפילו לשנות אם ברצונך להציג את הדף אופקית או אנכית.
אתה יכול להשתמש באפשרויות הניווט למעלה כדי לשנות את התצוגה מנוף לדיוקן, או אפילו לבחור מספר כלשהו של גדלי תצוגת תצוגה מראש. יתכן שתצטרך לטעון מחדש את הדף, אבל זה הכלי הכי מגניב בעולם לאימות ההגדרות הרספונסיביות שלך ולהבטיח שהאתר שלך נראה נהדר בכל המכשירים!