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)
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.
You've got an unclosed string in this snippet:
Whoops. I'm sorry. Thanks For Noting.
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.
Thank you❤️
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!
I agree. I too have struggled with that at start till learning web design for 4 months.
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.
First of all thank you so much.
Actually using bootstrap it's pretty fast and is easier to develop a website.
Good Article For Me.
Thank You..!
Thanks for this! Now I understand clearly what max and min-width is all about
thank you rahul for awaring me about responsiveness tips and tricks. these will be very helpful for me