This post is originally posted at programmingly.dev.
Please Visit Programmingly.dev to read more articles like this. Thanks

Previously I wrote a blog about responsive design using CSS rem & em units at Medium and Dev.to Website. There I explained with examples of how REM and EM Units work. where to use them? and how they help us in building a responsive website. In this ultimate guide, I’ll explain different methods that help design a perfect responsive website.

Responsive web design refers to the practice of building websites that adapt and resize to look good on all devices, from desktop computers to tablets and mobile phones. It has become essential in modern web development due to the proliferation of internet-connected devices with different screen sizes.

With responsive design, website content dynamically changes layout and scaling to provide an optimal viewing and interaction experience. For example, navigation menus may transform into mobile-friendly dropdowns, images can resize to fit different screen widths, and text will reflow rather than requiring horizontal scrolling. This creates a seamless experience for users no matter how they access the website.

The goal is to serve the same HTML code to all devices and use CSS, flexible grids, and media queries to reformat the page layout and size. This is more efficient for developers than creating and maintaining multiple versions of a website. Responsive design also helps with search engine optimization by having one set of URLs for all devices. Overall, it improves user experience and makes development/management easier. That’s why responsive design is a must-have for modern websites.

CSS Units for Responsive Design

CSS provides several relative units that are key for building responsive websites. Using relative units instead of fixed units like pixels allows elements to scale proportionally across different viewport sizes. This enables responsive design without needing to write unique CSS for each viewport width.

The main relative units for responsive design are:

em – Relative to the font size of the parent element
rem – Relative to the font size of the root element
vw – Relative to 1% of the viewport width
vh – Relative to 1% of the viewport height
% – Relative to the parent element’s width

The benefits of using relative units like em, rem, vw, and vh include:

Elements scale up or down as the viewport size changes. This prevents content from overflowing its containers or looking too small on different devices.
Media queries can progressively refine the design by changing font sizes, dimensions, and layouts based on breakpoints. This removes the need to create unique CSS for each viewport width.
Dimensions scale appropriately if users zoom in or out on the page.
Accessibility is improved since users can resize text to meet their needs.
Code reuse is maximized since the same CSS works flexibly across viewport sizes. There’s no need to write separate CSS for mobile, tablet, desktop, etc.

Using relative units is a foundational aspect of responsive web design. It allows websites to respond dynamically to the user’s device and settings for an optimal viewing and interaction experience.

Font-size Property

When designing a responsive website, it’s important to use relative font sizes that will scale according to the viewport size. The most common units used for font sizes in responsive design are em and rem.

Using em units for font sizes are useful because they allow the font sizes to scale relative to the parent element’s font size. For example, setting the base font-size on the <html> or <body> element to 16px, then setting heading sizes in em:

h1 {
  font-size: 2em; /* Equal to 32px */ 
}

h2 {
  font-size: 1.5em; /* Equal to 24px */
}

The em units will scale the headings relative to the base 16px size set on the root element.

The downside of using em is that it can cause compounding size changes when nested elements use em. For example, if a paragraph inside the h2 used 1.2em, it would be 1.2 * 24px = 28.8px.

To avoid this issue, rem units can be used instead, which are relative to the root font size only. For example:

html {
  font-size: 16px; 
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
}

Now font sizes won’t compound no matter how elements are nested.

Overall, using em or rem for font sizes is essential in responsive design for accessibility and optimal reading at different viewport sizes.

Width and Height Properties

When designing responsive web pages, it’s important to avoid using fixed pixel values for width and height. Instead, you’ll want to use relative units like percentages (%) or viewport-relative units like vw, vh, vmin, and vmax.

For example, to make a div stretch to fill 100% of its parent container’s width, you can set:

div {
  width: 100%;
}

This allows the div to shrink and expand based on the viewport size.

Similarly for height, you can use vh units to size elements based on the viewport height:

div {
  height: 100vh; 
}

This will make the div take up the full height of the viewport. As the viewport changes size, the div will resize along with it.

The viewport units vw, vh, vmin, and vmax are very useful for creating truly responsive elements. 1vh is equal to 1% of the viewport height, and 1vw is 1% of the viewport width.

So if you want an image to be responsive, you can set:

img {
  width: 50vw;
  height: 50vh;
}

This will keep the image sized at 50% of the viewport width and 50% of the viewport height. As the viewport changes, the image will scale up and down smoothly.

Using relative units instead of fixed pixels is key to creating responsive web pages that adapt to any viewport size.

Media Queries

Media queries are a key component of responsive web design. They allow you to specify different CSS styling rules based on certain conditions like screen width, device orientation, etc.

The basic syntax of a media query is:

@media (media feature) {
  /* CSS rules go here */
}

Some common media features include:

width – Target specific screen widths
height – Target specific screen heights
orientation – Target portrait or landscape orientations
aspect-ratio – Target-specific aspect ratios

For example, to apply styles for screens narrower than 600px, you’d do:

@media (max-width: 600px) {
  /* Styles go here */
}

To target high-resolution displays, you can use min-resolution:

@media (min-resolution: 192dpi) {
  /* Styles */ 
}

You can combine multiple media features to target specific scenarios:

@media (max-width: 600px) and (orientation: landscape) {
  /* Styles */
}

The key is to design for mobile first, then enhance the styling for larger screens using media queries. This allows you to progressively add more advanced styling as screen size increases.

Some common breakpoints to target with media queries:

320px — Extra small mobiles
480px — Small mobiles
600px — Medium mobiles
768px — Small tablets
1024px — Laptops
1200px — Desktops

So in summary, media queries are essential for responsive web design as they allow you to optimize the user experience across different devices and screen sizes.

Responsive Images

Ensuring images look crisp and load fast across varying screen sizes is crucial for responsive web design. There are two main techniques to handle responsive images:

Use srcset and sizes for optimal images

The srcset and sizes attributes allow you to specify different image files for different screen widths. srcset defines the available image sources, while sizes defines the CSS widths that will select each image.

For example:

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 90vw, 600px" >

This loads the small.jpg for viewports up to 600px wide, medium.jpg from 600-1000px, and large.jpg above 1000px. The sizes attribute tells the browser what image size to use based on the viewport width.

Art direction with the picture element

When you need to display different image compositions for different screen sizes, you can use the element. Inside the picture, you specify multiple elements with different media queries to load the appropriate image source.

For example:

<picture>
  <source media="(max-width: 600px)" srcset="vertical.jpg">
  <source media="(min-width: 600px)" srcset="horizontal.jpg">
  <img src="default.jpg">
</picture>

This displays vertical.jpg below 600px and horizontal.jpg above 600px. The element acts as a fallback if none of the source files match.

The picture element allows true art direction for responsive images.

Flexbox Layout

Flexbox is a CSS layout module that makes it easier to design flexible and responsive layouts without using float or positioning. Some key benefits of Flexbox for responsive design include:

Flex containers automatically resize elements to fit different screen sizes. Setting a flex container to display: flex enable flex properties.
flex-wrap: wrap allows elements to wrap to a new line on smaller screens so the content stays within the container.
align-items controls the vertical alignment of items in a flex container. This helps keep content organized on mobile screens when stacking elements. Values like center, flex-start, and flex-end align-items.
Flexbox makes it simple to switch layouts between mobile and desktop. Media queries can toggle between row and column orientations with flex-direction.
Elements can easily expand and contract to fill available space with flex-grow and flex-shrink. This helps content resize responsively.
The order property rearranges items visually without affecting the source order. This enables optimizing content order for mobile vs desktop.

Overall, Flexbox provides powerful tools to create responsive layouts that adapt across screen sizes and devices. Properties like flex-wrap, align-items, flex-direction, flex-grow, and order make flexible containers and content ordering easy without floats or fixed positioning.

CSS Grid Layout

CSS Grid Layout is a powerful tool that makes building fully responsive page layouts much easier. Here are some of the benefits of using CSS Grid for responsive web design:

It allows you to define columns and rows to control the layout directly in CSS instead of using floats and positioning.
The grid-template-columns and grid-template-rows properties let you specify column and row sizes as fractions, percentages, or fixed widths/heights.
Auto-placement flows content into the grid cells in the order they appear in the HTML without needing to position elements.
The grid-template-areas property lets you visually map out grid sections and give them semantic names to reference in CSS for placement.
grid-auto-rows and grid-auto-columns sizes unspecified rows and columns automatically.
minmax() functions in grid-template-columns/grid-template-rows set minimum and maximum ranges for implicit grid tracks.
Media queries can rearrange and resize the grid layout at different breakpoints.
The auto-fit and auto-fill properties automatically insert rows or columns of the size you specify to fill the container.

So in summary, CSS Grid gives you very fine control over a responsive grid with powerful alignment, sizing, and positioning features that adapt smoothly across screen sizes. By leveraging Grid properties like template areas, auto-placement, minmax(), and media queries, we can create robust responsive page layouts easily.

Conclusion

Responsive web design is crucial for delivering a quality user experience in today’s multi-device world. By leveraging CSS units like percentages, vh, vw, rem, and em, we can build websites that dynamically respond and adapt to different screen sizes and orientations. Combining these relative units with @media queries gives us powerful control to adjust layouts and styling for optimal viewing on anything from small phones to large desktop monitors.

Other important responsive techniques covered include making images flexible, using Flexbox and CSS Grid for intelligent content rearrangement, and implementing responsive. With the right mix of relative units and media queries, we can reuse our code efficiently instead of having to write unique styling for each device. This saves development time and reduces code bloat.

The end result is a website that works well across all devices – which is crucial when mobile browsing now exceeds desktop. Responsive design ensures our content is accessible and enjoyable for every user, regardless of their screen size. As mobile adoption continues to grow globally, responsive techniques will only increase in their importance for delivering a quality, seamless experience to all of our site visitors.

The Ultimate Guide For Designing A Professional Responsive Website