RWD art direction approach | CSS media query and background images
RWD MEDIA QUERIES and BACKGROUND IMAGES
There are many strategies for creating a RWD Responsive Web Design. The approach you decide on will depend on the content and the users needs. In this module we will explore several strategies for working with the main hero banner. We will target Mobile, Tablet, and Desktop devices. The breakpoints I use in the demos represent common devices. Keep in mind that the breakpoints or aspect ratios will change as devices change and advance.
BACKGROUND-IMAGE This strategy is about working with background images. To demonstrate the concept the image will be placed in the body tag. You can accomplish the same result placing the images in the background of a header tag. In fact, the header may be a better choice. Which approach really depends on the specific needs of your layout.
This is a performance approach as the query will only load the image that meets the query test. This does assume a device with a fixed viewport is being used. This is also an art direction approach as we can load different images to meet different design layouts.
Speaking of performance, you should begin to use the "Inspect" developer option/tool available in most browsers. Using the tool will help you better understand how your pages are loading assets and making requests on the server. Remember, latency is enemy number one in your fight to create the best user experience possible.