I still struggle with making websites responsive. I know beginners surf the web (or at least, that's what I did) in an attempt to learn how to make websites responsive, but what you'll find is fragmented explanations of smaller concepts. In this post, I'm going to try my best to explain the 8 responsive web design best practices that have helped me master this element of web development, and might help you make your websites responsive in 2021. 1. Responsive vs Adaptive Design: Understand the difference Responsive Dynamic changes to the appearance of the website. Depend on the screen size and orientation of the device. Adaptive Adaptive design uses a few fixed layouts and then selects the best layout for the current screen sizes. 2. Use relative units Instead of using an absolute unit start using relative units. => Don't use {cm, mm, in, pc, px, pt} Absolute units => Use {em, rem, lh, vw, vh} Relative unit 3. Divide design into Breakpoints Breakpoints are predefined areas of measurement that allow you to re-arrange your web layout dependent on the size of the browser or device. Bootstrap responsive breakpoints Small device = @media (min-width:576px) {...} Medium device = @media (min-width:768px) {...} Large device = @media (min-width:992px) {...} Extra large device = @media (min-width:1200px) {...} 4. Understand Max and Min values Understand when to use Max and Min values. It will work when the device width is greater than or equal to 1024px. @ (min-width: ){ { : ; } } media 1024px h1 font-size 1rem It will work when the device is less than or equal to 1024px @ (max-width: ){ { : ; } } media 1024px h1 font-size 0.5rem 5. Use nested objects Nested objects or container are the objects that are inside another object. It allows controlling the nested element instead of constantly having to control each element. Read RAHULISM> Articles < = "> div class "parent> <span class=" nested-element-1 </ > span < = > p class "nested-element-1" </ > p < = > p class "nested-element-1" </ > p </ > div <!-- STYLE --> < > style { : black; } { : blue; } .parent span color .parent p color </ > style 6. Mobile or Desktop first When Desktop First is Appropriate When the sales are high on desktop User interfaces are rich Focusing on complex and enhanced visuals Website which has productivity tools or business-related service Highly refined user experience When Mobile First is Appropriate Simple and minimalistic websites User experience is optimized for mobile Website like entertainment, news or another on-the-go category. 7. Understand Web VS System Fonts Every piece of typography or font that is loaded up on your website is going out to a server and make a request and come back. System fonts are default fonts and they are fast to load Web fonts slow down your load times for the user who are browsing your site SOME SAFE WEB FONTS THAT ARE RENDERED CORRECTLY Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New. 8. Bitmap vs vector images Bitmap images are stored as a series of tiny dots called pixels, A vector image is an artwork made up of points, lines and curves that are based upon mathematical equations, rather than solid coloured square pixels. What to use? : More scalable than bitmap, Ability to increase the size of the graphic without pixelation and Better Quality. VECTOR IMAGE 😎Thanks For Reading | Happy Coding 🤓 SUPPORT ME Also published here .
