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

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

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

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

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

תוכן עניינים

1. "עיצוב אתר רספונסיבי", מה זה אומר למעשה?
2. איך הגדרות CSS תורמות לרספונסיביות של האתר?
3. בניית אתרים רספונסיביים והגדרות CSS נפוצות
   1. MEDIA QUERIES
   2. "max-width" & "min-width"
   3. מידות: px | em | rem | vw & vh | %
   4. BREAKPOINTS
4. טבלה הממחישה את נקודות השבירה ב bootstrap v5  לעומת bootstrap v-4.
5. גרסה 5 של BOOTSTAP יוצאת לדרך.

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

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

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

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

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

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

להמלצות על דפדפנים עברו למאמר Chorome vs Firefox.

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

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

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

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

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

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

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

MEDIA QUERIES

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

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

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

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

"max-width" & "min-width"

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

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

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

max width AND min width – ניתן להוסיף הצהרות CSS לרזולוציות שבין מינימום למקסימום פיקסלים קבועים מראש באמצעות שימוש בשתי ההצהרות גם יחד:

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

הצהרה זו תשפיע רק על רזולוציות שבין 992 ל – 1200 פיקסלים.

מידות: 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%;
}

• עיצוב רספונסיבי לתמונה באתר שלכם תשיגו בעזרת הגדרות עיצוב אלו. שימו לב! רצוי לשנות את המגבלה של max-width: 360px לרוחב המתאים לאלמנט שלכם.

img {
display: block;
margin: auto;
max-width: 360px;dark-black-bg my-5
width: 100%;
}

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

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

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

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

בניית אתרים רספונסיבים עם bootstrap v5

טבלה הממחישה את נקודות השבירה ב – Bootstrap v5 לעומת Bootstrap v4 הישנה. 

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

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

מה חדש בגרסה 5 של BOOTSTRAP

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

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

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

מחבר: מיכאל

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

לכל המאמרים של: מיכאל