CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 191

On a tablet display our webpage will implement a CN-A design. Content
and navigation will appear side by side, but the advertising will be deferred
until later. Within the CN section there will be a 66-33 split.

On a cell phone display, our webpage will show the divisions one after an-
other, vertically, implement a C-N-A design.

We will use media queries to select the styling that should be in effect. For
phones, we will assume the width is less than 360px. For desktops, we will
assume the width is 800px or more. The media queries could look something
like this.

/ default: phone CSS /
@media (min-width: 360px) { / tablet overrides / }
@media (min-width: 800px) { / desktop overrides / }

18.5.1 HTML: Most Important First

For SEO, we want to have our HTML include the most important things
first. We will use an html layout something like this.

Headers

lorem ipsum ...

Content

lorem ipsum ...

Navigation

lorem ipsum ...

Advertisements

lorem ipsum ...

Footers

lorem ipsum ...

We will add divs so we can properly float things later.