DEV Community

loading...
Cover image for Mastering responsive Web Design

Mastering responsive Web Design

rahxuls profile image Rahul ・3 min read

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.


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;
     }
  }
Enter fullscreen mode Exit fullscreen mode
  • It will work when the device is less than or equal to 1024px
@media (max-width: 1024px){
    h1 {
      font-size: 0.5rem;
     }
  }
Enter fullscreen mode Exit fullscreen mode

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>  
Enter fullscreen mode Exit fullscreen mode

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

Discussion (10)

pic
Editor guide
Collapse
steelwolf180 profile image
Max Ong Zong Bao

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.

Collapse
woet profile image
Woet

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>
Enter fullscreen mode Exit fullscreen mode
Collapse
rahxuls profile image
Rahul Author

Whoops. I'm sorry. Thanks For Noting.

Collapse
cchana profile image
Charanjit Chana

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!

Collapse
rahxuls profile image
Rahul Author

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

Collapse
marcellahaller profile image
marcellahaller

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.

Collapse
rahxuls profile image
Rahul Author

Thank you❤️

Collapse
dn_josh profile image
Dumte

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.

Collapse
rahxuls profile image
Rahul Author • Edited

First of all thank you so much.

Actually using bootstrap it's pretty fast and is easier to develop a website.

Collapse
gathsarah profile image
Gathsara

Good Article For Me.
Thank You..!