הגדרת רוחב דף האינטרנט שלך

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

למה לשקול החלטה

בשנת 1995, תקן 640x480 צגים ברזולוציה היו הגדול ביותר ואת מיטב צגים זמין. משמעות הדבר היא כי מעצבי אינטרנט התמקדו עושה דפים שנראים טוב בדפדפני אינטרנט מוגדל על 12 אינץ 'עד 14 אינץ' צג באותו רזולוציה.

בימים אלה, רזולוציה של 640x480 מהווה פחות מ -1% מהתנועה באתר. אנשים משתמשים במחשבים עם רזולוציות גבוהות בהרבה, כולל 1366x768, 1600x900 ו- 5120x2880. במקרים רבים, עיצוב עבור מסך רזולוציה 1366x768 עובד.

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

רוחב דפדפן

לפני שאתה הולך לחשוב "בסדר, אני אעשה את הדפים 1366 פיקסלים רחב," יש יותר לסיפור הזה. לעתים קרובות להתעלם בעיה כאשר מחליטים רוחב של דף אינטרנט הוא כמה גדול הלקוחות שלך לשמור על הדפדפנים שלהם. באופן ספציפי, האם הם למקסם את הדפדפנים שלהם בגודל מלא מסך או שהם שומרים אותם קטנים יותר מאשר מסך מלא?

בסקר פורמלי אחד של עמיתים לעבודה, אשר השתמשו כל מחשב נייד תקן 1024x768 רזולוציה, שני שמרו את כל היישומים שלהם למקסימום. לכל השאר היו חלונות שונים בגודל פתוח מסיבות שונות. זה ממחיש כי אם אתה מעצב אינטראנט זה של החברה ב 1024 פיקסלים רחב, 85 אחוזים מהמשתמשים יצטרך לגלול אופקית כדי לראות את כל הדף.

לאחר שתחשוב על לקוחות שממקסמים או לא, חשבו על גבולות הדפדפן. כל דפדפן אינטרנט יש פס גלילה וגבולות בצדדים כי לכווץ את החלל הזמין מ 800 עד 740 פיקסלים או פחות על רזולוציות 800x600 סביב 980 פיקסלים על חלונות מקסימלית ברזולוציה 1024x768. זה נקרא דפדפן "כרום" וזה יכול לקחת את החלל שמיש עבור עיצוב הדף שלך.

דפי רוחב קבוע או נוזלי

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

רוחב קבוע

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

כדי ליצור דפי רוחב קבוע, השתמש במספרי פיקסלים ספציפיים עבור רוחב החטיבות של הדף שלך.

רוחב נוזלי

דפי רוחב נוזלי (הנקראים לעתים דפי רוחב גמישים) משתנים ברוחב, בהתאם לחלון הדפדפן הרחב. זה מאפשר לך לעצב דפים להתמקד יותר על הלקוחות שלך. הבעיה עם דפי רוחב נוזלי היא שהם יכולים להיות קשים לקריאה. אם אורך הסריקה של שורת טקסט הוא יותר מ 10 עד 12 מילים או קצר מ 4 עד 5 מילים, זה יכול להיות קשה לקריאה. משמעות הדבר היא כי הקוראים עם חלונות דפדפן גדולים או קטנים יש בעיות.

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

ואת הזוכה הוא: CSS Media שאילתות

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