CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 190
larger screen. Those points are called visual breakpoints, or simply
breakpoints. Sometimes these are described as the points at which your
design seems to break because your content does not look its best on the
screen any more.
In the past, designers tried to pick breakpoints based on the phones that
were most popular, and to design their content to look great on that newest
device. This approach is now seen as a mistake. You cannot predict the
next popular size. Instead, work with your content.
Your content should dictate your breakpoints. Not any specific device. Start
stretching the viewport and see where things stop looking good. That should
be a breakpoint.
18.5 A Five-Section Layout
To illustrate the media query breakpoint concept, we will go in depth with a
fairly common layout. Imagine a page that consists of five sections: header,
footer, content, navigation (nav), and advertisements (ads).
ForSEOwe want the most important things first. We may (or may not)
want to have our content come before our navigation and advertisements
because things that come higher in the HTML are seen as being more rele-
vant by the search engines. Therefore the order of elements in this HTML
webpage will be as follows:
header
content
navigation
advertisements
footerWe will call the content section C, the navigation section N, and the adver-
tisements section A.
On a wide display, such as a desktop, the core of our webpage will implement
an NCA (nav content ad) design with an overall header and footer. The main
section will have a 25-50-25 percent split.
The NCA design is based on the idea that our content appears in the middle
of the webpage but goes at the start of our html. Our navigation appears
to the left of it and our advertising appears to the right.