Common patterns for content organization
The patterns we will see next have to do with the overall organization and layout of the website or application.
Responsive applications
The term responsive relates to the way the layout of an application adapts to the size of the screen. Perhaps you have heard of the “mobile-first approach,” which is a philosophy to design first for smaller screens, and then move upward to the possible resolutions to reach the desktop, which is considered the largest. While there are ways to accomplish this with JavaScript, the most sensible direct approach is to use well-thought-out designs with CSS media queries.
Depending on the application, there are certain formulas to create a responsive site, but analyzing the many alternatives goes beyond the objectives of this book. Instead, we will see only one as an example, using the “switch columns” method. This method basically sets for mobile (or narrow portrait screens) the...