Book Image

Responsive Design High Performance

By : Els
Book Image

Responsive Design High Performance

By: Els

Overview of this book

This book is ideal for developers who have experience in developing websites or possess minor knowledge of how responsive websites work. No experience of high-level website development or performance tweaking is required.
Table of Contents (11 chapters)
7
7. Speeding Up Development with Design Concepts, Patterns, and Programs
10
Index

Conditional loading


Responsive designs combine three main techniques, which are as follows:

  • Fluid grids

  • Flexible images

  • Media queries

The technique that I want to focus on in this section is media queries. In most cases, developers use media queries to change the layout, width height, padding, font size and so on, depending on conditions related to the viewport.

Let's see how we can achieve conditional image loading using CSS3's image-set function:

.my-background-img {
background-image: image-set(
 url(icon1x.jpg) 1x,
 url(icon2x.jpg) 2x
);
}

You can see in the preceding piece of CSS3 code that the image is loaded conditionally based on its display type. The second statement url(icon2x.jpg) 2x would load the hi-resolution image or retina image. This reduces the number of CSS rules we have to create. Maintaining a site with a lot of background images can become quite a chore if a separate rule exists for each one.

Here is a simple media query example:

@media screen and (max-width: 480px) {
    .container...