Common Techniques in Responsive Web Design - SitePoint

Common Techniques in Responsive Web Design - SitePoint:

"Figure 6. Maximizing Impact at Higher Resolutions

Techniques for Responsive Layout

Great, so how do we implement this kind of experience? Generally, the adaptive layout for Web sites boils down to two techniques:

• Identify break points where your layout needs to change.
• In between break points, scale content proportionally.

Let’s examine these techniques independently.

Scaling Content Proportionally Between Break Points

As pointed out in the evaluation of microsoft.com, the relative layout of the header, hero image, navigation area and content area on the home page do not change for a screen width of 900 px or higher. This is valuable because when users visit the site on a 1280 x 720 monitor, they are not seeing a 900-px wide Web site with more than 25 percent of the screen going to whitespace in the right and left margins.

Similarly, two users might visit the site, one with an iPhone 4 with 480 x 320 px resolution (in CSS pixels) and another using a Samsung Galaxy S3 with 640 x 360 px resolution. For any layout with a width less than 512 px, microsoft.com scales down the layout proportionally so that for both users the entire mobile browser is devoted to Web content and not whitespace, regardless of whether they are viewing the site in portrait or landscape mode.

There are a couple of ways to implement this, including the CSS3 proposal of fluid grids. However, this is not supported across major browsers yet. You can see this working on Internet Explorer 10 (with vendor prefixes), and MSDN has examples of the CSS3 grid implementation here and here.

In the meantime, we’re going to use the tried-and-tested methods of percentage-based widths to achieve a fluid grid layout. Consider the simplistic example illustrated in Figure 7, which has the following design requirements:

1. A #header that spans across the width of the screen.
2. A #mainContent div that spans 60 percent of the width of the screen.
3. A #sideContent div that spans 40 percent of the screen width.
4. 20-px fixed spacing between #mainContent and #sideContent.
5. A #mainImage img element that occupies all the available width inside #mainContent, excluding a fixed 10-px gutter around it.

Figure 7. Set Up for a Fluid Grid

The markup for this page would look like the following: ...."

quoted from / read more:
 http://www.sitepoint.com/common-techniques-in-responsive-web-design/