CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 188
RWD the common wisdom says that pixels are not relative. Instead, RWD
assumes the reliable measure is text size. I should be using things like 50em
instead of 400px. That way, if the user zooms in or out, the webpage can
respond appropriately.
Image Sizing:Images naturally have certain dimensions that are measured
in pixels. If you display a large image on a small device, will it scale down
or will it force the user to scroll? Use a max-width: 100% attribute to keep
the image from being too wide to fit on the device’s screen.
Worst Practice: No Customization
The worst practice is to ignore the variation that is out there. This is a very
common practice.
Worst Practice: Separate Website
Historically, one popular approach has been to create separate webpages, or
whole websites, devoted to mobile platforms (meaning smart phones), etc.
Example.com might be some organization’s main website, and m.example.com
might be that same organization’s website that is optimized for mobile de-
vices. This is regarded as a bad approach.
SEO is important. Having the same content on more than one webpage hurts
yourSEOrankings because it splits your page referrals. Google specifically
advises webmasters to present their content only once, and then style it
differently depending on the platform.
18.3 Media Queries (MQ)
Through CSS we can specify different styling for different device geometries.
Exam Question 319(p.355): What does MQ stand for?
Acceptable Answer:media query
/ default (tiny screen) styling goes first /
@media screen and (min-width: 400px) { / small / }
@media screen and (min-width: 800px) { / medium / }
@media screen and (min-width: 2000px) { / large / }
@media print { / paper / }
Exam Question 320(p.355): List the two main media types that can be
specified in media queries.