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

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

גודל המסך הוא האלכסון של המסך בדרך כלל באינצים, בעוד הרזולוציה היא כמות הפיקסלים שמוצגים על המסך. הרזולוציה מוצגת בערכים של גובה ורוחב (למשל 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

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

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

המשך קריאה: כיצד להשתמש בתגי תוכן בג'ומלה

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

המשך קריאה: הפיכת תפריט לתפריט נפתח במסכים קטנים

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

המשך קריאה: עקרונות המפתח בתיכנון אתר ריספונסיבי