מה זה עיצוב רספונסיבי? (וידאו מסביר ואינפוגרפיקה)

עיצוב אתרים מגיב

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

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

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

ויקיפדיה

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

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

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

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

לוסינדה דאנקלף, מנכ"לית מונטייט

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

עיצוב אתרים רספונסיבי אינפוגרפי

אם תרצה לראות אתר רספונסיבי בפעולה, הכוון את שלך Google Chrome דפדפן (אני מאמין של- Firefox יש את אותה תכונה) Highbridge. עכשיו בחר צפה> מפתח> כלי מפתח מהתפריט. זה יטען חבורה של כלים בתחתית הדפדפן. לחץ על סמל הנייד הקטן שמאלה לסרגל התפריטים כלים למפתחים.

בדיקת תגובה-כרום

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

תגובות 3

  1. 1
  2. 2

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

    • 3

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

מה אתה חושב?

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