איך לגרום לאתר להגיב?

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

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

שיטה 1 מתוך 3: תכנון עיצוב רספונסיבי

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

תכננו פריסות שונות למכשירים שונים. אתה יכול להשתמש בשילוב של CSS ו- JavaScript כדי לזהות את מכשיר המשתמש, כמו גם את היכולות שלו (בין אם הוא תומך ב- Java, Flash וכו ') ולהציג גרסה מסוימת של האתר שלך בהתאם. שאילתות מדיה של CSS שימושיות במיוחד לקביעת הגודל / הרזולוציה של המכשיר.
3
חשוב על סוגים שונים של אינטראקציות. המבקר שלך יכול לקיים אינטראקציה עם האתר שלך באמצעות עכבר, מקלדת, מסך מגע או אפילו קורא מסך לאנשים עם מוגבלות ראייה. בהתחשב בכך, על האתר שלך להגיב ללחיצות עכבר, מקשי מקלדת (Tab, Enter, Return וכו ') ונגיעות אצבעות במסך.
- השפעות העכבר מעל לא עובדות עם שום דבר פרט לעכבר. במקום להשתמש באפקטים אלו, אתה יכול לדרוש מהמבקר ללחוץ על כפתור או סמל כדי להציג את כל מה שהוצג בעבר ברחף העכבר.
דרך קלה להבטיח שעיצוב האתר שלך מגיב היא להשתמש ב- CMS עם נושא רספונסיבי שנבנה מראש.
4

שקול להשתמש במערכת ניהול תוכן (CMS). דרך קלה להבטיח שעיצוב האתר שלך מגיב היא להשתמש ב- CMS עם נושא רספונסיבי שנבנה מראש. שימוש ב- CMS כמו Joomla, Drupal או Wordpress מאפשר לך להבטיח שהאתר שלך נראה נהדר בכל המכשירים מבלי שתצטרך לקודד את האלמנטים הרספונסיביים בעצמך. פנה לספק שירותי אירוח אתרים שלך כדי לראות אילו כלי CMS זמינים בשירות שלך.
5
השתמש בכלים מקוונים כדי לבדוק את האתר שלך. כעת, כאשר עיצוב אתרים רספונסיבי גדל בפופולריות, ישנם מגוון כלים חינמיים שתוכלו להשתמש בהם כדי לבדוק את האתר שלכם. אם כבר קידדת את האתר שלך, השתמש בכלים אלה כדי לבדוק כיצד הוא נראה בתנאים שונים כדי שתדע איפה אתה צריך לשפר את ההיענות:
- מבחן ידידותי לנייד של google: מודיע לך האם האתר שלך עובד באותה מידה במכשירים ניידים כמו שהוא עובד על מסכי המחשב.
- resizeMyBrowser: מאפשר לך להציג את האתר שלך ברזולוציות שונות.
- מגיב: מציג את האתר שלך על גבי מסכי מכשיר שונים בפריסות שונות (הצידה או מצד ימין).

שיטה 2 מתוך 3: הפיכת תגובת הדף למגיבה

1
שקול מסגרת גיליון סגנונות תגובה חינמית. מסגרת היא קבוצה קבועה מראש של HTML, CSS ו / או JavaScript שתוכלו להשתמש בהם כשלד לאתר שלכם. המסגרות נבדקות וכוללות אופטימיזציה לעבודה עם כל הדפדפנים, כך שכל מה שתצטרך לעשות הוא להוסיף את התוכן שלך, להוסיף את העדפות המדיה והצבע שלך ולפרסם את האתר שלך. כמה מסגרות פופולריות הן:
- Bootstrap
- שלד
- קרן
2
הגדר את תצוגת התצוגה עם מטא תג. אם אינך משתמש במסגרת, תרצה להתחיל בהיבט החשוב ביותר בקידוד אתר רספונסיבי: ה- Viewport. נמל התצוגה הוא החלק באתר הגלוי למשתמש. המפתח להופעת האתר שלך כראוי ללא קשר לגודל המסך הוא שינוי גודל תצוגת התצוגה META בתג. לשם כך, כלול תג זה בחלק העליון של כל עמוד באתר:
```
<meta name = "viewport" content = "width = device-width, initial-scale = 1,0"> 
```
כעת, כאשר עיצוב אתרים רספונסיבי גדל בפופולריות, ישנם מגוון כלים חינמיים שתוכלו להשתמש בהם כדי לבדוק את האתר שלכם.
3
ציין את גודל הטקסט ביחס לתצוגה. לאחר הגדרת תצוגת התצוגה שלך, הטקסט בדף שלך ישתנה בהתאם למסך. עם זאת, גופנים עשויים להופיע גדולים מדי או קטנים מדי אם גודלם אינו מוגדר ביחס לתצוגה. באפשרותך לעשות זאת על ידי הגדרת גודל הגופן כאחוז ספציפי מנמל התצוגה עם vw היחידה. דוגמה זו מורה לכותרות H1 להציג ב -10% מרוחב הנוף, לא משנה גודלו:
```
<h1 style = "font-size: 10vw"> מדריך </ h1> 
```
4
השתמש בשאילתות מדיה כדי להציג סגנונות שונים בגדלי מסך שונים. שאילתות מדיה מאפשרות לך לבחור אם להציג אלמנטים מסוימים של CSS בהתאם לגודל המסך. אתה יכול לציין את הפרטים של שאילתת המדיה שלך בקובץ CSS שלך. בדוגמה זו, צבע הרקע של הגוף יהפוך לאדום אם גודל המסך של המשתמש הוא 480 פיקסלים ומעלה:
```
<h1 style = "font-size: 10vw"> מדריך </ h1> @media screen ו- (min-width: 480px) {body {רקע-צבע: אקווה; }} 
```

שיטה 3 מתוך 3: הפיכת תמונות למגיבות

1
השתמש width במאפיין CSS כדי לשנות גודל של תמונות. במקום להגדיר את רוחב התמונה לכמות ספציפית של פיקסלים (למשל 500 פיקסלים), השתמש באחוזים (למשל, 100%) כך שהתמונה תסתכל על רוחב האב והתאם בהתאם. הגדרת רוחב התמונה ל 100% מאלצת את התמונה להתמקד מעלה ומטה בהתאם לגודל המסך של הצופה. כדי לעשות זאת בשורה:
```
<img src = "aW1nLmpwZw ==" style = "width: 100%;"> 
```
אם אינך משתמש במסגרת, תרצה להתחיל בהיבט החשוב ביותר בקידוד אתר רספונסיבי: ה- Viewport.
2
השתמש max-width במאפיין כדי להגביל את קנה המידה של גודל התמונה בפועל. אם אתה משתמש width במאפיין בשלב הקודם בכדי לשנות את גודל התמונה ל -100%, התמונה תגדל או תתכווץ כך שתתאים ל -100% מהמיכל שלה ולא משנה הגודל. משמעות הדבר היא שאם התמונה נמצאת בצד הקטן יותר, היא תצטמצם יותר מגודלה המקורי ותראה באיכות פחותה. כדי למנוע זאת, השתמש max-width בכדי להגדיר את גודל קנה המידה המקסימלי של התמונה ל- 100% (גודלה בפועל). כך:
```
<img src = "aW1nLmpwZw ==" style = "max-width: 100%; height: auto;"> 
```
3
השתמש picture באלמנט HTML להצגת תמונות שונות בגדלי מסך שונים. אם ברצונך ליצור תמונות בגודל מותאם אישית שיוצגו במסכים בגדלים שונים, תוכל לציין אילו תמונות להציג בקוד ה- HTML שלך. צור את התמונות בגדלים שונים ולאחר מכן השתמש בקוד זה כדוגמה לציון איזו תמונה להשתמש במסכי רוחב 600px ו- 1500px:
```
<picture> <source srcset = "img_small.jpg" media = "(max-width: 600px)"> <source srcset = "img_regular.jpg" media = "(max-width: 1500px)"> <source srcset = " img.jpg "> <img src =" aW1nX3NtYWxsLmpwZw == "alt =" טקסט האלט שלך כאן "> </ picture> 
```

קרא גם: כיצד להתקין אות במחשב או מק?

איך לגרום לאתר להגיב?

צעדים

שיטה 1 מתוך 3: תכנון עיצוב רספונסיבי

שיטה 2 מתוך 3: הפיכת תגובת הדף למגיבה

שיטה 3 מתוך 3: הפיכת תמונות למגיבות

קרא גם: