מהו עיצוב אתרים רספונסיבי?

שתף פוסט זה

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב twitter
שיתוף ב email
0
(0)

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

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

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

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

פורסם על ידי Dennis L Myers
אין לנו אחריות על המידע בפוסט זה

כמה שימושי היה הפוסט?

לחץ על כוכב כדי לדרג אותו!

דירוג ממוצע 0 / 5. ספירת קולות: 0

אין הצבעות עד כה! היה הראשון לדרג את הפוסט הזה.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

הצטרף לדיוור שלנו

קבל ראשון את העדכונים

פוסטים נוספים

כללי

ניסיון טקסט נגלל

5 (2) רב טקסט בוורדפרס מתני' מאימתי קורין את שמע בערבין. משעה שהכהנים נכנסים לאכול בתרומתן עד סוף האשמורה הראשונה דברי ר' אליעזר. וחכמים אומרים

מעצבים עם אלמנטור: תפריט וואן פייג'

5 (1) בסרטון הזה נראה איך לעצב תפריט צד דביק באתר וואן פייג' עם אלמנטור (תוכן זה מוגש כאן מתוך אתר יוטיוב והזכויות שמורות למעלה

16 שינוי צבעי ברירת המחדל של אלמנטור

0 (0) (תוכן זה מוגש כאן מתוך אתר יוטיוב והזכויות שמורות למעלה ההרצאה ליוטיוב) כמה שימושי היה הפוסט? לחץ על כוכב כדי לדרג אותו! שלח

האם אתה רוצה להגביר את העסק שלך?

שמור על קשר

X
wpChatIcon
X

הוסף את שאלתך

האתר בבניה

הכניסה ליוצרים בלבד

כבר רשום?