הדבר הראשון שרוב המעצבים שוקלים בבניית דף האינטרנט שלהם הוא מה פתרון הבעיה לעצב עבורם. מה שבאמת מסתכם בכך הוא להחליט עד כמה העיצוב שלך צריך להיות רחב. כבר אין דבר כזה רוחב אתרים סטנדרטי.
מדוע לשקול החלטה
בשנת 1995, המסכים הסטנדרטיים 640 פיקסלים על 480 פיקסל היו המסכים הגדולים והטובים ביותר שיש. משמעות הדבר היא שמעצבי אתרים התמקדו בייצור דפים שנראו טוב בדפדפני האינטרנט המקסימליים על צג 12 עד 14 אינץ 'ברזולוציה זו.
בימינו הרזולוציה של 640 על 480 מהווה פחות מאחוז אחד מרוב תעבורת האתרים. אנשים משתמשים במחשבים ברזולוציות גבוהות בהרבה, כולל 1366-by-768, 1600-by-900 ו- 5120-by-2880. במקרים רבים, עיצוב למסך ברזולוציה 1366 על 768 עובד.
Todya, לרוב האנשים יש צגים גדולים ומסכים רחבים והם אינם ממקסמים את חלון הדפדפן שלהם. אז אם תחליט לעצב דף שרוחבו לא יותר מ 1366 פיקסלים, הדף שלך כנראה ייראה בסדר ברוב חלונות הדפדפן אפילו בצגים גדולים עם רזולוציות גבוהות יותר.
רוחב הדפדפן
אחת הבעיות שמתעלמות מהן לעתים קרובות כאשר מחליטים על רוחב דף אינטרנט הוא עד כמה הלקוחות שלך שומרים על הדפדפנים שלהם. באופן ספציפי, האם הם ממקסמים את הדפדפנים שלהם בגודל מסך מלא או שהם שומרים עליהם קטנים יותר מהמסך המלא?
אחרי שתחשבו על לקוחות שמקסימום או לא, חשבו על גבולות הדפדפן. כל דפדפן אינטרנט משתמש בסרגל גלילה וגובל בצדדים שמכווצים את השטח הזמין מ -800 לסביבה 740 פיקסלים או פחות ברזולוציות 800 על 600 וסביבות 980 פיקסלים בחלונות מקסימליים ב -1024 על 768 החלטות. זה נקרא דפדפן כרום וזה יכול לקחת מהמקום הניתן לשימוש לעיצוב הדף שלך.
דפי רוחב קבוע או נוזלי
הרוחב המספרי בפועל הוא לא הדבר היחיד שעליך לחשוב עליו בעת עיצוב רוחב האתר שלך. אתה צריך גם להחליט אם יהיה לך רוחב קבוע או רוחב נוזלי. במילים אחרות, האם אתה מתכוון להגדיר את הרוחב למספר ספציפי (קבוע) או לאחוז (נוזלי)?
רוחב קבוע
דפים ברוחב קבוע הם בדיוק כמו שהם נשמעים. הרוחב קבוע במספר ספציפי ואינו משתנה ולא משנה כמה גדול או קטן הדפדפן. גישה זו יכולה להיות טובה אם אתה זקוק לעיצוב שלך שייראה זהה לחלוטין, לא משנה כמה הם דפדפני הקוראים רחבים או צרים, אך שיטה זו אינה מתחשבת בקוראיך. אנשים עם דפדפנים צרים יותר מהעיצוב שלך יצטרכו לגלול בצורה אופקית, ולאנשים עם דפדפנים רחבים יהיו כמויות גדולות של שטח ריק על המסך.
כדי ליצור עמודים ברוחב קבוע, השתמש במספרי פיקסל ספציפיים עבור רוחבי חלוקות העמודים שלך.
רוחב נוזלי
דפים ברוחב נוזלי (לפעמים נקראים דפים ברוחב גמיש) משתנים ברוחב בהתאם לרחב חלון הדפדפן. אסטרטגיה זו מביאה עיצובים המתמקדים יותר בלקוחות. הבעיה בדפי רוחב נוזלי היא שהם יכולים להיות קשים לקריאה. אם ה אורך סריקה של שורת טקסט ארוכה מ 10 עד 12 מילים או קצרה מ 4 עד 5 מילים, זה יכול להיות קשה לקריאה. המשמעות היא שקוראים עם חלונות דפדפן גדולים או קטנים מתקשים.
ליצירת דפי רוחב גמישים השתמש באחוזים או ems לרוחבי חלוקות העמודים שלך. הכירו את ה- CSS רוחב מקסימלי תכונה. מאפיין זה מאפשר לך לקבוע רוחב באחוזים, אך להגביל אותו כך שהוא לא יהיה כל כך גדול שאנשים לא יוכלו לקרוא אותו.
שאילתות מדיה של CSS
הפיתרון הטוב ביותר בימינו הוא שימוש בשאילתות מדיה של CSS ובעיצוב רספונסיבי ליצירת דף שמתאים לרוחב הדפדפן הצופה בו. עיצוב אתרים רספונסיבי משתמש באותו תוכן כדי ליצור דף אינטרנט שעובד בין אם אתה רואה אותו ברוחב 5120 פיקסלים או ברוחב 320 פיקסלים. הדפים בגודל שונה נראים שונים, אך הם מכילים את אותו התוכן. עם שאילתת המדיה ב- CSS3, כל מכשיר מקבל עונה על השאילתה בגודלו, וגיליון הסגנונות מותאם לגודל המסוים הזה.