Posted on Aug 1 Ensuring a seamless user experience on device screens of all shapes and sizes is important in an increasingly mobile-centric world. This is where Responsive Web Design (RWD) steps in, by utilizing only HTML and CSS.This article expounds on the complexities of a responsive web design. In addition, this article aims to present the how-to of a responsive website clearly. Knowledge of HTML basics and an idea of how CSS works is a prerequisite for understanding this article. Table of contentsWhat is web responsivenessThe need for web responsiveness How to make a site responsiveUsing CSSUsing CSS frameworksBootstrap 5Benefits of responsive web design Conclusion Recommendations What is web responsiveness?According to Wikipedia,Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.The responsiveness of a website means the Adjustable Layout of the site dependent on the screen size. Responsive web design is not a program or a JavaScript framework. Responsive web design uses only HTML and CSS.The need for web responsiveness The challenge of creating websites that looked good on multiple screen sizes and devices gave rise to the need for web responsiveness.Websites in the early days of the internet were created with a fixed, static layout that didn't change according to the size of the screen.Facebook login page on mobile Facebook login page on desktop However, with the rapid increase in use of mobile devices, there was a greater demand for responsive design.Websites must now be adapted for mobile devices as more people use smartphones and tablets to access the internet. The term ‘responsive design’ was coined by Ethan Marcotte in 2010. How to make a site responsiveDesigning a responsive website requires an understanding of only HTML and CSS as earlier stated. On account of the point above, the following are the methods to achieve responsiveness:Using CSS Using CSS frameworks Using CSSThere are a lot of features built into CSS to make designing responsive sites easier. These are:Media queries MulticolFlexboxCSS grid Media queries Media queries allow you to write the same CSS code in different ways for multiple screens.Using media queries, CSS is used depending on the screen resolution. The following code snippet explains the layout of media queries:@media screen and (max-width: 768px) { /CSS codes go here/}The code above instructs the browser to execute the CSS code written within the media query when the screen width is below a 768 pixel breakpoint. Breakpoints are the points at which a media query is introduced and the layout changes. Supposing that the screen resolution is above 768 pixel breakpoint, the code above wouldn’t run. For example, the following media query tests to see if the current web page is being displayed on a screen width of at least 320 pixels wide. The CSS for the .container selector will only be applied if the condition is true. @media screen and (min-width: 320px) { .container { margin: 1em 2em; }}Multiple queries can be added within a CSS code.The breakpoints can usually be any value between 1200 pixels and 320 pixels.The MDN documentation for Media Queries has more information.MulticolIf you use multicol, you can enter a column-count to specify the maximum number of columns into which your material should be divided. The size of these is then determined by the browser and will vary based on the size of the screen..container { column-count: 4;}.container { column-width: 100px;}In the code snippet above, a column-width is used which means minimum width is specified.The browser will make as many columns 100px wide as would comfortably fit in the container, then divide the remaining space among all the columns.Therefore the number of columns will change according to how much space there is. Using the columns shorthand to provide a maximum number of columns and a minimum column width ensures that :line lengths don't become too long as the screen size increasesline lengths don't become too narrow as the screen size decreases.FlexboxFlexbox is used to lay out multiple elements, even when the size of the contents inside the container is unknown. When a display of flex is assigned to the containing element, the element direction is rendered on the row by default.Items in a flexbox shrink or grow. Below are some code examples:Item 1 Item 2 Item 3.flex-container { display: flex; justify-content: space-between; align-items: center;}.flex-item { flex: 1; padding: 10px; border: 1px solid #ccc;}With the examples above, the three flex items will be evenly distributed with space between them, centered vertically, and automatically adjust their width to fit the container.To get a more insight on flexbox, read CSS Tricks’ flexbox guide.CSS gridUsing CSS grid, spaces are distributed across grid tracks using the fr unit. The fr unit represents a small portion of the grid container's total area that can be used to dynamically size grid rows and columns..container { display: grid; grid-template-columns: 2fr 2fr 2fr;}The code above creates three column tracks, each taking one part of the available space in the container.Using CSS frameworksIn addition to plain CSS, certain frameworks have utilities that aid creating responsive websites. These frameworks offer efficient ways to achieve responsiveness without starting from scratch.For the intent of this document’s scope, one framework will be treated:Bootstrap 5Bootstrap 5Bootstrap’s grid system uses a sequence of the following to layout and align content:containersrowscolumnsBootstrap’s grid system uses a 12 column system to create responsive layouts. Additionally, the Bootstrap grid system has four classes. The following table explains these classes:ClassScreen widthxs768pxsmEqual or greater than 768pxmdEqual or greater than 992pxlgEqual or greater than 1200pxThe following steps provide the steps to creating responsive layouts:Include Bootstrap 5 in your project: To begin:Create a new HTML fileInclude the Bootstrap 5 Content Delivery Network (CDN) links in the Other CSS frameworks that support responsive web design include the following:Tailwind CSSMaterializeSemantic UIBulmaBenefits of responsive web designThe bullet points below explain the benefits of incorporating responsive web design into your User Interface (UI):More mobile traffic: Due to the mobile-centric approach of responsive web design, the volume of website visits and interactions originating from mobile device’s increases. Lower maintenance needs: Additional testing and maintenance are needed to maintain a separate mobile website. In contrast, responsive web design ensures appropriate layout on every device. A distinct content strategy, multiple administration interfaces, and maybe two design teams are required when there are separate desktop and mobile sites. Consequently, responsive design’s “one size fits all” approach enables developers, customers and company owners have fewer hassles. By focusing less on maintenance, there’s more time for other tasks like marketing and content production.Lower bounce rates: Bounce rate refers to the percentage of visitors who land on a website and leave without interacting with any other pages or elements on the site. A responsive and optimized mobile site provides a much better user experience for the visitor. Therefore, it is much more likely that they'll stick around for a longer period of time and explore different areas of your site.Improved SEO: Having a single responsive website rather than separate desktop and mobile versions avoids the issue of duplicate content, which negatively impacts your search ranking. Additionally, Google has moved toward a “mobile-first” approach in recent years.Improved User Experience: A responsive web design significantly impacts user experience by adapting the website's layout and content to different screen sizes and devices. This ensures a consistent and visually appealing experience for users, whether they access the site on desktops, tablets, or smartphones.Enhanced Social sharing: Having a responsive website makes increaes users’ engagement with your site then sharing it on social media. More social traffic means more users visiting your site. In addition, a great social media presence can increase visibility for your website.ConclusionResponsive web design is no longer an optional consideration but a crucial aspect of modern web development.By adopting a mobile-first approach and employing techniques discussed in this document, developers can create websites that deliver an optimal user experience across all devices. Recommendations for further researchResponsive design - Learn web development | MDNResponsive web designGrid system · Bootstrap v5.0Responsive Layouts, Fewer Media QueriesTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Smitter - Jul 17 Zevi Reinitz - Jul 27 Anuradha Aggarwal - Jul 9 webbureaucrat - Jul 18 Once suspended, kelechikizito will not be able to comment or publish posts until their suspension is removed. Once unsuspended, kelechikizito will be able to comment and publish posts again. Once unpublished, all posts by kelechikizito will become hidden and only accessible to themselves. If kelechikizito is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Kelechi Kizito Ugwu. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag kelechikizito: kelechikizito consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging kelechikizito will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.