בניית אתרים רספונסיביים
בניית אתר רספונסיבי, מה אומר המונח "רספונסיבי" בהקשר של בניית אתרים? נספק לכם תשובה לשאלה זו ואחרות.
כל לקוח שפונה אלינו שואל אותנו על התאמה למובייל או ל"פלאפונים" כפי שחלקם נוהגים לקרא לזה. אחרי הכל זו שאלה לגיטימית, ישנם המון מכשירים והמון מסכים עם רזולוציות שונות ובסופו של דבר האתר צריך להתאים לכל מכשיר בכל רזולוציה. לפני פרוץ עידן הטלפונים החכמים לחיינו, כשהשימוש באינטרנט נעשה דרך מחשבים נייחים בעיקר. גדלי המסכים המוכרים לנו היה מצומצם ולכן לא נדרשה התאמה מיוחדת של דפי האינטרנט.
תוכן עניינים
כיום, עם כניסת המכשירים החכמים והגישה לאינטרנט מכל מקום, אנו כמפתחי אתרים מגיעים לנקודה בה היכולת לעמוד בקצב כניסת המכשירים החדשים, הרזולוציות והפלטפורמות נראית כמעט בלתי אפשרית. בעבור אתרים רבים, יצירת גרסה מעוצבת ומותאמת לכל רזולוציה או טלפון חכם חדש שיוצא תהיה בלתי אפשרית, או לכל הפחות לא מעשית.
מה זה אומר למעשה?
האם עלינו פשוט לסבול מההשלכות של אובדן מבקרים ממכשיר אחד, לטובת השגת מבקרים ממכשיר אחר? או שישנה אפשרות אחרת?
"עיצוב אתר רספונסיבי", מה זה אומר למעשה?
המונח "רספונסיבי" ( בעברית "מגיב" ) מצביע על העובדה שהאלמנטים המרכיבים את דפי האתר מגיבים לגודל המסך, זזים ומתאימים את עצמם לכל סוג של דפדפן ורוחב מסך. המחשבה העומדת מאחורי בניית אתר רספונסיבי אומרת שהאתר צריך להגיב ללקוח בהתאמה, לא חשוב מאיזה מכשיר הוא מתחבר ובאיזו רזולוציה.
אתר רספונסיבי מורכב משילוב של אלמנטים בפריסה גמישה, הגדרות עיצוב ושאילתות 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 פיקסלים ומעלה. כל מכשיר שיפול לטווח הזה יקבל את אותה טבלת העיצוב.
אתרים רספונסיבים ידעו לזהות את גודל המסך ולהציג את טבלת העיצוב המתאימה ביותר. אך על אף כל זאת זה עדיין לא מספיק, יש צורך בהגדרות נוספות על מנת להגיע לכיסוי מלא.
חדש! גרסא 5 של BOOTSTAP יוצאת לדרך.
BOOTSTRAP הכריזה על יציאת BOOTSTRAP v5, גרסה חמישית של מסגרת העבודה לאתרים רספונסיביים, כרגע בגרסאת בטא בלבד. על פניו נראה שבגרסא החמישית יהיו כמה שינויים מאוד מענינים כמו:
- שימוש בג'אווה סקריפט והפחתת התלות ב JQUERY
- שימוש במשתנים בהגדרות CSS
- הסרת התמיכה בדפדפני אינטרנט אקספלורר בגרסאות 10 ו- 11
- הרחבת פלטת הצבעים
- הגדרות חדשות לטפסים(FORMS)
- שינויים במערכת הגריד(GRID SYSTEM)
- הרחבת התמיכה לשפות RTL
- ספריית אייקונים חדשה
- מעבר ל POPPERS V2
אלו הם חלק מהשינויים הצפויים במערכת החדשה של BOOTSTRAP לבניית אתרים רספונסיביים.
בניית אתרים רספונסיביים בעזרת אלמנטור
על מנת לבנות ולעצב אתר רספונסיבי נדרש ידע רחב במספר שפות תכנות וטכנטלוגיות שונות. אתם צריכים לדעת HTML על מנת לייצר מבנה לדף, ידע נוסף במסגרת העבודה של BOOTSTRAP יעזור לכם להתאים את האלמנטים למסכים שונים. כמובן שנדרש גם ידע בעיצוב בטבלאות CSS ותכנות בשפת JAVASCRIPT על מנת להוסיף תכונות נוספות.
אבל, יש בשורות טובות! לא כך הדבר למשתמשים בתוסף אלמנטור לבניית דפים. התוסף מאפשר לבנות דפים רספונסיבים לאתרים תחת מערכת וורדפרס בלבד. אין בכוונת מדריך זה להסביר ולפרט על בניית אתרים בעזרת אלמנטור. צריך בשביל זה מדריך נפרד מכיוון שזה נושא מאוד רחב ועל מנת לבנות אתר עם עיצוב רספונסיבי בצורה הנכונה יש צורך ביותר מכמה שורות בתוך מאמר.