Sensorial’Org

According to W3School 36% of Internet users still have 1024 x 768 resolutions as of early 2009. From the Streamed Hardware Survey, 19% are using 1024 x 768, 23% with 1280 x 1024, 12% with 1440 x 900, and 18% with 1680 x 1050.

With that in mind, there’s five additional things that you have to be aware of:

Constraint: The background image is fixed.
Design implication: The background will not move with the scrolling. If you have text running across the top then there is a chance (depending on the user’s resolution) that the content area (the area holding the tweets and the sidebar) will overlap* that information.

Constraint: The background image is fixed to the top left while the content area (763px) is centered.
Design implication: As screen resolutions increase, the content area will be shifted to the right relative to the background image. On a resolution of 1024, the content area will begin at [(1024-17-763) = 244]/2 = 122 pixels from the left. On a resolution of 1250, it begins at the 250th pixel, and on 1440 at 330, etc.

Constraint: The background image can only be tiled both vertically and horizontally, or not at all.
Design implication: The background should be designed such that it tiles seamlessly or disappears gracefully against a solid background colour. Otherwise, you’ll end up with a half-baked mosiac on larger resolutions. But this also means that you can have your background image take the dimensions of the maximum possible resolution provided that…

Constraint: The background image cannot exceed 800 kb.
Design implication: Optimize graphics for the web. Half of second delay in responsiveness can kill user satisfaction.

Constraint: The background of the header/footer navigation and the tweets will always be white.
Design implication: Before you even begin your comps, you have to start thinking about colour schemes. Eventually, you’ll have to pick a font colour that’s dark enough against white and provides enough contrast with the background of your sidebar.

* Overlapping isn’t really the main concern. If the background is not fixed, it will disappear when the user scrolls anyway; however, if the content area cuts across the design then it’s a disruption. Really, I’m just concerned about the aesthetics.

So designing for Twitter, a walk through

I want something graphical on the left to balance out the right sidebar. However, I won’t go for an additional sidebar because unless someone has the exact same resolution as me, the content area will slice across it or be so far away from it that it’ll look awkward. I’m going to go for a collage effect where I intend for the content area to overlap it.

I am going to design for the two most popular resolutions: 1024 and 1280. That means the center of the graphic will begin at the (122 + 250)/2 = 186th pixel. Or graphically speaking, where the black vertical line is:

Working with that landscape, I used guides (the blue lines) to mark off starting point of all the important elements. I also used placeholders for the content areas. Any graphical elements that I place on top of those placeholders are elements that will be hidden when the background is uploaded.

Now that I’ve laid out my primary resolutions, I still want to accommodate those with 22+ inch monitors. If I don’t consider them, my background would either end abruptly or tile unintentionally. So I extend my canvas to 1680 x 1050 pixels by adding space to the right. I will accept tiling for anyone who has a higher resolution than this.

New placeholders are created and positioned as they would appear on 1440 and 1680 resolutions. This helps me visualize where my design is with respect to the new dimensions:

Finally, with everything laid out: 1024 x 768 (top left), 1280 x 1024 (top right), 1400 x 900 (bottom left), 1680 x 1050 (bottom right).

Now see it action! And to help you design your own profile page, I have all the measurements worked out in a convenient PSD template.