כיום, נהוג לבנות אתר או אפליקציה המתאימים את ממשק המשתמש שלה בהתאם לדפדפן או למכשיר. ישנן שתי גישות להשגת מטרה זו. הראשונה כוללת יצירת גרסאות שונות של האתר או האפליקציה שלך למכשירים שונים. אבל זה לא יעיל ויכול לגרום לשגיאות בלתי צפויות.
בחיפוש אחר גישה אמינה, עמידה בעתיד, נוצר העיצוב המגיב-או ההסתגלותי. הוא מתמקד בבניית גרסה אחת של הפריסה שלך שמתאימה לדפדפנים או התקנים שונים באופן אוטומטי.
במאמר זה נלמד על עיצוב אתרים רספונסיבי ועל העקרונות הבסיסיים שיעזרו לך ליצור אתר מדהים.
רכיבי עיצוב אתרים רספונסיביים
עיצוב אתרים רספונסיבי אינו מסובך כמו שזה נשמע. זוהי קבוצת פרקטיקות שתוכל להשתמש בהן בעת כתיבת CSS, לא טכנולוגיה נפרדת שתצטרך ללמוד מאפס. יתכן שכבר עקבת אחר מספר עקרונות אלה מבלי שתבין זאת. אתה יכול להבין עיצוב אתרים רספונסיבי על ידי חקר ארבעת המרכיבים שלו: פריסות נוזל, יחידות רספונסיביות, תמונות גמישות ושאילתות מדיה.
פריסות נוזלים
עם פריסה נוזלית, תוכל ליצור דפי אינטרנט המתאימים לרוחב ולגובה הנוכחי של תצוגת התצוגה. הנוהג המקובל כולל שימוש ב- רוחב מקסימלי נכס במקום לתת רוחב קבוע לאלמנט. כמו כן, שימוש באחוזים (
%), גובה נמל תצוגה (vh), או רוחב נמל תצוגה (vw) מסייע בשיפור יכולת ההסתגלות שאינה אפשרית עם פיקסלים (px). לכן, בפעם הבאה שאתה בונה פריסה, הקפד להציג את השינויים הקטנים האלה ולהתחיל ליהנות מטכניקות עיצוב רספונסיביות.יחידות רספונסיביות
כאשר אתה עובר ל- CSS מתקדם יותר, לעתים קרובות תראה את השימוש ב- rem ו em יחידות לאורך לאורך px יחידות. זאת מכיוון ש rem יחידה מקלה מאוד על קנה המידה של הפריסה כולה. כברירת מחדל, 1rem שווה 16 פיקסלים מכיוון שהוא פרופורציונלי ל- גודל הגופן של האלמנט, בדרך כלל 16 פיקסלים. עם זאת, תוכל להגדיר 1rem שווה ל -10 פיקסלים (או לכל ערך אחר) לחישובים קלים יותר, על ידי התאמת גודל הגופן ברמה העליונה.
תמונות גמישות
תמונות מהוות דאגה מרכזית בעת עיצוב אפילו הפריסה הבסיסית ביותר. אתה תמיד צריך לדאוג לגודלם כראוי כך שיתאימו לעיצוב. כמו כן, כברירת מחדל, הם אינם משתנים עם שינויים בנמל התצוגה. אז, כדאי להשתמש % למידות התמונות שלך, יחד עם רוחב מקסימלי תכונה.
אתה יכול להחיות אתרים מגיבים לחיים באמצעות שאילתות מדיה. רשתות נוזלים טובות להתחלה, אבל תגלו שיש כמה נקודות שבהן הפריסה מתחילה להישבר. הוספת נקודות שבירה לרוחבי נופי תצוגה אלה מכוונת את הפריסה למכשירים שונים. שאילתות מדיה עוזרות לך להחיל CSS באופן סלקטיבי על סמך תוצאות בדיקות תכונות המדיה. אתה יכול לחקור חדש תכונות CSS ליצירת אתר רספונסיבי בפחות זמן.
עקרונות עיצוב אתרים רספונסיביים
למרות שעיצוב אתרים רספונסיבי הוא מושיע בכל הקשור לבעיות מרובות-מסכים, ייתכן שלא יהיה לך אילוץ פיזי קבוע שאליו אתה מתייחס. לכן, ישנם שישה עקרונות בסיסיים של עיצוב אתרים להתחיל עם עיצוב פריסה רספונסיבית.
השתמש בנקודות שבירה מבוססות תוכן
אחד מעקרונות העיצוב הבסיסיים קובע שעיצוב האתר שלך צריך לתמוך בתוכן, ולא להיפך. תוכן מדיה כגון סרטונים, תמונות ותוכן טקסט כמו העתקת אינטרנט ארוכה וקצרה צריך להיות מוצג בצורה אופטימלית בכל המסכים. המפתח לעיצוב אתרים רספונסיבי הוא להשתמש בנקודות שבירה מבוססות תוכן ולא במתקנים מבוססי מכשירים.
בחר בגופני אינטרנט ובגופני מערכת בחוכמה
גופני אינטרנט נראים מהממים! יש לך אפשרויות רבות לשנות את העיצוב שלך עם גופני אינטרנט מגניבים למראה. אך עליך לדעת שדפדפנים יצטרכו להוריד כל גופן אינטרנט. יותר גופני אינטרנט, יותר זמן הורדה. לעומת זאת, גופני המערכת מהירים בזק. אם למשתמש אין גופן מערכת בשם במכשיר המקומי שלו, הוא יחזור לגופן הבא הערימה של משפחת הגופנים. לכן, הקפד לקחת בחשבון את זמן הטעינה ואת דרישת העיצוב בעת בחירת גופנים.
ייעל את תמונות וקטורים של מפת סיביות
האם יש לך סמלים שונים באתר שלך התומכים בתוכן? לעתים קרובות נהוג להשתמש בפורמט מפת סיביות אם יש לסמלים שלך פירוט רב. מצד שני, פורמטים וקטוריים הם הדרך הטובה ביותר ללכת על סמלים שמתפתלים יפה ומעלה. הווקטורים לעיתים הם זעירים, אך החיסרון הוא שחלק מהדפדפנים הישנים יותר אינם תומכים בהם. כמו כן, ישנם מקרים בהם הווקטורים כבדים יותר ממפות סיביות, כגון כאשר התמונה מפורטת מאוד. לכן, וודא תמיד שאתה מייעל את תמונות ומפות הוויקטורים שלך לפני שהם יוצאים לרשת.
ערכו בדיקות עבור קיפול ראשון רספונסיבי
הקיפול הראשון של אתר אינטרנט הוא התצוגה שמבקרים רואים כאשר הוא נטען לראשונה, לפני כל גלילה. לעתים קרובות הוא כולל קטע גיבורים עם סרגל ניווט רספונסיבי, עותק היכרות ותקשורת ומדיניות CTA. ההיענות אינה מוגבלת רק למכשירים ניידים. כדאי לשקול גם טאבלטים, קונסולות משחקים ומסכים אחרים. לכן, המפתח הוא לערוך בדיקות תכופות לפחות לצפייה הראשונה של האתר. אתה יכול להשתמש ב- Chrome DevTools (מִגדַלוֹר) כדי לבדוק את איכות דף האינטרנט.
אל תסתיר תוכן במסכים קטנים יותר
אנשים רבים נהגו להניח שמשתמשי מובייל תמיד ממהרים לחפש מידע בגודל ביס, בעוד שמשתמשי שולחן העבודה עוסקים יותר בתוכן ארוך טווח. כעת אנו מכירים בכך שזה לא נכון בעולם של היום. אנשים משתמשים במכשירים ניידים בכל מקום, מחפשים תוכן מלא וגישה מלאה לכל השירותים. עליך לוודא שבמקום להסתיר תוכן, אתה מנהל את הפריסה ונקודות השבירה כדי להציגו בקלות ובקלות ככל האפשר.
נהל את הפריסה באמצעות אובייקטים מקוננים
בניית פריסת אתרים ומיקום אלמנטים בצורה נכונה דורשת מאמץ ראוי. ייתכן גם שחווית קושי בניהול הרבה אלמנטים התלויים זה בזה. לכן, כדאי לשקול לעטוף אלמנטים קשורים במיכל או. זה עוזר לצמצם את משימת פריסת מספר אלמנטים לאחד שבו אתה פורש רק אלמנט אחד.
עיצוב רספונסיבי: האם כדאי ללכת עם מחשב שולחני קודם או נייד קודם?
הגישה הראשונה לשולחן העבודה פירושה שתכתוב CSS למסכים גדולים ולאחר מכן תיישם שאילתות מדיה כדי לכווץ את העיצוב למסכים קטנים יותר. לעומת זאת, הגישה הראשונה לנייד כוללת כתיבת CSS למכשירים ניידים, עם מסכים קטנים יותר, ולאחר מכן החלת שאילתות מדיה להרחבת העיצוב למסכים גדולים יותר. המוקד העיקרי הוא לצמצם את האתר והאפליקציות לחומרים החיוניים ביותר.
אם אתה רק מתחיל עם פיתוח אתרים רספונסיבי אז אתה צריך ללכת על שולחן העבודה הראשון בסופו של יום, תצטרך לערום את המכולה אחד על השני בנייד מכשירים. למרות שזו בהחלטה אישית לחלוטין, הגישה הראשונה לנייד מסייעת לך בבניית HTML בצורה טובה יותר בעוד הגישה הראשונה לשולחן העבודה תעזור לך עם פריסה ומרווח טכניקות.
אם אתה מעוניין ללמוד עיצוב UX או לשפר את כישוריך, להלן ששת הקורסים המקוונים הטובים ביותר שתוכל לקחת.
קרא הבא
- תִכנוּת
- אינטרנט
- עיצוב אתרים
- CSS
Naincy מתמחה בבניית אתרים בעלי תגובה מאוד ואסטרטגיית תוכן יעילה יחד עם העתקי אינטרנט. היא כותבת טכנולוגיה עצמאית ששומרת עין חדה על טכנולוגיות מגמות.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה
