Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power.

Responsive Web Design is an approach to designing web content that responds to the restrictions of different devices. The page structure and CSS rules must be flexible to accommodate to these differences. This article covers some basic techniques for Responsive web design.

1. Use Media Queries

Media queries are a technique that allows you to change the presentation of your content according to the user’s device viewport size.

Media queries consist of a media type and at least one rule to limit the style sheets’ scope. This rule can be, for example, a maximum width or height. If the media type and rules match the device the document is displayed on, then the styles are applied. You may define as many media queries as needed, according to the expected audience’s device types and screen sizes.

This is an example of what media queries look like for a three column layout that changes into a two column layout and one column layout as the viewport size shrinks.

/* Create three equal columns that float next to each other */

.column {
  float: left;
  width: 33.33%;
}

/* On screens that are 768px wide or less, change column width to 50% to achieve a two column layout */

@media screen and (max-width: 768px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, change column with to 100% to achieve a single column layout */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

2. Make images responsive

What problems are we solving with responsive images?

If images are too big for the screen they are displayed on, it is possible to show a cropped version that contains only the important part of the shot. You might also display an intermediate version on widescreen devices like tablets. This is the solution to a problem known as the art direction problem.

Some issues may turn up when using a single image on multiple resolutions. Using large images on a page is not ideal if it is being viewed on a mobile screen causing a waste of bandwidth. On the other hand, a small raster image starts to look grainy when displayed at a larger size than its original dimensions (a raster image has a set number of pixels wide and a set number of pixels tall). This is called the resolution switching problem.

The ideal approach would be to have multiple resolutions of an image available and provide the image in the appropriate size depending on the device that is accessing the site.

To make things even more complicated, some devices have high-resolution displays that need larger images to look perfect. This is basically the same problem, but in a slightly different context.

You may think that this is solved with vector images, and to some extent it is: they have small file sizes and good scalability, and should be used whenever possible. However, it can be very difficult to create vector-based images for images with a lot of detail, such as photos. In these cases, a bitmap image format like JPEG is more suitable.

This problem came to light when the first iPads were launched and the HTML5 standard came out. Previously, the only devices used to navigate were desktop and laptop computers.

How do you easily turn an image responsive? Like this:

img {
  max-width: 100%;
  height: auto;
}

As image types and image resolutions increased, various responsive image solutions were created. These responsive imaging solutions can be implemented to solve the issues mentioned above: use the same content but with a different number of pixels (resolution) or use different images for different locations on the page (art direction).

To specifically solve the resolution switching problem

To solve this problem, use the srcset attribute and the display density descriptor. The display density descriptor tells the browser how dense the resolution should be when using each image size: 1x, 2x, 4x, etc.

Define the srcset attribute with an array of images of different sizes and specify at what screen-density each image should be displayed.

This is useful for serving smaller image files to narrow screen devices and also, optionally, to serve different resolution images to high density / low density displays.

     src="image-640w.jpg" alt="my image">

To specifically solve the art direction problem

To solve this problem, we can use the element with the element inside. In each element we´ll define 2 attributes: media and srcset. The media attribute’s value is a media query, the same as regular responsive design media queries, and for each media query condition, a srcset attribute is defined. Inside every element, we add a regular element as fallback.

This is used to crop an image and show it in portrait form, in case the display screen is smaller.

/* First source, medium size */ 

/* Second source, large size */

/* If is another display, show this image in small size */

3. Use Retina Images for Higher Resolution Displays

With the rise of Internet-connected devices, their sizes and specifications vary, and the displays they use may be different externally and internally. Pixel density changes between devices and this density is known as Pixel Per Inch (PPI) or Dots Per Inch (DPI).

Due to the difference in pixel density between “Retina” and “Non Retina” screens, some images that were not intended for high resolution screens may appear “pixelated” when displayed on high resolution devices.

The easiest way to make your images show correctly on high-resolution displays is to double the image size and then set their width and height values ​​to half of what the original file is.

4. Make Typography Responsive

Instead of using ems or pixels for text size, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different elements.

Viewport units are relative to the viewport dimensions (width or height) of a device while percentages are relative to the size of the parent container element.

The four different viewport units are:

• VW (viewport width): 10vw would be 10% of the viewport's width.
• VH (viewport height): 3vh would be 3% of the viewport's height.
• VMIN (viewport minimum): 70vmin would be 70% of the viewport's smaller dimension (height or width).
• VMAX (viewport maximum): 100vmax would be 100% of the viewport's bigger dimension (height or width).

Here is an example of how to use it.

Camper Cat

Thanks for bearing with me. I hope this information is useful.

References

Larson, Q. (n.d.). freeCodeCamp.org. Retrieved April 28, 2020, from https://www.freecodecamp.org/

Data, R. (n.d.). Responsive Web Design — Media Queries. Retrieved April 28, 2020, from https://www.w3schools.com/css/css_rwd_mediaqueries.asp

• A Complete Guide for Responsive Images!
• Mobile first design vs. Desktop first design vs. Element first design
• CSSVR: Progressive VR experiences
• Getting Started With VR Interface Design - Smashing Magazine
• Designing User Experience for Virtual Reality (VR) applications
• Responsive images

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com

Easy-to-Follow Responsive Web Design Principles was originally published in Quadion Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.