CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 187
Obviously you could change the “breakpoints” that were used above by
adding more or changing their values.
Try it. Then keep reading.
18.2 Best Practices
Scale: Tell the browser how to scale your content for the viewport. This
should go near the top of your HTML. Otherwise the browser will make its
best guess for scaling, which could result in a tiny webpage that needs to be
zoomed up, or a huge webpage that needs to be zoomed down or scrolled.
Viewportis the technical name for the area of the browser where your
website can be displayed. As your viewport gets wider, you may want to
take advantage of the extra space to arrange your presentation differently.
The media query min-width attribute is very helpful.
<meta name=viewport
content="width=device-width, initial-scale=1">
Mobile First: Mobile is the fastest growing segment among web clients.
The best-practices popular wisdom is to start all new projects by designing
and building them for mobile clients, like smart phones. Then scale them up
to larger form factors and make adjustments in your CSS to take advantage
of the larger real estate. (Maybe someday we will design for wristwatch first
or for eyeglasses first.)
Exam Question 317(p.355): Explain the “mobile first” philosophy.
Acceptable Answer:first design your website to run well on mobile de-
vices, then modify it for other platforms
Also remember that smaller devices typically have less computing power.
Over time this will probably change, but for today it is best on small devices
to avoid all the cool stuff like shadows, gradients, and transformations. Use
media queries to add them into the CSS for the larger devices.
Exam Question 318(p.355): Shadows, gradients, and transformations
should be limited by media queries. (yes/no)
Required Answer:yes
Relative Units:I personally like to specify things in pixels, which I con-
sider to be a relative unit because it always looks the same size. But for