בעת עיצוב האתר שלך, חשוב לוודא שהוא נראה נהדר בכל מכשיר, ללא קשר לגודל המסך ולצורתו. אתרים רספונסיביים נועדו להיראות טוב בכל מיני מכשירים מודרניים כמו מחשבים, טלפונים, טאבלטים, טלוויזיות, פריטי לבוש ואפילו מסכי רכב. כדי להפוך אתר לאתר רספונסיבי, יהיה עליך לשנות את קוד ה- CSS וה- HTML שלך כדי לשנות את גודל הרכיבים שלו באופן אוטומטי בהתאם לתנאים ספציפיים. WikiHow זה מלמד אותך כיצד לתכנן וליישם עיצוב אתרים בסיסי.
צעדים
שיטה 1 מתוך 3: תכנון עיצוב רספונסיבי
שלב 1. גלה כיצד הקהל שלך משתמש באתר שלך
בימים אלה, רוב האנשים הגולשים באינטרנט עושים זאת מטלפונים ניידים ומטאבלטים. כדי שאתר יהיה מגיב, עליך לוודא שהוא מוצג כראוי, לא משנה היכן הוא נצפה. אם זמן וכסף הם העיקר, התמקד בסוגי המכשירים הפופולריים ביותר בקרב המשתמשים שלך (אם מידע זה זמין) וכיצד הם משתמשים באתר שלך. בעזרת תוכנת הניתוח שלך או צורת מחקר אחרת, גלה:
- באילו מכשירים הם משתמשים לרוב לצפייה באתר, תוך התייחסות מיוחדת למותגי טלפונים ניידים/טאבלטים/מחשבים וגדלי מסך/רזולוציה.
- אילו דפדפנים הם הפופולריים ביותר בקרב המשתמשים שלך. בכל הנוגע לסטטיסטיקה גלובלית, Google Chrome הוא דפדפן האינטרנט הפופולרי ביותר בעולם, אך ספארי היא שנייה קרובה.
- כיצד המבקרים שלך משתמשים באתר שלך, כגון כמה זמן הם מבלים בצפייה בו, היכן הם צופים בו ואיזה תוכן הוא הפופולרי ביותר. זה יכול לעזור לך לקבוע איזה סוג תוכן חשוב לכלול ואילו ניתן להשמיט.
שלב 2. עיצוב פריסות שונות עבור מכשירים שונים
אתה יכול להשתמש בשילוב של CSS ו- JavaScript כדי לזהות את המכשיר של המשתמש, כמו גם את יכולותיו (בין אם הוא תומך ב- Java, Flash וכו ') ולהציג גרסה מסוימת של האתר שלך בהתאם. שאילתות מדיה CSS שימושיות במיוחד לקביעת גודל/רזולוציה של המכשיר.
שלב 3. חשבון על סוגים שונים של אינטראקציות
המבקר שלך עשוי לקיים אינטראקציה עם האתר שלך באמצעות עכבר, מקלדת, מסך מגע או אפילו קורא מסך לאנשים עם לקות ראייה. בהתחשב בכך, אתר האינטרנט שלך אמור להגיב על לחיצות עכבר, מקשי מקלדת (Tab, Enter, Return, וכו ') ונגיעות אצבע במסך.
אפקטים של ריחוף לא עובדים עם שום דבר פרט לעכבר. במקום להשתמש באפקטים אלה, תוכל לדרוש מהמבקר ללחוץ על כפתור או סמל כדי להציג את כל מה שהוצג בעבר בריחוף עכבר
שלב 4. שקול להשתמש במערכת ניהול תוכן (CMS)
דרך קלה להבטיח שעיצוב האתר שלך הוא רספונסיבי היא להשתמש ב- CMS עם נושא מגיב מראש. שימוש ב- CMS כמו ג'ומלה, דרופל או וורדפרס מאפשר לך להבטיח שהאתר שלך נראה נהדר בכל המכשירים מבלי שתצטרך לקודד את האלמנטים המגיבים בעצמך. בדוק עם ספק אירוח האתרים שלך כדי לראות אילו כלי CMS זמינים עם השירות שלך.
שלב 5. השתמש בכלים מקוונים כדי לבדוק את האתר שלך
כעת, לאחר שעיצוב אתרים רספונסיבי גדל בפופולריות, ישנם מגוון כלים חינמיים שבהם תוכל להשתמש כדי לבדוק את האתר שלך. אם כבר קידדת את האתר שלך, השתמש בכלים אלה כדי לבדוק כיצד הוא נראה בתנאים שונים, כך שתדע היכן עליך לשפר את ההיענות:
- מבחן ידידותי לנייד על ידי Google: מאפשר לך לדעת האם האתר שלך פועל היטב במכשירים ניידים כמו במסכי מחשב.
- resizeMyBrowser: מאפשר לך לצפות באתר שלך ברזולוציות שונות.
- אחראי: מציג את האתר שלך במסכי מכשירים שונים בפריסות שונות (הצידה או צד ימין כלפי מעלה).
שיטה 2 מתוך 3: הפיכת פריסת הדף לרספונסיבית
שלב 1. שקול מסגרת גיליונות סגנונות רספונסיביים בחינם
מסגרת היא קבוצה כתובה מראש של HTML, CSS ו/או JavaScript שתוכל להשתמש בה כשלד לאתר שלך. מסגרות כולן נבדקות ומותאמות לעבודה עם כל הדפדפנים, כך שכל שעליך לעשות הוא להכניס את התוכן שלך, להוסיף העדפות מדיה וצבע ולפרסם את האתר שלך. כמה מסגרות פופולריות הן:
- רצועת אתחול
- שֶׁלֶד
- קרן
שלב 2. הגדר את נקודת התצוגה עם מטא תג
אם אינך משתמש במסגרת, תרצה להתחיל בהיבט החשוב ביותר של קידוד אתר רספונסיבי: ה- Viewport. תצוגת התצוגה היא החלק באתר הגלוי למשתמש. המפתח לגרום לאתר שלך להציג כראוי ללא קשר לגודל המסך הוא קנה מידה של גודל נגן התצוגה בתג META. לשם כך, כלול תג זה בראש כל עמוד באתר:
שלב 3. ציין את גודל הטקסט ביחס לנמל התצוגה
לאחר שתגדיר את תצוגת התצוגה שלך, הטקסט בדף שלך יהיה בקנה מידה כך שיתאים למסך. עם זאת, גופנים עשויים להציג גדולים מדי או קטנים מדי אם הגדלים שלהם אינם מצוינים ביחס לנמל התצוגה. אתה יכול לעשות זאת על ידי הגדרת גודל הגופן כאחוז מסוים של תצוגת התצוגה עם יחידת vw. דוגמה זו אומרת לכותרות H1 להציג ב -10% מרוחב התצוגה, לא משנה גודלה:
wikiHow
שלב 4. השתמש בשאילתות מדיה כדי להציג סגנונות שונים בגדלי מסך שונים
שאילתות מדיה מאפשרות לך לבחור אם להציג רכיבי CSS מסוימים בהתאם לגודל המסך. תוכל לציין את הפרטים של שאילתת המדיה שלך בקובץ ה- CSS שלך. בדוגמה זו, צבע הרקע של הגוף יהפוך לאדום אם גודל המסך של המשתמש הוא 480 פיקסלים ומעלה:
wikiHow
מסך @media ו (רוחב דק: 480px) {גוף {צבע רקע: אקווה; }}
שיטה 3 מתוך 3: הפיכת תמונות לרספונסיביות
שלב 1. השתמש במאפיין רוחב CSS כדי לשנות תמונות
במקום להגדיר את רוחב התמונה לכמות מסוימת של פיקסלים (למשל, 500 פיקסלים), השתמש באחוזים (למשל, 100%) כך שהתמונה תסתכל על רוחב האב שלה ותתאים בהתאם. הגדרת רוחב התמונה ל -100% מאלצת את התמונה להגדיל ולרדת בהתאם לגודל מסך הצופה. כדי לעשות זאת בשורה:
שלב 2. השתמש במאפיין הרוחב המרבי כדי להגביל את קנה המידה של גודל התמונה בפועל
אם אתה משתמש במאפיין הרוחב בשלב הקודם כדי לשנות את התמונה ל -100%, התמונה תגדל או תתכווץ כך שתתאים ל -100% מהמיכל שלה, לא משנה הגודל. המשמעות היא שאם התמונה נמצאת בצד הקטן יותר, היא תגדל בהיקף גדול מהגודל המקורי שלה ומראה באיכות פחותה. כדי למנוע זאת, השתמש ברוחב מקסימלי כדי להגדיר את גודל קנה המידה המרבי של התמונה ל -100% (גודלה בפועל). הנה איך:
שלב 3. השתמש ברכיב תמונת HTML להצגת תמונות שונות בגדלי מסך שונים
אם ברצונך ליצור תמונות בגודל מותאם אישית להצגה במסכים בגדלים שונים, תוכל לציין אילו תמונות להציג בקוד ה- HTML שלך. צור את התמונות בגדלים שונים ולאחר מכן השתמש בקוד זה כדוגמה לציון איזו תמונה להשתמש במסכי רוחב של 600 פיקסלים ו 1500 פיקסלים:
