Responsive Web Design – How to Create Responsive Web Apps
Responsive web design (RWD) means designing web pages to display nicely on the screen sizes you intend to support (mobiles, tablets, and desktops).
Below are some features you can use to make your website naturally responsive.
Viewport Meta Tag
Use the viewport meta tag in your HTML document’s <head>
element to render the webpage at its actual non-zoomed screen resolution.
- The
name="viewport"
attribute specifies that the meta tag is for configuring the viewport. - The
"width=device-width"
value forces browsers to load web pages using the device’s actual viewport width. This allows you to override any falsified viewport size with the device’s real width. device-width
is equivalent to100vw
or100%
of the device’s viewport width."initial-scale=1"
tells browsers not to zoom in (or out) the viewport during the webpage’s initial loading.
Dynamic Width
Use dynamic width (like max-width=900px
) to make elements flexible. Fixed dimensions, such as width=900px
, prevent elements from shrinking below the specified size.
Note that you don’t always need percentages for responsive design because:
- Most elements are naturally responsive to the viewport.
- Percentages do not help the aesthetic look of an element’s margins as you change the screen size.
Responsive Layout Tools
Use CSS Grid, Flexbox, or Multi-column to create responsive layouts.
For instance, the snippet below tells browsers to split the <article>
’s content into multiple columns of 70px
minimum widths.
Therefore, the computer will automatically calculate the number and size of columns the <article>
’s width can fit.
Media Queries
Use media queries to style your elements based on some specified tests.
For instance, the snippet below tells the browser to change the body
element’s background color from pink
to cyan
if the viewport has a 600px
minimum width.
Below are the viewport breakpoints developers often use.
Small devices (phones)
Medium devices (tablets)
Large devices (laptops/desktops)
Extra Large devices (large laptops/desktops)
Responsive Images
Use the <picture>
element or the <img>
’s srcset
and sizes
attributes to recommend the appropriate images for different viewport sizes.
For instance, consider the following code:
The snippet above provides metadata that hints browsers to display:
mobile-size-couple.webp
on viewports having a600px
maximum width.regular-size-couple.webp
on viewports having a600px
minimum width.
Therefore, browsers supporting the <picture>
element will choose the <source>
element that best fits the user’s viewport and display it in the <img>
’s space.
However, browsers not supporting <picture>
will fall back to the <img>
element.