חדש! תכנית ׳ריאליטי ווב׳ - דוקו שדרוג אתר כבר באוויר! בואו לצפות בחלק הראשון

מדריך אלמנטור, שיר ויצמן, מדריך וורדפרס, אלמנטור פרו, אלמנטור למתחילים

שיעור 5: עיצוב רספונסיבי ואיך לעצב אתר מותאם למובייל

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

לצפייה בסרטון (אותו התוכן כמו במאמר, רק בוידאו):

שיעור 5: עיצוב רספונסיבי ואיך לעצב אתר מותאם למובייל

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

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

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

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

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

איך ליצור עיצוב רספונסיבי בקלות?

בעזרת אלמנטור, נוכל ליצור עיצוב מותאם עבור כל המכשירים, בעזרת שימוש ביחידות מידה רספונסיביות, כמו למשל VH, VW, EM ועוד. 

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

אז…. Let’s Go!


גישת Mobile First

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

את המונח Responsive Web Design או בקיצור RWD, טבע איתן מרקוט והגדיר את פירושו במאמר שפורסם במאי 2010 באתר A List Apart.

את התיאוריה והפרקטיקה של עיצוב אתרים רספונסיבי הוא תיאר בספרו הקצר של 2011 שכותרתו היא איך לא – Responsive Web Design.

יש הגיון רב בשיטה זו, שהרי היום רוב הכניסות לאתרים מסויימים (בחלקם מעל 90%) הן מהמובייל. 

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

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

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

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


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

חדשות בוורדפרס? קבלו את המדריך המלא לבניית אתרים – מדריך וורדפרס למתחילים.

עוד במדריך
פוסטים אחרונים

חלק 1 פרק 4 – יצירת צ׳קליסט והצבת דד-ליין לפרויקט

חלק 1 פרק 3 – הצבת מטרות ויצירת תכנית פעולה

חלק 1 פרק 2 – סקר לקוחות

חלק 1 פרק 1 – למי התכנית מתאימה?

שיעור 15 – קידום בגוגל ויוטיוב – חוזרים להתחלה

שיעור 14 – ניתוח נתונים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *