Main Content Section

This is the first example that we looked at. As the space available becomes more limited, the navigation first jumps under the logo and then reformats to bar navigation.

This example includes an additional button that appears once the content responds to the smaller size allowing the viewer to quickly access the main content. At full screen, this button is hidden.

Notice how the images also resize themselves to fit in the area available. Think carefully about image use. What is a smaller image on the large version, becomes the larger image on the small screen. They are scalled to 100% for whatever area is there to fill.