Responsiveness on a website is no longer an option, but rather an important requirement in the development of a modern website. This is because visitors access sites from a variety of devices, ranging from desktops and tablets to smartphones. Therefore, it is very important to ensure that the website remains easy to read and use on all screen sizes. In this article, we will address this issue by using CSS Media Queries and adopting a Mobile-First approach.

Read Related Articles Responsive Layout

What is Responsive Design?

Responsive Design is an approach to web design that allows web pages to automatically adjust to different screen sizes. By implementing Responsive Design on a website, it can provide an optimal visitor experience.

Why is Responsive Design Important?

Mobile Traffic Dominance Statistical data shows that over 60% of global internet traffic currently comes from mobile devices such as smartphones and tablets. When the website we create is not responsive (optimized for desktop devices), mobile users will have difficulty reading the content on our website or may even be unable to access certain features. Conversely, if our website is responsive, it will provide a better and more optimal experience.
SEO Benefits Google, the world's largest search engine, has implemented mobile-first indexing since 2019, which means that Google's algorithm uses the mobile version of a website as the baseline for determining rankings in search results.
Adaptation to Future Technology Technology will continue to evolve rapidly, and every year new devices with different screen sizes will emerge. From smartwatches with very small screens to ultra-wide monitors with 4K resolution, responsive designs built with modern CSS such as CSS Grid, Flexbox, and Media Queries have high flexibility to adapt to viewport sizes that did not exist when the website was first created.

Basic Concept of Media Query

Media Query is a feature in CSS that allows us to apply different styling depending on the device used by visitors, such as screen width, screen height, orientation (portrait or landscape), and device type. Here is an example of using CSS Media Query.

p {
 font-size: 12px;
}

@media screen and (min-width: 768px) {
	p {
	 font-size: 16px;
	}
}

In the code example above, the size of the paragraph text <p> is 12px when accessed on a small device such as a smartphone, then the text size will adjust to 16px when the screen width is greater than 768px (tablet or desktop). The above approach is a Mobile-First Design technique.

What is Mobile-First Design?

Mobile-First is a web development approach where design and code are first focused on mobile devices, then scaled up for larger screens.

Standard Breakpoints for Responsive Design

Breakpoints are specific points where the website layout changes to accommodate different screen sizes. The following are standard breakpoints commonly used in CSS frameworks such as Bootstrap or Tailwind.

/* Extra Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .container { width: 100%; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .container { width: 90%; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .container { width: 80%; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .container { width: 70%; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .container { width: 1170px; }
}

Conclusion

By understanding Responsive Design with CSS Media Query and the Mobile-First approach, we can build modern, user-friendly, and SEO Friendly websites.

Thank you, see you in the next article.