Determining the App’s Functionality and Structure - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 66

eXerCISe 5-1: pLaYING WIth a reSpONSIVe LaYOUt
in an effort to demonstrate the content reflow challenges that responsive layout can present, let's look at an
example site.
For the purposes of this exercise, you've been charged with converting the design in Figure 5-1 to
a responsive layout.
Figure 5-1. A sample site that needs to be converted to a responsive layout
this is a pretty standard layout: a header, a footer, a left-hand column with blog entries, and a right-hand column
with standard “sidebar” content (ads and a newsletter capture).
reflowing Content on Small Screens
logically, when the site is rendered on a handheld device, it wouldn't make sense to show two columns side
by side; the content would be far too cluttered and narrow. the natural solution is to switch to a single-column
layout, which allows the content to be displayed in a more aesthetically pleasing manner.
however, the advertisers for this site won't stand for the ads to be buried beneath the blog entries—as more
content is accumulated, there could be as many as eight entries displayed in the left column—so simply stacking
the left column on top of the right one won't cut it.
to solve this problem, you need to somehow interleave the content from the left column with the content from the
right. this requires a few adjustments to the markup to allow each section of the main content area to flow on its own.