Pixel Dimension Guide for Interactive Media

Guide

http://responsivedesignchecker.com/ Is arguably the best website to understand how responsiveness works. There, you can enter the url of any website and see what it will look like on every main-stream device currently in production.

OPTIMUM BREAK POINTS: Based on a study that I performed through user testing on a range of devices as well as utilizing the responsivetest.net website... I recommend using the following pixel dimension for your design layouts:

IMAGES

It is critical to prep all images together prior to installing them into the site or app and to follow the following process:

• Set up a template in Photoshop to match image sizes to each other and easily test color correction consistency
• Size: Maximum 1400 pixels height and width.
• Use smaller images, sized appropriately for quarter and half page images as well as icons.
• Use JPEG, PNG-8 or GIF compression to maximize site loading speed.
• Use PNG-24 compression only for flat color art or small transparent icons and logos. Otherwise your site will be slowed dramatically due to their large image file sizes.
• Sharpen images a little bit after resizing up or down
• Adjust the curves and hue/sat of all images to match each other on the page

WEBSITES & APPS - WIDTH:

• 1200 + for all desktop, laptops & large tablets
• 992-1199 for 10" tablets (horiz)
• 766-991 for 7" tablets (horiz) & 10" tablets (vert)
• 548-765 for 7" tablets (vert) & phones (horiz)
• 320-548 for phones (vert)

To accomplish this you will:

1. Set your break points in Dreamweaver or Muse at: 320, 548, 766, 992, 1200
2. Configure 5 layouts that optimize usability between each breakpoint.
3. Test your design at http://responsivedesignchecker.com/

WEBSITES & APP - HEIGHT:

Websites will scroll vertically to display content of any height. However, it is important to keep in mind that if you want a graphic, video or paragraph to fit completely in the viewport (under the browser button bar), the worst case scenario you need to design for is...

• 550 pixels tall

HTML5 CANVAS

If you design an html5 app to fit into a phone, tablet or small laptop view port without scrolling, the browser button bar will remain in-place. Therefore, the available height is diminished.

• 980 x 520 Horizontal Orientation
• 630 x 980 Vertical Orientation

To accomplish this you will:

1. Set up your Adobe Animate file at 980 x 520 (horiz) or 630 x 980 (vert)
2. In the publish settings choose "make responsive by width".
3. Note: HTML5 Canvas apps are designed to work only in horizontal OR vertical orientation. They are not responsive like a typical Bootstrap web page.

Native Apple or Android App.

Native apps are typically set to fill the available space on a devices viewport while maintaining the original ratio of the app. The pixel dimensions below are optimum for all devices and will minimize the amount of black letterbox spaces either on the sides or the top and bottom.

• 1024 x 600 - for a horizontal app
• 600 x 1024 for a vertical app

WordPress margins:

• Place this code in the "add css" under "theme customizer"

.et_pb_row {

width: 90%;

}