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

לפני שנים, כשהטכנולוגיה הייתה מה שהייתה, צריך רק לדאוג שהדברים הוויזואליים שהיא עשתה (תמונות, משחקים, ממשקי יישומים, ...) נראו טוב על מסך שיכול להיות בסביבות 14 אינץ 'מ- לפקח מ מַחשֵׁב. אבל ה אבולוציה זה היה בלתי ניתן לעצירה, ויש לנו כיום שפע של מכשירים ופורמטים.

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

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

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

בואו נחשוב על מגוון פורמטי מסך החל מסמארטפון עם מסך בגודל 5 אינץ 'ויחס 18: 9 שניתן לקרוא אנכית לטלוויזיה 16: 9 40 ", ומשאירים מחשב או טאבלט בין לבין.

עד שננקטו צעדים להכנת הממשק

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

הכלים להשגת עיצוב רספונסיבי, שיתאים לפורמט המסך בו נראית התמונה. אתר אינטרנט ללא קשר למה היה פורמט וגודל המסך הזה, נקבעו על ידי W3C (World Wide Web) תאגיד).

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

אלה מאפשרים לך לשנות את המראה של אתר שלם (המובן כמערכת דפים) מבלי לגעת ב- קוד מקור כל קבצי ה- HTML מכיוון שהוא שונה מהן הגדרות הסגנון והמצגת (הכלולות ב- קוֹבֶץ CSS) של התוכן (נמצא בקבצי HTML).

אלמנטים של עיצוב רספונסיבי דנו והוצגו בתקני האינטרנט על ידי W3C מאז סוף העשור הראשון של המאה ה -21.

זה מ לְהַשִׁיק של האייפון הראשון, בשנת 2006, בו המירוץ שוחרר להתאמת אתרי האינטרנט כך ניתן לראות בצורה מושלמת הן בדפדפנים שולחניים והן במסכים גדולים, כמו גם במכשירים ניידים.

תמונות פוטוליה: אלכסיי שקיטנקוב / בוב קליסורסקי

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