Rahul

Posted on Feb 27, 2021 • Edited on Dec 1, 2022

Mastering responsive Web Design

#webdev #codenewbie #css #programming

I haven't posted anything from the last somedays. Though I have written 12 articles related to JavaScript, React and CSS.

I still struggle with making the website responsive. I know beginners surf on the web(i had done this earlier) to make the website responsive but what they get is just an explanation of small concepts.

Here in this post, I am gonna clear everything about how to master Responsive Web Design.

600+ Free Design resources

Resources. Freebies. Learn.
We're making things easier on Internet.

Visit - 600+ free design resources

Know Responsive vs Adaptive Design

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.

Use relative units

Instead of using an absolute unit start using relative units.

Absolute units => Don't use {cm, mm, in, pc, px, pt}

Relative unit => Use {em, rem, lh, vw, vh}

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) {...}

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.



@media (min-width: 1024px){
    h1 {
      font-size: 1rem;
     }
  }

It will work when the device is less than or equal to 1024px



@media (max-width: 1024px){
    h1 {
      font-size: 0.5rem;
     }
  }

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.




<div class="parent">
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>
</div>

<!-- STYLE -->
<style>   
  .parent span {
    color: black;
  }
  .parent p {
    color: blue;
  }
</style>

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.

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.

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?

VECTOR IMAGE: More scalable than bitmap, Ability to increase the size of the graphic without pixelation and Better Quality.

😎Thanks For Reading | Happy Coding🤓

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Top comments (12)

Max Ong Zong Bao • Feb 27 '21

I think learning either CSS 3 or flexbox helps a lot to build responsive design. I learnt alot on building a web page without relying on a front-end framework. This becomes more useful as you transit into multiple different front-end web framework.

Woet • Feb 27 '21

You've got an unclosed string in this snippet:

<div class="parent>
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>
</div>

Rahul • Feb 27 '21

Whoops. I'm sorry. Thanks For Noting.

marcellahaller • Mar 31 '21

How many useful codes as well as tips, many thanks to the author! Here I found a solution to the problem that I could not solve for a long time related to the adaptation of the design for a mobile device, by the way, if you are a beginner and want to understand this in more detail, here everything is very easily explained gapsystudio.com/blog/what-is-respo... I advise you to read.

Rahul • Mar 31 '21

Thank you❤️

Charanjit Chana • Feb 28 '21

Happy to see your examples include min-width, for years I used max-width because that’s what all the examples showed. It took a single conversation to open my mind to doing it the opposite way and truly do things mobile-first!

Rahul • Feb 28 '21

I agree. I too have struggled with that at start till learning web design for 4 months.

Dumte Nwidoobee Joshua • Mar 1 '21

I am so glad you have given me a full understanding of what min-width and max-width are. I have been confusing myself over the two terms.
Though I have so ask this, what is the fate of going into bootstrap if someone has fully understood responsiveness through media queries?
Thanks in advance to anyone who can explain this in a clear way for me.