בונים בא

phone-strip

header

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

גודל מסך לעמות רזולוציה

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

רזולוציות מסכים הנפוצים ביותר

  • מחשבים שולחניים וניידים

1024×768 ורזולוציות גדולות יותר

  • אי-פון (iPhone)

5: 1136×640

4S: 640×960

3GS: 320×480

  • איי-פאד (iPad)

דור ראשון ושני: 1024×768

דור שלישי: 2048×1536

  •  מיני איי-פאד (iPad Mini)

1024×768

  • טלפונים וטאבלטים מבוססי אנדרואיד

רוב הטלפונים הם ברוחב של 320 פיקסלים או 360 פיקסלים, והטאבלטים הם ברוחב של 800 פיקסלים. אבל כאשר מעצבים עבורם, בדרך כלל, מקובל לחלק אותם לקבוצות הבאות בהתבסס על צפיפות המסך של (בפיקסלים - Density-independent pixel - dp), שמגדיר את הגודל המינימאלי של המסך.

מסכים קטנים: 426dp x 320dp

מסכים רגילים: 470dp x 320dp

מסכים רחבים: 640dp x 480dp

מסכים רחבים מאד: 960dp x 720dp

למידע נוסף אפשר להעזר בוויקיפדיה

הדגמות

הדגמת ג'ומלה

בקרוב, הדגמת רכיבים ומודולים...