חיפוש
be wiser coding logo
  • בניית אתרי ווקומרס
  • תחזוקת אתרי וורדפרס
  • בלוג וורדפרס
  • אתרי תדמית
  • אחסון אתרים
  • פורטפוליו תיק עבודות ופרויקטים
  • קשר
תפריט
  • בניית אתרי ווקומרס
  • תחזוקת אתרי וורדפרס
  • בלוג וורדפרס
  • אתרי תדמית
  • אחסון אתרים
  • פורטפוליו תיק עבודות ופרויקטים
  • קשר
חיפוש
  • בניית אתרי ווקומרס
  • תחזוקת אתרי וורדפרס
  • בלוג וורדפרס
  • אתרי תדמית
  • אחסון אתרים
  • פורטפוליו תיק עבודות ופרויקטים
  • קשר
תפריט
  • בניית אתרי ווקומרס
  • תחזוקת אתרי וורדפרס
  • בלוג וורדפרס
  • אתרי תדמית
  • אחסון אתרים
  • פורטפוליו תיק עבודות ופרויקטים
  • קשר

בניית אתרים רספונסיביים

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

בניית אתרים רספונסיבים

בניית אתרים רספונסיביים

  • מחבר: מיכאל דהן
  • פורסם: מרץ 29, 2021
  • תגיות: wordpress - מדריך

בניית אתר רספונסיבי, מה אומר המונח "רספונסיבי" בהקשר של בניית אתרים? נספק לכם תשובה לשאלה זו ואחרות.

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

תוכן עניינים

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

מה זה אומר למעשה?

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

"עיצוב אתר רספונסיבי", מה זה אומר למעשה?

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

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

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

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

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

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

MEDIA QUERIES

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

@media screen AND (max-width: 991px) {
h1 { font-size: 14px; }
}

"max-width" & "min-width"

max-width – הכוונה היא שעד אותה נקודת שבירה המצוינת בפיקסל(991px), יש להכיל את הגדרות העיצוב הנמצאות בתוך הגדרת ה media query עצמה.(דוגמה עליונה)

min-width – הכוונה היא להכיל את הגדרות העיצוב שבתוך ה media query במסכים שמעל לפיקסל המצוין(992px) בנקודת השבירה.

@media screen AND (min-width: 992px) {
h1 { font-size: 16px; }
}

מידות: px | em | rem | vw & vh | %

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

  • px – פיקסל היא המידה הבסיסית ביותר והיא מציינת פיקסל אחד בלבד. מידת הפיקסל תמיד תהיה פיקסל, ללא חשיבות לרוחב המסך. טקסט בגודל 10PX תמיד יהיה באותו הגודל של 10PX.
p {
font-size: 10px;
}
  •  vw & vh – או VIEWPORT WIDTH OR VIEWPORT  HEIGHT – מידה זו משתנה בהתאמה לרוחב או גובה המסך, 1vw שווה 1% מרוחב המסך או בערך 4.8 פיקסלים. 1vh שווה ל 1% מגובה המסך או בערך 8 פיקסלים.
p {
font-size: 10vw;
}
  • em & rem – שתי מידות אלו שוות 16PX לכל מידה אחת, 1EM שווה 16PX. כנ"ל לגבי 1REM, REM שווה 16PX. על אף המידות הדומות, השוני מתבטא ב"ירושה" שמדות אלו מקבלות מאלמנטים אשר נמצאים גבוה יותר מבחינה היררכית. REM משתמש ב ROOT על מנת לקבל את המידה של האלמנט כאשר EM מסתמך על אלמנט האב על מנת לקבוע את גודל הפונט.
p {
font-size: 10em;
}

p {
font-size: 10rem;
}
  • % – כנראה המידה הברורה והשימושית ביותר לאלמנטים שלא מסוג טקסט, מידה זו היא המידה הנפוצה ביותר בכל האלמנטים, מתמונות ועד פריסת עמודים שלמים. תמונה אשר מוגדרת לרוחב של 100% תמיד תהיה 100% מרוחב האלמנט שבתוכו היא נמצאת, מה שהופך אותה לרספונסיבית במאה אחוז.
img {
width: 100%;
}

BREAKPOINTS

על המושג "נקודות שבירה" או "break points" שמעתם? פלטפורמות שונות ובוני דפים כמו אלמנטור ואחרים וגם מסגרות עבודה שונות (BOOTSTRAP) נסמכות על נקודות עצירה קבועות מראש. נקודת עצירה(במקרה הזה) מבוססת על רוחב מסך שנקבע מראש על ידי המתכנת בונה האתר, בדרך כלל בעזרת קנה המידה "פיקסל".

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

