לפני שתשקיע זמן רב מדי בשקילת רזולוציות מדויקות לעיצוב שלך, עליך לזכור שכל עיצוב אתרי האינטרנט המודרני מגיב, כלומר הוא מתוכנן להתאמה בין שונות. רזולוציות מסך. עם עיצוב יחיד, אתה צריך לתמוך בכל דבר, החל ממסכי הנייד הקטנים ביותר ועד צגי שולחן עבודה אולטרה HD.
עם עיצוב אתרים רספונסיבי, אתה מקים פריסות כלליות יותר לניידים, לטאבלטים ולשולחן העבודה. מתי וכיצד כל רכיב עמוד עובר למקומו עבור פריסות אלה נקבע על ידי נקודות עצירה מיוחדות שנכתבו בתוכך CSS. נקודות עצירה אלה נקבעות על ידי רזולוציות מסך נפוצות מסוימות.
אמנם לא תתמקד ברזולוציות ספציפיות ולא תקבע גודל קבוע לעיצובים שלך, אך תשקול מסך החלטות בקביעת נקודות עצירה ויצירת מעברים חלקים כך שהאתר שלך נראה טוב בכל מכשיר גודל מסך.
החלטות שולחן עבודה נפוצות
- 1280x720 סטנדרטי HD - אולי אתה מכיר את זה טוב יותר בתור 720p. זו הייתה רזולוציית ה- HD הסטנדרטית כאשר HD הפך להיות נפוץ לראשונה. ככל הנראה לא תמצאו צגים חדשים רבים המשתמשים ברזולוציה זו, אך ישנם רבים מהם עדיין בטבע מאז שהיו פופולריים יותר.
- 1366x768 - זה רזולוציה יוצאת דופן, אבל זה מאוד פופולרי במחשבים ניידים קטנים יותר ובכמה טאבלטים. אם אתה מתמודד עם סוף נמוך יותר מחשבי Chromebook, יש סיכוי טוב שזו הרזולוציה שאתה מכוון אליה.
- 1920x1080 הנפוץ ביותר - כאשר אתה חושב על שולחנות עבודה, אתה כנראה מתמודד עם 1920x1080, הידוע יותר בשם 1080p. החלטה זו נמצאת בכל מקום. רוב המסכים השולחניים הם עדיין 1080p, וגם הרבה מחשבים ניידים בגודל מלא. תוכלו למצוא גם חלק נכבד של טאבלטים ב 1080p גם בנוף.
- 2560x1440 - 1440p הוא עוד אמצע מוזר בתמונת רזולוציית המסך. זה גבוה ממה שהיית מחשיב 2k, אבל זה לא לגמרי 4k. עם זאת, זו רזולוציה נפוצה בשוק צגי המשחקים, והיא חלופה משתלמת לביצוע 4k מלא. בהתאם לאתר שלך, כדאי לתמוך ב 1440p או לא.
- 3840x2160 העתיד הקרוב - זה מלא 4k או Ultra HD. בעוד שבדרך כלל 4k שמורות למחשבים מתקדמים יותר כעת, המחירים יורדים, טכנולוגיית הגרפיקה משתפרת והביקוש ל- 4k מונע על ידי שוק הטלוויזיה, שם הוא נפוץ בהרבה. אפשר להניח שבמהלך השנים הקרובות, 4k יעקוף בקלות את 1080p כסטנדרט דה-פקטו, כך שבהחלט שווה להתחשב כעת עבור 4k.
רזולוציות נפוצות של טאבלט / נוף
הטאבלטים עשויים לא להיות פופולריים כמו שהיו פעם, ונראה שגדלי הטלפונים הגדלים יחד עם מחשבים ניידים ניתנים להמרה חתכו משמעותית את נתח השוק שלהם. ולמרות זאת, ההתחשבנות ברזולוציות הטאבלט חופפת באופן משמעותי למחשבים שולחניים וניידים. ייתכן שתוכל להשתמש בנקודות הפסקה בטאבלט כדי ליצור נקודות נקודה עבור אלמנטים בעייתיים מסוימים שאינם מתאימים ברזולוציות מסוימות.
- אתה בהחלט צריך לקחת בחשבון רזולוציות טאבלט עבור מכשירים המוחזקים במצב דיוקן. לא כולם יגלשו על הטאבלט שלהם המוחזק בנוף, לכן עליכם להוסיף נקודת שבירה אחת לפחות לטאבלט נפוץ המוחזק לאורך.
- 1280x800 רזולוציה שהייתה נהוגה בעבר - טאבלטים ישנים יותר, טאבלטים נמוכים יותר וטאבלטים קטנים יותר מכילים בדרך כלל חלק מטבלי האש של אמזון גם הם משתמשים 1280x800. זוהי אחת הרזולוציות האחרונות באמת לנייד בטאבלטים.
- 1920x1200 נפוץ בטאבלטים 7 "ו- 8" - בנוף, אתה יכול להסתמך על אותן נקודות עצירה כמו 1080p, לרוב. עם זאת, כשרואים אחד כזה בנוף, המצב שונה בהרבה. רזולוציה זו נפוצה בקרב שפע של טאבלטים בגודל 7 ו -8 אינץ ', כולל אמזון פייר.
- 2048x1536 טבליות אפל -זוהי רזולוציית הטאבלט הנפוצה ביותר של אפל. זה מספיק דומה ל- 1440p כדי לעשות מעט מאוד הבדל, אבל שוב, הדיוקן יוצא דופן. בכל מקרה, מומלץ לבדוק את האתר שלך ברזולוציה זו כדי להבטיח שלא יקרה שום דבר מוזר באייפדים.
טאבלטים ברזולוציה גבוהה יותר מתחילים להיכנס לשטח שולחן העבודה. לרוב, אתה אפילו לא צריך להתחשב בהם מכיוון שהרזולוציה נופלת לטווח שכבר חשבתם עליו. זה תמיד רעיון טוב לבדוק, כדי להיות בטוח לחלוטין.
החלטות נפוצות לנייד
מכשירי מובייל הם בקלות המסובכים ביותר לטיפול. יש מגוון כה מגוון של מכשירים, כולל מכשירים ישנים שעדיין נמצאים בשימוש, לא קל לכסות את כולם. לכן העיצוב הראשון בסלולר כל כך פופולרי. הפילוסופיה פשוטה. התחל תחילה עם העיצוב הנייד הפשוט ביותר, ובנה עליו למסכים גדולים וגדולים יותר. בדרך זו, אפילו המכשירים הוותיקים והקטנים ביותר עובדים, אך עם פחות תוכן ופחות תכונות. האתר אינו מוגזם, הוא פשוט מציג תחילה רק את המידע החשוב ביותר והגישה אליו הנפוצים ביותר.
הנה טריק מעניין להתמודדות עם טלפונים; הפוך את רזולוציות שולחן העבודה לצידן. בטח, ישנם חריגים יוצאי דופן, אך רוב הטלפונים הנוכחיים עוקבים אחר דפוס זה.
- 720x1280 נפוץ במכשירים ישנים יותר - במשך מספר שנים, 720p שהופעל על צדו היה הסטנדרט הנפוץ ביותר למכשיר נייד. במקרה כזה, אינך צריך לדאוג למצב נוף, מכיוון שהוא זהה לשולחן העבודה 720p. פשוט כיסו את רזולוציית הדיוקן ברוחב של 720 פיקסלים.
- 1080x1920 האמצע - 1080p היה הסטנדרט במשך זמן רב מאוד. זה עדיין נפוץ מאוד במכשירים בינוניים. אם אתה עומד לתמוך ברזולוציה ניידת אחת בלבד, זהו זה.
- 1440x2560 הנוכחי העליון - מכשירים ניידים הולכים וגדלים והמסכים ממשיכים להיות בעלי רזולוציות גבוהות יותר ויותר. 1440p הוא תקן מעניין מכיוון שיש מגוון רחב של רוחבי מסך - אורכים במקרה זה - שנכנסים לטווח זה. בשני מחשבים שולחניים וניידים, הנפוץ ביותר הוא 1440x2560. זה נותן למסך את יחס הממדים הנפוץ 16: 9. בנייד זה משנה קצת פחות משולחן העבודה מכיוון שאורך המכשיר לא משפיע הרבה על העיצובים שלך.
לפני שאתה תומך בשמחה רק בשלוש רזולוציות סלולריות, אתה צריך גם להבין שיש אנשים שמשתמשים בטלפונים ישנים עד כדי גיחוך עם מסכים זעירים. עליכם תמיד לבנות רזולוציה מינימלית תחתונה כדי להבטיח שהאתר שלכם נראה טוב אפילו למישהו שמשתמש בטלפון לפני מספר שנים.
טיפים פשוטים שכדאי לזכור
קל לקחת חבורה של עובדות על רזולוציות מסך, נגר ולהתחיל ללעוג לעיצובים, וזה בדיוק כשאתה נקלע לצרות. ישנם כמה רעיונות מרכזיים שכדאי לזכור בכל פעם שאתה מעצב אתר, והם מתקיימים ברוב, אם לא בכל המצבים.
- עיצוב רספונסיבי הוא נוזלי - אתה עלול להרגיש את הנטייה לבנות מערך עצום של נקודות עצירה לתוך ה- CSS שלך בכדי להסביר את כל גודל המסך והמצב האפשרי. זו דרך נהדרת לשגע את עצמך. עיצוב אתרים רספונסיבי נועד להיות גמיש מספיק בכדי להשלים פערים ואי סדרים. אם אתה מוצא את עצמך מגדיר יותר מדי מספרים סטטיים, בין אם הם בשאילתות מדיה ובין אם עבור הגורמים עצמם, אתה כנראה הולך בדרך הלא נכונה.
- אנשים לא תמיד ממקסמים את הדפדפן שלהם - סוג זה הולך יד ביד עם הנקודה הקודמת. אתה יכול עיצוב לגדלי מסך, אבל כשמישהו לא ממקסם את חלון הדפדפן שלו, כל מה שעולה בעשן. על ידי שמירת דברים בעיצוב שלך, אתה יכול למנוע בעיות בגדלים שונים של חלונות הדפדפן.
- לבדוק הכל - נסה לשבור את האתר שלך. זו הדרך היחידה שתמצא את כל הבאגים וחוסר העקביות שיהרסו את חוויית המבקר. ל- Chrome כלים מובנים לבדיקת רזולוציות מכשירים עם רשימה מלאה של מכשירים פופולריים לעבודה. תמיד יש לך אפשרות לגרור את חלון הדפדפן שלך לגדלים שונים בעצמך כדי לראות גם כיצד האתר נראה בגדלים שונים וגם כיצד הוא מסתגל ונשבר.
- אל תצפה מהמשתמשים שלך את האחרונה והגדולה ביותר - זה חוזר לנקודה הקודמת על טלפונים ישנים יותר ורזולוציות קטנות. אתה לא יכול לצפות מאנשים שיהיו להם מכשירים חדשים. זה חל גם על רזולוציית המסך וגם על כוח העיבוד. טוען אתר עם יותר מדי גרפיקה ויותר מדי JavaScript זו דרך טובה לגרום לאנשים עם מכשיר איטי לעזוב ולעולם לא לחזור.