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

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

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

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

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

ויקיפדיה

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

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

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

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

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

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

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

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

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

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

תגובות 3

  1. 1
  2. 2

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

    • 3

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

מה אתה חושב?

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