שווה קריאה! למדו כיצד לשנות את נקודות השבירה של אלמנטור בכמה צעדים פשוטים בעזרת המדריך הזה »

טבלה הממחישה את נקודות השבירה ב bootstrap4  לעומת גרסא 3 הישנה. 

  • ראשית קיימת נקודת עצירה למסכים שונים עד רוחב 576 פיקסלים, כל מסך שנופל להגדרה זו יקבל את אותה טבלת עיצוב.
  • שנית, נקודת עצירה השייכת למסכים מעל 576 פיקסלים ומתחת ל 768פיקסלים.
  • שלישית, טווח התצוגה לטאבלטים ומחשבים ניידים קטנים מתחיל ב 769 פיקסלים ומסתיים ב 992 פיקסלים.
  • רביעית, טווח תצוגה שבין 992 פיקסלים ל1200 פיקסלים, בדרך כלל למחשבים ניידים וטאבלטים גדולים.
  • הטווח החמישי והאחרון הוא? ניחשתם נכון! 1200 פיקסלים ומעלה. כל מכשיר שיפול לטווח הזה יקבל את אותה טבלת העיצוב.

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

נקודות עצירה של מסגרת העבודה של BOOTSTRAP 4
נקודות עצירה של מסגרת העבודה של BOOTSTRAP 4

 

חדש! גרסא 5 של BOOTSTAP יוצאת לדרך.

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

  1. שימוש בג'אווה סקריפט והפחתת התלות ב JQUERY
  2. שימוש במשתנים בהגדרות CSS
  3. הסרת התמיכה בדפדפני אינטרנט אקספלורר בגרסאות 10 ו- 11
  4. הרחבת פלטת הצבעים
  5. הגדרות חדשות לטפסים(FORMS)
  6. שינויים במערכת הגריד(GRID SYSTEM)
  7. הרחבת התמיכה לשפות RTL
  8. ספריית אייקונים חדשה
  9. מעבר ל POPPERS V2

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

בניית אתרים רספונסיביים בעזרת אלמנטור

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

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

 

מיכאל דהן
מיכאל דהן
מתכנת PHP/JAVASCRIPT בסביבת וורדפרס עם ארבע שנות ניסיון ומעל ל 150 אתרים ופרויקטים שהסתיימו בהצלחה. מפתח אפליקציות רשת ומערכות תוכן עם ספריית Node.JS ושרת Express ובעל ידע נרחב בבסיסי נתונים SQL/NOSQL.
כל הפוסטים

רוצה להתעדכן עם המדריכים שלנו?

לחץ CTRL+D והוסף אותנו למועדפים

מאמרים נבחרים
מפת אתר XML (sitemap) מה זה מפת אתר
הוספת כפתור וואטסאפ לאתר – למה ואיך
אתרים למסחר בזאפ
אתר קטלוג מוצרים
אחסון אתרי וורדפרס – 4 חברות הטובות ביותר 2021
בניית אתרי תדמית
שינוי פריסת עמודים באלמנטור
כלי גוגל לקידום אתרים
קישורים נפוצים
פיתוח אפליקציות רשת
wordpress מדריך
פרויקטים
תנו לנו לייק

חברת Be Wiser Coding

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

תוייגwordpress - מדריך

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

שלח/י הודעה מהירה ונחזור אליך עוד באותו היום
לחיוג ישיר
חייגו עכשיו 08-855-4672
מאמרים מובילים
  • בניית אתרים רספונסיביים
  • מדריך אלמנטור
  • כלי גוגל לקידום אתרים
  • בניית אתר קטלוג
  • הוספת כפתור וואטסאפ לאתר
  • אתרי תדמית
  • אחסון אתרי וורדפרס – חברות מומלצות
תפריט
  • בניית אתרים רספונסיביים
  • מדריך אלמנטור
  • כלי גוגל לקידום אתרים
  • בניית אתר קטלוג
  • הוספת כפתור וואטסאפ לאתר
  • אתרי תדמית
  • אחסון אתרי וורדפרס – חברות מומלצות
be wiser coding logo

Be Wiser Coding תיכנות מתקדם לחברות ופרטיים

שירותים נבחרים
  • תחזוקת אתרי וורדפרס
  • בניית אתר ווקומרס
  • אחסון אתרים מומלץ בישראל
  • פורטפוליו | פרויקטים
  • אתרים למסחר בזאפ
תפריט
  • תחזוקת אתרי וורדפרס
  • בניית אתר ווקומרס
  • אחסון אתרים מומלץ בישראל
  • פורטפוליו | פרויקטים
  • אתרים למסחר בזאפ

נבנה ועוצב על ידי © BE WISER CODING