Composition Width and height varies. Twitter’s design is centred, and shifts left and right across the background image, depending on the size of the user’s display and their web browser’s window size.

The background design should support a wide variety of window dimensions. Broadly speaking, there are four types of Twitter background designs: extended profile, big image, fade to color, and tiled (repeating):

Extended Profile Extended profile designs allow the user to expand upon their biographical information, display a self-portrait, along with other useful (but non-clickable) links (eg. their Facebook profile, email address, etc). Extended profiles are also usually based on big image, or fade to color designs (see below). Big Image Whether it is an impressive photograph or a just a really large design, a big image design is great for big impact. Unfortunately, they don’t work well at all window sizes. Savvy designers can also include extended profiles and/or fade to color in a big image design. Fade to Color Fade to color designs add some visual interest, without the risk of ending in a harsh edge on larger displays. To achieve this, the image is blended at the edges into a single colour, which is then specified as the background color. Tiled (repeating) Tiled background designs produce a pattern-like effect. The main advantages of tiled designs is they work at any window size and are fast to load. However, the inherent repetition can be a drawback.

Optimal Dimensions 1280px is a common width to optimize for. Check with your contest holder. This allows for two 250px wide columns either side of the main content area.

Minimum Dimensions Small displays may obscure graphics placed to the left of the main content. Most modern displays have resolutions greater than 1024 × 768px.

Maximum Dimensions Larger displays may obscure graphics placed to the right of the main content. 1920 × 1200px should account for most display resolutions. No more than 2560 × 1600px for expansive photographic-based designs. This supports 30-inch cinema display resolutions!

Branding ontwerps suggests 191 × 36px as optimal dimensions for branding (eg. a logo). The width is what is important here—not so much the height. Add approximately 12px of padding from the top to neatly align with the top of Twitter’s logo. A little padding along the left edge (20px to 40px) is nice and easy on the eye. If text is incorporated into the background image then small font sizes should be used with caution (due to pixellation).

File Size Twitter restricts images to a file size of 800 KB, or less. Aim for 100 KB, or less.

File Types Twitter accepts: GIF, JPG, and PNG file formats.

Color Palette In Twitter, you can customize Twitter profile colors, under Settings › Design. Using hex codes, you can change the color of the background, text, links, sidebar, and sidebar border.

No related posts.