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

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

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

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

תוכן עניינים

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

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

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

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

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

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

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

עיצוב אתר רספונסיבי מורכב משילוב של אלמנטים בפריסה גמישה, הגדרות עיצוב ושאילתות 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; }}

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

BREAKPOINTS

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

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

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

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

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

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

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

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

נקודות עצירה של מסגרת העבודה של 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 ל-בניית אתרים רספונסיביים.