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

שתף פוסט זה

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

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

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

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

היסודות של אתר רספונסיבי הם:

  • HTML 5 ו- CSS3
  • שאילתות מדיה
  • תמונות ומדיה גמישים, באמצעות שינוי גודל אוטומטי או CSS
  • פריסה מבוססת רשת גמישה המשתמשת בגודל CSS יחסית

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

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

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

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

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

פורסם על ידי Adam Gillis
אין לנו אחריות על המידע בפוסט זה

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

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

דירוג ממוצע 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

הוסף את שאלתך

האתר בבניה

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

כבר רשום?