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

(יש שגולשים ברוזולוציות גבוהות יותר, אך מדובר בפחות מ 1% מהגולשים)

הבאנר נראה במלואו מקצה לקצה בלי לאבד את התוכן החשוב - צילום המחשב והמילה DREAM בצד שמאל.

דוגמא למסך ברוזולוציה 1300X760, הרוזולוציה לא גבוהה, ונמצאת בשימוש בעיקר במחשבים ניידים, או מחסכים בגודל 18-20 אינצ'

הבאנר מוצג מקצה לקצה של המסך, אך נחתכו ממנו כ-300 פיקסלים מכל צד, ואפשר לראות שהמילה DREAM נחתכה.

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

טלפונים סלולאריים / סמארטפונים דורשים עיצוב שונה.

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

לכן, ההמלצה היא להכין שני סטים של באנרים - אחד למחשב ואחד לסמארטפון.

סט הבאנרים לסמארטפון, הרוחב המומלץ הוא סביב ה- 500 פיקסלים וגובה 200-400 פיקסלים.

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

בדוגמא כאן, באנר שתוכנן לרוחב 500 וגובה 200 ולכן לא נחתך בצדדים.