Chapter 18

Responsive Web Design

(RWD)

Contents

18.1 Try It Out....................... 186

18.2 Best Practices.................... 187

18.3 Media Queries (MQ)................ 188

18.4 Visual Breakpoints................. 189

18.5 A Five-Section Layout............... 190

18.5.1 HTML: Most Important First............ 191

18.5.2 C-N-A Narrow Layout................ 192

18.5.3 CN-A Tablet Layout................. 192

18.5.4 NCA Laptop Layout................. 193

18.5.5 Try it!......................... 193

18.6 Supporting Markup................. 194

18.6.1 Divisions....................... 194

18.6.2 Spans......................... 194

18.6.3 Nesting........................ 195

18.7 For Further Study.................. 196

Ancient websites did not worry about cell phones. (They barely worried
about color and images.) Today’s websites do. Today’s devices include
smart phones, phablets (phone tablets), tablets, laptops, game consoles,
televisions, print, 3d-glasses, and wrist watches.

185